这次，我们通过案例来分析如何让一个立方体动起来！附上源码哦！

点击上方“Web前端进阶指南”关注我呦

跟程序员小强一起学前端

上一篇内容我们说了关于three.js的一些入门知识，了解了一下WebGL中的three.js框架，以及一些优缺点，也简单的看了一些案例。接下来继续往深里学习吧。

每次学习之前都会去Three.js官网的案例库里看看有没有好玩的，炫酷的动画，这样才能勾起对它的爱好，在这之前，我又去找到一款非常可爱炫酷的案例，但是这个案例比较难，我们就拿上一篇例子中涉及到的内容展开学习。

上一篇的最后我们简单的示范了让一个立方体旋转起来，接下来将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。在学习完成后，我们将实现一个更为简单的立方体旋转，我会把代码放到网盘，供大家学习参考。

分析案例

在开始之前呢，我会逐步的附上代码图片一一分析如何用代码去实现这个立方体旋转效果，我们由广泛的理解细分到每个函数的应用。

起步之前

在开始使用three.js之前，我们跟往常写页面一样，将它放在HTML文档里，同时将three.js引用到文档中，跟写js一样将它写在<script></script>标签中，等你写完了，然后在你的浏览器中打开这个HTML文件。如下图所示：

这里页面渲染的时候动画都会由<Canvas></Canvas>替代，所以我们有必要去给Canvas定义CSS样式，接下来的所有代码都会写在<script>标签中。

创建一个场景

为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。例如下图：

给大家解释一下这段代码：

在上面这点代码里我们建立了场景、渲染器和相机，然后将它添加到了DOM元素里。

1、场景

Three.js有三种场景Fog（雾）、FogExp2、Scene。这里我们用的是Scene，它呢允许你在什么地方、摆放什么东西来交给three.js来渲染，这里你防止物体、灯光和摄像机的地方。

2、渲染器

我们可以根据所需要的渲染区域的宽高来创建一个渲染器，让他填满我们的应用程序，一般情况下我们将渲染器的宽高设置为浏览器的宽和高，有时候一些应用程序对性能要求比较高，我们可以用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2，这样一来，在渲染的时候，会以宽和高以一般的的尺寸进行渲染。

如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。例如，假设你的<canvas> 标签现在已经具有了100%的宽和高，调用setSize(window.innerWidth/2, window.innerHeight/2, false)，将使得你的应用程序以一半的分辨率来进行渲染。

除此之外，three.js还有三种渲染器，当浏览器版本过低时，可以采用其他的渲染器进行渲染·。例如：

• WebGLMultisampleRenderTarget：一种特殊的渲染目标，可用于使用多个采样的renderbuffers。
• WebGLRenderTarget：render target是一个缓冲，就是在这个缓冲中，视频卡为正在后台渲染的场景绘制像素。 它用于不同的效果，例如用于在一个图像显示在屏幕上之前先做一些处理。
• WebGLRenderTargetCube：被CubeCamera（立方相机）作为它的WebGLRenderTarget使用

3、相机

three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。

这个函数里面有四个参数，我们来解释下：

• 第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是角度单位。
• 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
• 接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。

最后就是将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。

做好了这些工作，我们就来看看所说的立方体，那么如何添加呢？两眼看这里，我们先来添加代码：

几乎里面都封装好了，我们只需引用即可。

4、创建几何体

要创建一个立方体，我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。

此外，three.js包含了很多几何体。例如：

• CircleGeometry：圆形几何体
• ConeGeometry：圆锥几何体
• CylinderGeometry：圆柱几何体
• ExtrudeGeometry：挤压几何体

等等还有40多种几何体。这里我们就用立方体。

5、创建材质

就是装饰几何体，给它添加颜色，Three.js自带了很多种材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们的属性的对象。例如：

• LineBasicMaterial：基础线条材质
• LineDashedMaterial：虚线材质
• MeshBasicMaterial：基础网格材质
• PointsMaterial：点材质

6、创建网格

我们需要一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。

7、将网格添加到场景

默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

渲染场景

在这里才是正真的渲染，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说“为什么我们不直接用setInterval来实现刷新的功能呢？”当然啦，我们的确可以用setInterval，但是，requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

让它动起来

我们只需添加下面代码即可：

这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，你可以在这个动画循环里调用别的函数，这样你就不会写出有上百行代码的animate函数。

结果

为了优化一下代码，我们把变量声明为全局变量，定义方法把各自的步骤写进方法，最后初始化函数，页面加载完成是调用。如下图：

这样一来，所有的步骤我们都完成了，我们已经完成了一个很简单的Three.js的案例，这也算是入门了，给你学three.js已经打下了一个基础。

今天的Three.js我们就说到这里，其实原理就是这样的，大部分都是通过一些函数方法实现的，官方文档中文版翻译不是很好，很难去理解通，我学的时候就是通过案例去分析一些函数方法的作用，就想今天我分析的这样，希望大家支持，谢谢。