用 Three.js 创建一个酷炫且真实的地球

接下来我会分步骤讲解，在线示例在数字孪生平台。

先添加一个球体

我们用threejs中的SphereGeometry来创建球体，给他贴一张地球纹理。

let earthGeo = new THREE.SphereGeometry(10, 64, 64)
let earthMat = new THREE.MeshStandardMaterial({
   
  map: albedoMap,
})
this.earth = new THREE.Mesh(earthGeo, earthMat)
this.group.add(this.earth)
1
2
3
4
5
6
7

然后写一个函数让这个球体能够进行自转，并且该函数每帧都会调用。

updateScene(interval, elapsed) {
   
    this.controls.update()
    this.stats1.update()

    this.earth.rotateY(interval * 0.005 * params.speedFactor)
}
1
2
3
4
5
6
7

在屏幕上我们就会得到如下的效果。

添加凹凸贴图

地球上有山脉海洋，本质上是凹凸不平的，在太阳下也会呈现不同的阴影效果。那么为了让我们的地球更加真实，我们可以用 NASA 对外提供的地球的凹凸贴图，将其应用到地球的MeshStandardMaterial.

this.dirLight = new THREE.DirectionalLight(0xffffff, params.sunIntensity)
this.dirLight.position.set(-50, 0, 30)
scene.add(this.dirLight)

let earthMat = new THREE.MeshStandardMaterial({
   
      map: albedoMap,
      bumpMap: bumpMap,
      bumpScale: 0.03, 
})
1
2
3
4
5
6
7
8
9
10

这样我们就能够立即看山脉在阳光照耀下投下的阴影。

bumpScale这个值要尽量小一点，如果太大的话，会发现即使在地球的阴影面，山脉也会被照亮。

添加云

NASA官方同样提供了云的贴图。我们将云的贴图添加到一个单独的网格球体，并且半径要比地球大。这么做是为了后面模拟云在地球上投射阴影的效果。

const cloudsMap = await loadTexture