Threejs入门之十一：创建旋转的地球

经过前面几个章节的介绍，我们对Threejs已经有了一个相对深入的了解，下面我们通过Threejs来做一个旋转的地球效果。
1.首先在电脑上创建一个earth文件夹，在earth文件夹中创建images文件夹用于存放图片文件；创建一个js文件夹用于存放JavaScript代码；创建一个css文件用于存放css样式表文件；
2.拷贝资源，将Threejs源码中的three.module.js拷贝到js文件夹，将地图的贴图文件拷贝到images文件夹
3.用vscode打开earth文件夹，在根目录下新建index.html文件，在index.html中引入three.module.js，在index.html中创建一个id为webgl的div

<div id="webgl"></div>
<script type="importmap">{"imports" : {"three":"./js/three.module.js"} }</script>

4.在css文件夹新建style.css文件，清空浏览器默认样式，并将style.css文件在index.html中引入，设置div水平居中

* {margin: 0;padding: 0;
}
#webgl {margin: 0 auto;
}

5.在根目录下新建index.js文件，并在index.html中引入

<script type="module" src="./index.js"></script>

6.在index.js中编写代码
引入Threejs

import * as THREE from 'three'

创建场景对象

const scene = new THREE.Scene()

创建球形几何体
设置球体半径，水平分段数和垂直分段数参数

const geometry = new THREE.SphereGeometry(150,32,32)

创建材质
这里使用MeshPhongMaterial创建材质，并加载images中准备好的地球材质

const material = new THREE.MeshPhongMaterial({map:new THREE.TextureLoader().load('./images/earth.js')
})

创建物体
创建网格对象并使用上面创建的几何体和材质作为参数传给对象，设置对象的坐标位置，并将其添加到场景中

const earth = new THREE.Mesh(geometry,material)
earth.position.set(0,10,0)
scene.add(earth)

创建相机
设置视窗的宽度为800，高度为600，创建相机，并设置相机的角度，宽高比，最近点和最远点；

// 视窗尺寸
const width = 800
const height = 600
// 创建相机
const camera = new THREE.PerspectiveCamera(75,width/height,0.1,800)

设置相机的位置和相机朝向的物体

// 相机位置
camera.position.set(200,200,200)
// 相机朝向
camera.lookAt(earth.position)

创建光源
创建一个点光源

// 创建点光源
const light = new THREE.PointLight(0xffffff,1,100)
light.position.set(0,0,0)
scene.add(light)

创建一个环境光

// 创建环境光
const directionalLight = new THREE.DirectionalLight(0xffffff,1)
// 设置光源的方向
directionalLight.position.set(80,100,50)
// 设置光的target
directionalLight.target = earth
scene.add(directionalLight)

创建渲染器

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width,height)

将渲染器挂载到div上

// 挂载到id为webgl的div
document.getElementById('webgl').appendChild(renderer.domElement)

创建循环调用函数
创建animation函数，在函数里面调用earth.rotation.y += 0.01，使其每次渲染都旋转0.01弧度，使用renderer.render(scene,camera)渲染

// 循环调用
function animation() {requestAnimationFrame(animation)earth.rotation.y += 0.01renderer.render(scene,camera)
}
animation()

保存，刷新浏览器，可以看到一个漂亮的地球已经渲染到浏览器，并自动旋转

至此，旋转的地球已经创建完成，完整的代码和地球贴图材质可以通过以下地址下载：https://download.csdn.net/download/w137160164/87650456

核心代码如下：

import * as THREE from 'three'
// 场景
const scene = new THREE.Scene()
// 球体
const geometry = new THREE.SphereGeometry(150, 32, 32)
// 材质
const material = new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('./images/earth.jpg')
})
// 物体
const earth = new THREE.Mesh(geometry, material)
earth.position.set(0, 10, 0)
scene.add(earth)
// 视窗尺寸
const width = 800
const height = 600
// 创建相机
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 800)
// 相机位置
camera.position.set(200, 200, 200)
// 相机朝向
camera.lookAt(earth.position)
// 创建点光源
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set(0, 0, 0)
scene.add(light)
// 创建环境光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// 设置光源的方向
directionalLight.position.set(80, 100, 50)
// 设置光的target
directionalLight.target = earth
scene.add(directionalLight)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
// 挂载到id为webgl的div
document.getElementById('webgl').appendChild(renderer.domElement)
// 循环调用
function animation() {requestAnimationFrame(animation)earth.rotation.y += 0.01renderer.render(scene,camera)
}
animation()

Threejs入门之十一：创建旋转的地球相关推荐

Inventor SDK入门---用API创建具有旋转和拉伸特征的零件
使用以下代码,利用给定的参数创建1个具有旋转和拉伸特征的零件. public bool CreatNewPart() { //在 StandardAddInSe ...
无人驾驶汽车系统入门（十一）——深度前馈网络，深度学习的正则化，交通信号识别
无人驾驶汽车系统入门(十一)--深度前馈网络,深度学习的正则化,交通信号识别在第九篇博客中我们介绍了神经网络,它是一种机器学习方法,基于经验风险最小化策略,凭借这神经网络的拟合任意函数的能力,我们可 ...
Threejs入门教程
一.本地搭建Threejs官方文档网站 1.官网地址:https://github.com/mrdoob/three.js 下载压缩包并解压或使用git clone 若github过慢,则使用gite ...
WPF自学入门（十一）WPF MVVM模式Command命令 WPF自学入门（十）WPF MVVM简单介绍...
WPF自学入门(十一)WPF MVVM模式Command命令在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式.正 ...
Threejs入门之五:Threejs中的辅助对象
在继续Threejs入门之旅之前,我们先来了解几个Threejs提供的辅助对象,这些辅助对象有助于我们更好的了解Threejs.Threejs提供了很多辅助对象,这里我们先了解几个我们经常用到的坐标轴 ...
OpenGL ES for Android 绘制旋转的地球
No 图 No Code,我们先来欣赏下旋转的地球: 是不是很酷炫,要想绘制出上面酷炫的效果需要3个步骤: 计算球体顶点数据地球纹理贴图通过MVP矩阵旋转地球计算球体顶点数据我们知道OpenG ...
ThreeJS 纹理贴图创建一个我的世界草地方块
ThreeJS 纹理贴图创建一个我的世界草地方块开始准备使用ThreeJS写一个类似<我的世界>场景的射击类游戏,地形和我的世界很相似.场景中需要进行很多的纹理贴图,本篇文章主要以给一个 ...
Turtlebot4入门教程-演示-创建节点(Python)
来源:Turtlebot4入门教程-演示-创建节点(Python) - 创客智造说明: 本教程将介绍创建 ROS2 包和用 Python 编写 ROS2 节点的步骤. 有关 C++ 示例,请单击此处 ...
python入门004～创建属于自己的第一个python3项目～基础知识的讲解
上一节带领大家成功的安装了pthon3,并且在开发者工具pycharm里配置了python,这一节就开始带领大家学习python3的基础知识了. 如果你还没有安装python3,也没有安装开发者工具p ...

Threejs入门之十一：创建旋转的地球

Threejs入门之十一：创建旋转的地球相关推荐

最新文章

热门文章