three.js 学习之自转的地球

首先需要知道什么是 three.js。简单的说，three.js 是一个非常优秀的 WebGL 开源框架, three(3d) + js(javaScript)。其开源项目的地址：

github: https://github.com/mrdoob/three.js

而 WebGL 是在浏览器中实现三维效果的一套规范。

在 three.js 中有几大重要的概念需要先了解一下：

场景（scene）
相机（camera）
渲染器（renderer）

关键：有了这三样东西，我们才能够使用相机将场景渲染到网页上去`

1、scene

在 WebGL 世界里，场景是一个非常重要的概念，它是存放所有物体的容器。在 three.js 里面新建一个场景很简单，new THREE.Scene 实例就好了。代码如下：

var scene = new THREE.Scene(); // 场景只有一种

2、camera

相机（camera）

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000) ;

PerspectiveCamera( fov, aspect, near, far )

fov(Number): 仰角的角度
aspect(Number): 截平面长宽比，多为画布的长宽比。
near(Number): 近面的距离
far(Number): 远面的距离

图解 THREE.PerspectiveCamera 参数，如下:

3、renderer

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

好了，几大概念简单的说了，还不是很明白也不打紧，先看下最终的效果：

开始画地球

1、导入 three.min.js 文件，可以下载到本地，也可以采用 cdn, 我这里采用的是下载下来的方式：

<script src="assets/plus/threejs/three.min.js"></script>

或者

<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

2、准备渲染器 renderer 的 domElement 元素

<div id="canvas-frame"></div>

<style></style> 中加入 css:

 div#canvas-frame {
     border: none;
     cursor: pointer;
     width: 100%;
     height: 100vh;
     background-color: #EEEEEE;
}

3、实例化一个 scence 对象, 用来存放我们的地球实体。

// 场景
var scene;
function initScene() {
   scene = new THREE.Scene();
}

4、准备搭建 camera 的位置，和调节角度,在 three.js 里面采用给的是右手坐标系：

// 相机
var camera;
function initCamera() {
   camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
   camera.position.x = -500;
   camera.position.y = 500;
   camera.position.z = -500;
}

这里采用的是透视相机。视角越大，看到的场景越大，那么中间的物体相对于整个场景来说，就越小了。

5、准备渲染器 renderer

// 渲染器
var renderer;
function initThree() {
   width = document.getElementById('canvas-frame').clientWidth;
   height = document.getElementById('canvas-frame').clientHeight;
   // 实例化 THREE.WebGLRenderer 对象。
   renderer = new THREE.WebGLRenderer({
                          antialias: true,
                        alpha: true,
                        canvas: renderer
                      });
   // 设置 renderer 的大小
   renderer.setSize(width, height);
   // 挂载到准备的 domElement 上
   document.getElementById('canvas-frame').appendChild(renderer.domElement); 
   // Sets the clear color and opacity.
   renderer.setClearColor(0x000000, 1.0);
}

这里对 THREE.WebGLRenderer 实例的参数进行讲解。

canvas - 渲染器绘制输出的那个 canvas, 这对应于下面的 domElement 属性。如果没有在设置，则会创建一个新的画布元素。
antialias - 抗锯齿化
alpha - alpha 缓冲区

6、画地球啦，这里的地球其实就是在一个球体上贴上带有地球纹路的贴纸。

// 地球
var earthMesh;
function initEarth() {
    // 实例化一个半径为 200 的球体
   var earthGeo = new THREE.SphereGeometry(200, 100, 100);
   var earthMater = new THREE.MeshPhongMaterial({
            map: new THREE.TextureLoader().load('./assets/earth.jpg')
        });
   earthMesh = new THREE.Mesh(earthGeo, earthMater);
   scene.add(earthMesh);
}

7、给地球加上云层；

// 云
var cloudsMesh;
function initClouds() {

    // 实例化一个球体，半径要比地球的大一点，从而实现云飘咋地球上的感觉
    var cloudsGeo = new THREE.SphereGeometry(201, 100, 100);
    
    // transparent 与 opacity 搭配使用，设置材质的透明度，当 transparent 设为 true 时， 会对材质特殊处理，对性能会有些损耗。
    var cloudsMater = new THREE.MeshPhongMaterial({
        alphaMap: new THREE.TextureLoader().load('./assets/clouds.jpg'),
        transparent: true,
        opacity: 0.2
    });
    
    cloudsMesh = new THREE.Mesh(cloudsGeo, cloudsMater);
    scene.add(cloudsMesh);
}

到这里地球就画完了，但是，就像现实的世界一样，如果你不给它打点光，世界就是漆黑一片的，所以接下来给我们的 scene 加点光吧。

8、给世界来点光，世界还你一片彩。

// 光源
var light;
function initLight() {
    // A light source positioned directly above the scene, with color fading from the sky color to the ground color. 
    // 位于场景正上方的光源，颜色从天空颜色渐变为地面颜色。
    //  var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
    // scene.add(light);
    
    // 环境光
    light = new THREE.AmbientLight(0xFFFFFF);
    light.position.set(100, 100, 200);
    scene.add(light);
    
    // 平行光
    // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不一样
    // light = new THREE.DirectionalLight(0xffffbb, 1);
    // light.position.set(-1, 1, 1);
    // scene.add(light);
}

这里采用的是环境光，其它注释了的两种光的效果也不错哦~
直到这里，地球就画出来了，但是我们的题目是画一颗自转的地球，那我们如何让它自己转起来呢？我们继续往下看。

9、引入一个控制器，这里如果你足够厉害自己写也可以哦，我采用的开源的。

 <script src="assets/plus/threejs/js/controls/OrbitControls.js"></script>

 // 载入控制器
 var controls = new THREE.OrbitControls(camera, renderer.domElement);

10、定义地球和云层自转的动画，速度不一样会更像哦。这里说说为什么循环动画使用的是 requestAnimationFrame, 而不是更熟知的 setInterval？setInterval 是到点就往任务队列里插，是 JS 引擎的定时器方法；requestAnimationFrame 是跟着浏览器的绘制走，浏览器每次重绘的时候调用，是 DOM 引擎提供的方法。

function animate() {
  controls.update();
  // 地球自转
  earthMesh.rotation.y -= 0.002;
  // 漂浮的云层
  cloudsMesh.rotation.y -= 0.005;
  cloudsMesh.rotation.z += 0.005;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

自转的地球到这里就大功告成啦~

完整的代码见：https://github.com/jiangyuzhen/three-earth

Tips: 有的小伙伴克隆上面的代码后， 用双击 index.html 的方式看不到效果，可以自己搭一个静态服务或者试试 anywhere (随启随用的静态文件服务器)：

步骤如下:

// 全局安装
npm i anywhere -g 

// 文件根目录下执行
anywhere

1、scene

2、camera

3、renderer

开始画地球

相关资料