在电脑上制作动画通用

加入你的3D开发工具链。

由于 GSL 语法的复杂性，对于许多开发人员来说 WebGL 是一个未知的领域。但是有了 Three.js，在浏览器中 3D 的实现变得简单。下面将讲述一下如何使用 Three.js 创建一个简单的 3D 飞机飞行的动画场景。

译注：WebGL 是一项利用 JavaScriptAPI 渲染交互式 3D 电脑图形和 2D 图形的技术，可兼容任何的网页浏览器，无需加装插件。通过 WebGL 的技术，只需要编写网页代码即可实现 3D 图像的展示。GLSL-OpenGL Shading Language 也称作 GLslang ，是一个以 C 语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。详细麻烦谷歌或百度一下～

在本教程中，我们将创建一个简单的 3D 场景, 在两个主要的部分会有一些交互。在第一部分，我们会讲解 Three.js 的基础和如何创建一个简单的场景。第二部分会详细讲述如何优化模型，如何为场景中的不同元素增添气氛以及更流畅的运动效果。

由于完整的游戏超出了本教程的范围，但是你可以下载或 checkout 源码。它包含了许多额外有趣的部分如：碰撞，抓硬币和增加得分。

在本教程中，我们将重点学习 Three.js 中的一些基础概念。这些基础概念将带你走进 WebGL 这新领域！

事不宜迟，我们马上开始~

HTML & CSS

本教程主要采用 Three.js 类库，Three.js 让 WebGL 变得易于使用。从官网或 GitHub repocheckout 获取关于 Three.js 更多的信息。

第一样要做的事情就是在 HTML 标签中引入 Three.js：

然后在 HTML 中需要添加一个元素作为容器。

你可以像下面那样写一些简单的样式，让它填满整个 viewport：

#world {position: absolute;width: 100%;height: 100%;overflow: hidden;background: linear-gradient(#e4e0ba, #f7d9aa);}

正如你所见的一样，背景有些渐变的效果，就像天空。

以上是标签和样式！

JavaScript

如果你已经掌握了一些 JavaScript 的基础知识，使用 Three.js 会变得相当简单。来~我们看看实现不同部分的代码。

The Color Palette

在开始场景编码之前，我觉得定义一个调色板是很有用的。因为在整个项目中会经常使用到。在这个项目中，我们会选择以下这些颜色：

var Colors = {red:0xf25346,white:0xd8d0d1,brown:0x59332e,pink:0xF5986E,brownDark:0x23190f,blue:0x68c3c0};代码结构

虽然 JavaScript 代码十分冗长，但是它的结构很简单。我们需要创建所有主要的函数并放入初始函数中：

window.addEventListener(‘load‘, init, false);function init() {// 创建场景，相机和渲染器createScene();// 添加光源createLights();// 添加对象createPlane();createSea();createSky();// 调用循环函数，在每帧更新对象的位置和渲染场景loop();}创建场景

创建一个 Three.js 的项目，我们至少需要以下这些：

场景： 把这看作一个舞台，将需要呈现的对象都添加进去；相机： 在这情况下，我们将使用透视相机，但它也可能是正投影相机；渲染器： 使用 WebGL 渲染器显示所有的场景；渲染一个或多个对象： 在我们的例子中，我们会创建飞机，大海，天空（一些云）；光源： 有不同类型可用的光源。在我们的项目中，我们主要用到营造氛围的半球光和制造阴影的方向光。

在 createScene 函数中创建场景，相机以及渲染器。

有了这三样东西，才能使用相机将对象渲染到页面中。

var scene, camera, fieldOfView, aspectRatio, nearPlane,farPlane, HEIGHT, WIDTH, renderer, container;function createScene() {// 获得屏幕的宽和高，// 用它们设置相机的纵横比// 还有渲染器的大小HEIGHT = window.innerHeight;WIDTH = window.innerWidth;// 创建场景scene = new THREE.Scene();// 在场景中添加雾的效果；样式上使用和背景一样的颜色scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);// 创建相机aspectRatio = WIDTH / HEIGHT;fieldOfView = 60;nearPlane = 1;farPlane = 10000;/** * PerspectiveCamera 透视相机 * @param fieldOfView 视角 * @param aspectRatio 纵横比 * @param nearPlane 近平面 * @param farPlane 远平面 */camera = new THREE.PerspectiveCamera(fieldOfView,aspectRatio,nearPlane,farPlane);// 设置相机的位置camera.position.x = 0;camera.position.z = 200;camera.position.y = 100;// 创建渲染器renderer = new THREE.WebGLRenderer({// 在 css 中设置背景色透明显示渐变色alpha: true,// 开启抗锯齿，但这样会降低性能。// 不过，由于我们的项目基于低多边形的，那还好 :)antialias: true});// 定义渲染器的尺寸；在这里它会填满整个屏幕renderer.setSize(WIDTH, HEIGHT);// 打开渲染器的阴影地图renderer.shadowMap.enabled = true;// 在 HTML 创建的容器中添加渲染器的 DOM 元素container = document.getElementById(‘world‘);container.appendChild(renderer.domElement);// 监听屏幕，缩放屏幕更新相机和渲染器的尺寸window.addEventListener(‘resize‘, handleWindowResize, false);}

由于屏幕的尺寸改变，我们需要更新渲染器的尺寸和相机的纵横比。

function handleWindowResize() {// 更新渲染器的高度和宽度以及相机的纵横比HEIGHT = window.innerHeight;WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT);camera.aspect = WIDTH / HEIGHT;camera.updateProjectionMatrix();}光源

当创建一个场景时，光源是最棘手的一部分。光源可以奠定整个场景的基调，所以要适当地选取。在这部分我们要尽量制造足以让对象可见的光源。

var hemisphereLight, shadowLight;function createLights() {// 半球光就是渐变的光；// 第一个参数是天空的颜色，第二个参数是地上的颜色，第三个参数是光源的强度hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9);// 方向光是从一个特定的方向的照射// 类似太阳，即所有光源是平行的// 第一个参数是关系颜色，第二个参数是光源强度shadowLight = new THREE.DirectionalLight(0xffffff, .9);// 设置光源的方向。// 位置不同，方向光作用于物体的面也不同，看到的颜色也不同shadowLight.position.set(150, 350, 350);// 开启光源投影shadowLight.castShadow = true;// 定义可见域的投射阴影shadowLight.shadow.camera.left = -400;shadowLight.shadow.camera.right = 400;shadowLight.shadow.camera.top = 400;shadowLight.shadow.camera.bottom = -400;shadowLight.shadow.camera.near = 1;shadowLight.shadow.camera.far = 1000;// 定义阴影的分辨率；虽然分辨率越高越好，但是需要付出更加昂贵的代价维持高性能的表现。shadowLight.shadow.mapSize.width = 2048;shadowLight.shadow.mapSize.height = 2048;// 为了使这些光源呈现效果，只需要将它们添加到场景中scene.add(hemisphereLight);scene.add(shadowLight);}

正如你所见，创建光源用到许多参数。不要再犹豫，大胆尝试用不同的颜色，强度的光源。你发现不同的光源在场景中能够营造有趣的氛围和环境。而且你会找到感觉：如何按照你的需求优化它们。

用 Three.js 创建对象

Three.js 中已经有大量的现成几何体如：立方体，球体，圆环面，圆柱体以及飞机原型。

对于我们的项目，所有的对象只需要通过这些几何体组合而成。这非常适合低多边形的风格，而且我们可以不必在 3D 建模软件中创建对象。

用一个圆柱体代表大海

我们开始创建大海模型，因为它是我们实现中最简单的对象。为了简单起见，我们将大海看作一个简单的圆柱体放置在屏幕的底部。之后我们再深入研究如何改善大海的外观。

接着，让我们使大海看起来更具吸引力，海浪更加逼真。

//首先定义一个大海对象Sea = function(){// 创建一个圆柱几何体// 参数为：顶面半径，底面半径，高度，半径分段，高度分段var geom = new THREE.CylinderGeometry(600,600,800,40,10);// 在 x 轴旋转几何体geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));// 创建材质var mat = new THREE.MeshPhongMaterial({color:Colors.blue,transparent:true,opacity:.6,shading:THREE.FlatShading});// 为了在 Three.js 创建一个物体，我们必须创建网格用来组合几何体和一些材质this.mesh = new THREE.Mesh(geom, mat);// 允许大海对象接收阴影this.mesh.receiveShadow = true;}//实例化大海对象，并添加至场景var sea;function createSea(){ sea = new Sea(); // 在场景底部，稍微推挤一下 sea.mesh.position.y = -600; // 添加大海的网格至场景 scene.add(sea.mesh);}

总结一下创建对象，需要什么东西。

我们需要：

创建几何体创建材质将它们传入网格将网格添加至场景

通过这些步骤，我们可以创建许多不同种类的几何体。现在，如果我们把它们组合起来，就可以创建更多复杂的形状。

在以下步骤中，我们将精确地学习如何创建复杂的形状。

把简单的正方体组合成复杂的形状

云的制作会有一点点复杂，因为他们是由若干个正方体组合而成的一个随机形状。

Cloud = function(){ // 创建一个空的容器放置不同形状的云 this.mesh = new THREE.Object3D(); // 创建一个正方体 // 这个形状会被复制创建云 var geom = new THREE.BoxGeometry(20,20,20); // 创建材质；一个简单的白色材质就可以达到效果 var mat = new THREE.MeshPhongMaterial({color:Colors.white, }); // 随机多次复制几何体 var nBlocs = 3+Math.floor(Math.random()*3); for (var i=0; i