Three.js 入门指南 使用手册基础教程第一章
Three.js 入门指南
前言
本书介绍了,Three.js相关知识,是一个比较基础，作者非出版！
此JavaScript框架作为前端开发，为计算机科学做出贡献。
欢迎读者给本书提出宝贵意见，也欢迎交流网页前端设计的其他话题。
献给所有将创造令人心动的应用的程序员
在 Intel 公司实习阶段，我制作了一个基于 Web Audio 的库 jWebAudio，为了演示这个库的
三维音效效果，我决定自学 Three.js。由于之前有计算机图形学等课程的基础，而且
Three.js 中的很多概念是十分容易理解的，最终我在三天内快速地完成了三维打砖块游戏Arcalands。用 Three.js 创建三维图形应用的高效性让我有些吃惊。后来，我又在多个项目中使用了 Three.js，慢慢加深了对它的了解。
回顾学习 Three.js 的过程，我发现虽然目前网上使用 Three.js 的实例很多，但真正系统介绍该库的教程很少，官方文档又不齐全。对于入门者而言，仅仅看着别人的例子和 API 有时候还不足以“入门”。而我自己是通过很多个项目的实践，才慢慢对 Three.js 有了比较全面的了解。因此，我希望通过这本书给想学习 Three.js 的读者提供一个比较系统的入门介
绍。
本书特色
本书是目前市场上唯一一本介绍 Three.js 技术的书，旨在通过系统化的介绍，让初学者能够着手使用 Three.js，在网页上创建炫酷的三维图形应用，并学会持续学习进阶知识方法。
本书每个章节都通过具体的例子阐释相关知识点，所有代码都可以在 Github 上找到。
本书读者
我们常说，这是一个信息爆炸的时代。这就意味着，虽然信息的获取变得越来越廉价，但学习新技术的成本却在不断增加。就作者个人而言，每次在学习一个新技术之前都要斟酌再三，因为可学习的内容越来越多，学习的机会成本也就变大了。所以，在阅读本书前， 请你回答以下问题，如果您有一个回答“是”，那么本书就是为您打造的：
· 我学过 JavaScript，想要快速开发一款三维网页游戏，但我没有什么网页游戏开发经验。
· 我想要使用 WebGL，但是我没学过 OpenGL，对图形渲染也没什么概念。
· 我听说过 Three.js，正好想要学学，苦于没有一个完整的教程。
· 我对 Three.js 比较熟悉，想要更全面地了解它，并学习一些高阶的知识。
· 我是来打酱油的，说不定会看到什么感兴趣的内容。
如果您有一个回答“是”，那么本书现在并不太适合您，或许您可以稍后再来看看：
· 我完全不懂 JavaScript
· 我想要学习 OpenGL、WebGL 这些比较底层的图形接口
· 我赶着加班……哎，需求又改了！
本书结构
本书针对 Three.js 的几个重要话题分章节介绍。
· 第 1 章介绍 Three.js 和 WebGL 的背景资料，并通过简单的例子帮助读者实现第一个
Three.js 应用。
· 第 2 章介绍照相机的设定。
· 第 3、4、5 章分别介绍几何形状、材质和网格，即如何在场景中添加物体。
· 第 6 章介绍如何实现动画效果。
· 第 7 章介绍如何导入外部模型。
· 第 8 章介绍添加光源和阴影效果。
· 第 9 章介绍高阶话题——着色器。
对于了解如何使用 Three.js 创建简单应用的读者可以跳过第 1 章，否则建议首先阅读第 1 章。对于初学者，建议按本书顺序阅读；对于比较有经验的读者，可以选择感兴趣的话题直接阅读。
寻求帮助
1. 代码
在每一章，本书都会用具体的例子来说明，代码可以在
https://github.com/Ovilia/ThreeExample.js 找到。书中在介绍到相关代码时，也会给出链接。
2. 文档
当你知道应该查什么关键字的时候，查阅文档是最高效的。
Three.js 的官方文档可以在 http://threejs.org/docs 找到，但是由于 Three.js 版本更新很快（在
本书的写作过程中，就经历了版本从 58 到 61 的变化，目前本书代码使用的版本是 59）， 使用的时候一定要注意代码的版本和文档的版本是否一致。有些文档是过时的，和代码是不对应的，而且这份文档也不完整，这时最好参考源代码进一步了解。但即便如此，文档对于我们了解 Three.js 还是能有不少帮助。
3. Google
你碰到的问题很可能别人也碰到过，因此，在提问之前记得 Google！
4. StackOverflow
如果你搜不到类似问题，那么在 StackOverflow 上提问吧！
5. 阅读源码
Three.js 的源码可以在 https://github.com/mrdoob/three.js/tree/master/build 找到。当怀疑文档
和代码不一致时，一个很有效的办法是查阅源码。当然，读源码也不是让你逐行阅读，搜索关键字即可。
当这一切都不奏效时……
前几天，听学长说起在微软面试时的一道题：当你遇到一个没人知道的问题时怎么办？ 面试官给出了一个不错的解答：问你周围的人，碰到这样的情况他怎么办。
有时候，你得不到直接的答案，但可以间接地询问如何获取答案。我想，作为程序员，我们或多或少都会遇到似乎没人能解决的问题，你可能没有意识到，但当你“不去管它，睡一觉醒来突然来了灵感”时，其实这同样是种解决方法。我们会像八仙过海一样解决各种各样
看似不可能的问题，那么，下次你觉得山重水复疑无路时，记得问问你的朋友是如何寻求帮助的。
致谢
本书的顺利完成离不开很多人的帮助和关心，首先要感谢的就是我的导师肖双九博士。除了教会我对本书有直接影响的计算机图形学课程，肖老师还教会我很多受益终身的学术知识和人生哲学，而且在平时生活中也对我非常关心照顾。
Three.js 技术是我在 Intel 实习阶段学习的，因此不得不提 Intel 大学合作经理颜历女士一路以来对我的关心。她有些像我的精神导师，在我困惑迷茫的时候，给了我很多中肯的建
议。即使在我离开 Intel 后，我们也保持着联系，她也一直给予我关心和肯定，让我对自己选择的未来更有信心。
我还要特别感谢 5 位为本书作审核的同学，其中三位同学有丰富的 Three.js 开发经验，另外两名从初学者的角度为本书提出了建议。他们分别是：徐雪桥、单震宇、叶家彬；史 鑫、王佳骏。其中，徐雪桥现就读于美国 Carnegie Mellon University，具有丰富的网页开
发经验，擅长使用 JavaScript 制作动画以及数据可视化，曾参与包括 Three.js 在内的多项开源项目。其他几位是我在交大的同学，都是各自擅长领域内的牛人，非常感谢他们能够抽出很多时间参与本书的审核工作。
在此，也要感谢图灵社区提供了这样一个平台，使得本书得以面世。非常感谢图灵编辑董苗苗老师对我的悉心指导，为本书的顺利发布提供了非常重要的帮助。
此外，我最想感谢作为读者的你。这是我第一次写书，因此你对本书的支持将对我是一种莫大的鼓励！
最后，祝大家享受阅读本书的过程，创造出令人心动的应用！
第 1 章 概述
本章将介绍 WebGL 与 Three.js 的背景知识，如何下载、使用 Three.js。阅读完本章后，你将学会使用 Three.js 实现一个最简单的功能。
1.1 WebGL 与 Three.js
本节介绍 WebGL 与 Three.js 的相关概念，并通过两者实现同样功能的代码表现 Three.js 的简洁性。
1.1.1 什么是 WebGL
WebGL 是基于 OpenGL ES 2.0 的 Web 标准，可以通过 HTML5 Canvas 元素作为 DOM 接
口访问。
听起来挺像回事儿的，但是这是什么意思呢？
如果你了解 OpenGL，那么我解释起来就比较轻松了。WebGL 可以看做是将 OpenGL ES
（OpenGL for Embedded Systems，OpenGL 嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）移植到了网页平台，像 Chrome、Firefox 这些现代浏览器都实现了 WebGL 标准，使用 JavaScript 就可以用你熟悉的、类似 OpenGL 的代码编写了。
如果你不了解 OpenGL，那也没关系，因为正如 Three.js 不需要你了解 OpenGL 或 WebGL 一样，本书也不需要你预先知道这些知识。你可以把 WebGL 简单地认为是一种网络标准，定义了一些较底层的图形接口，至于究竟多底层，稍后我们和 Three.js 代码对比来看。本书不会过多涉及 WebGL 的相关知识，如果读者想学习的话，市场上有不少相关书籍可供参考。
现在，我们知道了 WebGL 是一个底层的标准，在这些标准被定义之后，Chrome、Firefox 之类的浏览器实现了这些标准。然后，程序员就能通过 JavaScript 代码，在网页上实现三维图形的渲染了。如果这对你来说还是太抽象，别着急，稍后我们会用具体的例子来说 明。
1.1.2 什么是 Three.js
Three.js 是一个 3D JavaScript 库。
如此简介的描述背后，是作者对其强大功能的自信。那么，Three.js 究竟能用来干什么呢？
Three.js 封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下， 也能用简单的代码实现三维场景的渲染。我们都知道，更高的封装程度往往意味着灵活性
关键字：
