前言~~
一只纠结型处女座前端渣渣~ 欢迎关注~
由于第一次翻译，如果有错漏之处，还望各位大大指出！leechingyin09@gmail.com
（确实是呕心沥血之作啊_(:з」∠)_
正文从这里开始~~
本文译自：The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js一篇关于探讨使用 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 <header> 标签中引入 Three.js：
<script type="text/javascript" src="js/three.js"></script>
然后在 HTML 中需要添加一个元素作为容器。
<div id="world"></div>
你可以像下面那样写一些简单的样式，让它填满整个 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 渲染器显示所有的场景；
- 渲染一个或多个对象： 在我们的例子中，我们会创建飞机，大海，天空（一些云）；
- 光源： 有不同类型可用的光源。在我们的项目中，我们主要用到营造氛围的半球光和制造阴影的方向光。
译注： 1. Three.js 场景只有一种，THREE.Scene 场景是所有物体的容器； 2. 相机决定了场景中哪个角度的景色会显示出来； 3. 渲染器决定了渲染的结果应该显示在页面的什么元素上，并以怎样的方式绘制。
有了这三样东西，才能使用相机将对象渲染到页面中。
var scene, camera, fieldOfView, aspectRatio, nearPlane,
farPlane, HEIGHT, WIDTH, renderer, container;
function createScene() {
// 获得屏幕的宽和高，
// 用它们设置相机的纵横比
// 还有渲染器的大小
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
<span class="c1">// 创建场景
scene = new THREE.Scene();
<span class="c1">// 在场景中添加雾的效果；样式上使用和背景一样的颜色
scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);
<span class="c1">// 创建相机
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
);
<span class="c1">// 设置相机的位置
camera.position.x = 0;
camera.position.z = 200;
camera.position.y = 100;
<span class="c1">// 创建渲染器
renderer = new THREE.WebGLRenderer({
// 在 css 中设置背景色透明显示渐变色
alpha: true,
// 开启抗锯齿，但这样会降低性能。
// 不过，由于我们的项目基于低多边形的，那还好