前言

大家好，又到了周末了，又到了Fly写文章的时候了， 过几天不是中秋节了，想着之前写过一篇从0- 1 实现3D地球的，反响效果特别好， 这次趁着节给大家写了一个月球绕地球的运转的动画。本篇文章还是偏入门级别，重在把简单的知识讲清楚，如果是资深three爱好者，可以直接划走了，不浪费大家时间。ok言归正传，读完本篇文章你可以学到什么？至于心爱的她—— 就是学习

本文阅读估计花费 5 分钟

1. 天空盒子的制作
2. three.js 中的贴图
3. 一个物体绕另一个物体旋转

初始化

这篇文章我不会在从头详细的介绍three.js 的一些要素了，如果小伙伴你不是很清楚的话，你可以直接看下我这篇文章入门篇——

[?带你入门three.js——从0到1实现一个3d可视化地图] ， 这篇其实你看完可以对three.js 有一个基本的了解， OK 我们开始搭建基本的要素

class Moon {
  constructor() {
    this.init()
  }
  init() {
    // SCENE
    this.scene = new THREE.Scene()
    // CAMERA
    let SCREEN_WIDTH = window.innerWidth,
      SCREEN_HEIGHT = window.innerHeight
    let VIEW_ANGLE = 45,
      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
      NEAR = 0.1,
      FAR = 20000
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR)
    this.scene.add(this.camera)
    this.camera.position.set(0, 150, 400)
    this.camera.lookAt(this.scene.position)
    // RENDERER
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
    })
    this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT)
    document.body.appendChild(this.renderer.domElement)
  }

  addCube() {
    const geometry = new THREE.BoxGeometry()
    const material = new THREE.MeshBasicMaterial({ color: 0x50ff22 })
    this.cube = new THREE.Mesh(geometry, material)
    this.scene.add(this.cube)
  }

  setController() {
    this.controller = new THREE.OrbitControls(
      this.camera,
      this.renderer.domElement
    )
  }

  render() {
    this.renderer.render(this.scene, this.camera)
  }
}

主要是搭建了 、 渲染器render、以及一个controller 然后我在场景中加了一个立方体， 看下现在的画面：

基础的搭建

是不是非常丑，哈哈哈 这才只是测试， 接下来我们开始搭建天空盒背景。

搭建天空盒子背景

天空盒子的思路就是：使用一个超级大的立方体， 将每一面都贴上贴图。首先我们创建一个geometry

let skyGeometry = new THREE.CubeGeometry(10000, 10000, 10000)

这个cubeGeometry 长宽高 都是 10000 主要是将我们这个场景包住。紧接着开始把六张图片的路径都准备好如下：

let imagePrefix = 'img/'
let directions = ['up', 'down', 'behind', 'front', 'left', 'right']
let imageSuffix = '.png'

有了图片路径后，我们开始生成纹理texture：

let imageURLs = []
for (let i = 0; i < 6; i++) {
  imageURLs.push(imagePrefix + directions[i] + imageSuffix)
}
let textureCube = THREE.ImageUtils.loadTextureCube(imageURLs)

其实大家都知道，three.js中的mesh 是由geometry 和material 组成的 接下来我们开始给mesh 附材质

这里我用到了ShaderMaterial, 这是一个什么材质？？？

使用自定义shader渲染的材质。shader是一个用?GLSL编写的小程序 ，在GPU上运行。您可能需要使用自定义shader，如果你要：

• 要实现内置 materials 之外的效果。
• 将许多对象组合成单个BufferGeometry以提高性能。

这是一个自定义材质，没错这里我们要用到了着色器，很多小伙伴很抵触这个语言， 但是后面还是多给大家介绍着色器的一些知识。

这里给大家介绍下three.js 中的 ShaderLib ,他是个什么东西呢？？？？

他是three.js 着色器的库： 源码地址：https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js

他里面有各种着色器，正好也有我们所需要的cube :

let shader = THREE.ShaderLib['cube']

我们还是本着学习的目的：看看他是怎么实现的， 先看顶点着色器：

"varying vec3 vWorldPosition;
void main() {
    vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
    vWorldPosition = worldPosition.xyz;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}"

定义了一个vWorldPosition 这样的一个变量， 乘上模型矩阵， 然后将这个值传给 片元着色器；很多人肯定又忘记了这个到底是啥子哦？我其实之前 在这篇文章讲过 [?「干货」一份小白前端可视化学习指南——附思维导图] ， 我还是继续讲一遍。

1. 首先物体的自身有个坐标系我们叫做局部坐标系，他也有个原点，但是他在世界坐标系下也有对应的位置，所以他们之间有一个矩阵变化——模型矩阵
2. 世界坐标系——到观察坐标系也有矩阵变化， 这叫视图矩阵
3. 观察空间——裁剪空间 叫做 投影矩阵因为3维空间的东西我们是用相机去模拟人眼，在视椎体内的东西才能被看到。所有就有了投影矩阵， 有透视投影和正交投影， 一个近大远小，一个远近都是一样的

这里又有人问图中是 modelView 他其实就是 模型矩阵 * 视图矩阵。

看完顶点我们看下片元着色器：

"uniform samplerCube tCube;
uniform float tFlip;
varying vec3 vWorldPosition;
void main() {
  gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );
}"

看着其实没什么，主要是接收顶点着色器的 vWorldPosition ， 还有两个全局变量：

我们继续看下uniform;

uniform

很简单其实我们这里就是 tcube 和 tFlip 两个变量 但是 tcube 为空 很显然 我们要把 刚才生成的贴图 赋值 给他就搞定了。

shader.uniforms['tCube'].value = textureCube

let skyMaterial = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms: shader.uniforms,
  depthWrite: false,
  side: THREE.BackSide,
})
let skyBox = new THREE.Mesh(skyGeometry, skyMaterial)
this.scene.add(skyBox)

这样整个天空盒 就搭建完成了：我们看下效果gif 图：

天空图

看着有点卡，其实是很棒的。如果感兴趣的话可以把项目考下来，自己尝试下。

月球

我们这次的主题不是月球嘛， OK， 我们开始往场景中加入月球， 月球其实就是一个球体对应three.js 就是SphereGeometry， 还是老操作就是往场景中添加月球。

let sphereGeo = new THREE.SphereGeometry(100, 32, 16)
let moonTexture = THREE.ImageUtils.loadTexture('img/moon.jpg')
let moonMaterial = new THREE.MeshBasicMaterial({
  map: moonTexture,
})
this.moon = new THREE.Mesh(sphereGeo, moonMaterial)
scene.add(moon)

并同时给他加了纹理贴图:

月球

地球

按照同样的套路我们继续增加地球， 毕竟我们需要绕着他转嘛对吧。

addEarth() {
    let sphereGeo = new THREE.SphereGeometry(50, 32, 16)

    let moonTexture = THREE.ImageUtils.loadTexture('img/daymap.jpg')
    let moonMaterial = new THREE.MeshBasicMaterial({
      map: moonTexture,
    })
    this.earth = new THREE.Mesh(sphereGeo, moonMaterial)
    this.earth.rotation.set(-0.2, 2.7, 0.01)
    this.earth.receiveShadow = true
    this.scene.add(this.earth)
  }

地球

动画

现在场景中基本元素都有了， 我们第一步先做一个位置上的调整。地球是肯定半径是比月球大的，位置也有点偏差，ok 接下来我开始调调整：

1.地球赤道半径:6378136.49 米 ,月球的半径 1738000米,月球半径和地球半径之比为0.2725。 所以半径比是0.27

我重新设置了半径和距离：

// 月球的
let sphereGeo = new THREE.SphereGeometry(27, 32, 16)
this.moon.position.set(250, 5, 0) 

// 地球 
let sphereGeo = new THREE.SphereGeometry(100, 32, 16)
this.earth.position.set(-0.2, 2.7, 0.01)

Ok 来看下效果：

地球和月球

现在整个画面是静止的，所以我们得让画面动起来， 这就用到了 requestanimation ， 其实只要让地球和月球绕Y轴转就好了

animate() {
    requestAnimationFrame(this.animate.bind(this))
    this.moon.rotation.y += 0.015
    this.earth.rotation.y += 0.003
    this.render()
    this.controls.update()
  }

看下效果图：

地球动画

但是有个问题哈：大家都知道 月球是绕着地球转的？他这样转 其实是不行的

转换成问题就是一个物体 绕 另一个物体旋转 。我先说一种方案也是比较常用的就是， 动的物体先移动的定的物体的地方， 然后呢 在旋转角度， 旋转之后，在 平移回去。其实就是一个 移动矩阵、 一个旋转矩阵、 加一个移动矩阵的逆矩阵

但是这次我换一种思路去实现：

在地球的位置在新建一个球体，只不过是隐藏的，然后把月球加入到这个地球中。对这个球体进行旋转：我们先开始实现：

addCpoy() {
    let geo = new THREE.SphereGeometry(100, 50, 50)
    // 不显示
    let mat = new THREE.MeshBasicMaterial({
      color: 0xa3a3a3,
      visible: false,
    })

    this.copy = new THREE.Mesh(geo, mat)
    // 把月球添加到 影藏的mesh 中
    this.copy.add(this.moon)
    this.scene.add(this.copy)
}

然后对隐藏的mesh 进行旋转

 animate() {
    requestAnimationFrame(this.animate.bind(this))
    this.copy.rotation.y += 0.015
    this.earth.rotation.y += 0.003
    this.render()
    this.controls.update()
  }

我们看下效果图：

环绕动画最终版

实现原理也是很简单：copy 的geometry 和 地球在一个position, 然后自身旋转， 也会带动子对象旋转。而子对象相对于他也有距离， 也就是实现了绕地球旋转了。