作者：（美）乔斯·德克森（Jos Dirksen）
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Three.js开发指南：基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)试读：
前言
在最近的几年中，浏览器的功能变得愈发强大，并且成为展现复杂的应用和图形的平台。然而其中大部分都是标准的二维图形。大多数现代浏览器已经支持WebGL，不仅可以在浏览器端创建二维应用和图形，而且可以通过GPU的功能创建好看并且运行良好的三维应用。
然而，直接使用WebGL编程还是很复杂的。编程者需要知道WebGL的底层细节，并且学习复杂的着色语言来获得WebGL的大部分功能。Three.js提供了一个很简单的关于WebGL特性的JavaScript API，所以用户不需要详细地学习WebGL，就能创作出好看的三维图形。
Three.js为直接在浏览器中创建三维场景提供了大量的特性和API。阅读这本书，读者将通过许多交互示例和示例代码学习Three.js提供的各种API。
本书内容
第1章介绍使用Three.js的基本步骤。阅读完本章就能立刻创建你的第一个Three.js场景，也能直接在浏览器中创建你的第一个三维场景并让它动起来。
第2章解释使用Three.js时需要了解的基本组件。将介绍灯光、网格、几何形状、材质和摄像机。阅读本章，读者也将对Three.js提供的不同灯光和在场景中使用的摄像机有一个大概的印象。
第3章深入介绍可以在场景中使用的不同灯光。本章会通过示例讲解如何使用聚光灯、平行光、环境光、点光源、半球光和区域光。此外，本章还会展示如何使用镜头光晕来影响光源。
第4章讲述Three.js中可在网格中使用的材质。本章展示可以设置的所有属性，并且提供不同的交互示例来阐述Three.js中可用的材质。
第5章讲述Three.js中的几何体。本章将介绍如何在Three.js中创建和配置几何体，并且提供了几何体的交互示例，包括平面、圆形、任意图形、长方体、球体、圆柱体、圆环、环状扭结和多面体。
第6章接着第5章讲解如何使用几何体。本章介绍如何配置和使用Three.js提供的更高级的几何体，如凸面体和旋转体。在本章，你还能学到如何从二维形状拉伸出三维几何体，并且学会通过二元操作来组合几何体，从而创建出一个新的几何体。
第7章解释如何使用Three.js中的精灵和粒子，介绍从头开始或者通过现有的几何体来创建一个粒子系统。这一章还介绍如何使用精灵或点云材质来改变单个点的外观。
第8章介绍如何通过外部资源导入网格和几何体，以及如何使用Three.js内置的JSON格式来保存几何体和场景。本章还会解释如何加载不同格式的模型，如OBJ、DAE、STL、CTM、PLY等。
第9章展示可以让场景动起来的各种动画，包括如何组合使用Tween.js库和Three.js，以及如何使用基于变形和骨骼的动画模型。
第10章延续第4章的内容——使用Three.js材质。在第4章已经初步介绍了材质，本章着重介绍现有的各种材质以及如何把材质应用到网格中。另外，本章还介绍如何直接使用HTML5中的视频元素和画布元素作为材质来源。
第11章展示如何使用Three.js对已经渲染过的场景进行后期处理。通过后期处理，你可以将模糊、倾斜移位和着色等效果添加到已经渲染过的场景中。除此之外，本章还介绍如何创建自己的后期处理效果、自定义的顶点和片段着色器。
第12章解释如何将物理效果添加到Three.js场景中。通过物理效果，你能检测物体之间的碰撞，使物体对重力有响应，以及应用摩擦力。本章会展示如何用Physijs JavaScript库实现这些效果。此外，本章还会展示如何在Three.js场景中添加声音。
本书的使用要求
使用本书只需稍微了解JavaScript，并按照第1章的指导搭建一个本地的网络服务器和获取书中使用的示例。
面向的读者
这本书对于每一个知道JavaScript并且想要在浏览器中创建运行的三维图形的人来说都是很棒的。你不需要知道任何高级的数学知识或WebGL，所需的只是对JavaScript和HTML有大致的了解。书中所需要的材料和示例都可以免费下载，所用的工具都是开源的。所以，如果你想创建可以在任何现代浏览器中运行的交互的三维图形，这本书就适合你。
下载示例代码及彩图
本书的示例代码及彩图，可从http://www.packtpub.com通过个人账号下载，也可以访问华章公司官网http://www.hzbook.com，通过注册并登录个人账号下载。第1章 使用Three.js创建你的第一个三维场景
现代浏览器直接通过JavaScript就可以实现非常强大的功能。使用HTML5的标签可以很容易地添加语音和视频，而且在HTML5提供的画布上可以添加具有交互功能的组件。现在，现代浏览器也开始支持WebGL。通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形，但是直接使用WebGL编程来从JavaScript创建三维动画场景十分复杂而且还容易出问题。使用Three.js库可以简化这个过程。Three.js带来的好处有以下几点：
·创建简单和复杂的三维几何图形。
·创建虚拟现实（VR）和增强现实（AR）场景。
·在三维场景下创建动画和移动物体。
·为物体添加纹理和材质。
·使用各种光源来装饰场景。
·加载三维模型软件所创建的物体。
·为三维场景添加高级的后期处理效果。
·使用自定义的着色器。
·创建点云（即粒子系统）。
通过几行简单的JavaScript代码，你可以创建从简单三维模型到类似图1.1（在浏览器中访问http://www.vill.ee/eye）所示的具有真实感的场景。
本章将会通过示例来阐述Three.js的工作原理，但是不会对其中的技术细节进行深入探究，这些细节我们将会在后面的章节中介绍。本章主要涵盖以下几方面：
·使用Three.js所需的工具。
·下载本书所需的源码和示例。
·创建第一个Three.js场景。
·使用材质、光源和动画来完善第一个场景。
·引入辅助库以统计和控制场景。图 1.1
首先将会对Three.js进行简单的介绍，然后再讲解第一个示例及其代码。在开始之前我们先来看下当前主流浏览器对WebGL的支持情况，几乎所有浏览器的桌面版和移动版均支持WebGL，唯一的例外是移动版迷你Opera浏览器（Opera Mini），因为这个浏览器有一种特殊的工作模式，可以在Opera服务器端进行页面渲染，而Opera服务器往往禁止运行JavaScript。不过从8.0版开始，Opera Mini的默认工作模式已改为使用iOS Safari引擎渲染页面，从而也可以很好地支持JavaScript和WebGL。但是新版Opera Mini仍然可以被设置为不支持JavaScript的“迷你模式”（mini mode）。
除了IE的一些低版本浏览器，基本所有的现代浏览器都支持Three.js。如果想在低版本的IE浏览器上运行Three.js，你还需要做额外的操作。对于IE10和更低的版本，你可以安装iewebgl插件，下载地址为https://github.com/iewebgl/iewebgl。
使用WebGL能够创建出具有交互性的3D模型，而且这些模型在电脑和手机设备上都能够很好地运行。本书主要使用Three.js提供的基于WebGL的渲染器。但是Three.js也提供了基于CSS 3D的渲染器，使用其API能够很容易地创建出三维场景，而且这个渲染器的优点在于几乎所有手机和电脑上的浏览器都支持CSS 3D，并且可以在三维空间内渲染HTML元素。第7章会进一步介绍如何使用CSS 3D。
通过本章的学习，你可以直接创建第一个三维场景，而且这个场景可以在上述的所有浏览器中运行。目前我们不会介绍太多Three.js的复杂特性，但是在本章结束的时候你能够创建出如图1.2所示的场景。图 1.2
通过创建这个场景，你可以学到Three.js的基础知识，并可以创建第一个动画。在开始实现这个示例之前，我们会先介绍几个工具，这些工具可以帮助你更方便地使用Three.js。我们还会介绍如何下载本书所用到的示例。1.1 准备工作
Three.js是一个JavaScript库，所以你只需要一个文本编辑器和支持Three.js的浏览器就可以使用Three.js来创建WebGL应用。这里推荐如下几款JavaScript文本编辑器：
·Visual Studio Code：Visual Studio Code是微软公司面向所有常见操作系统推出的一款免费编辑器。该编辑器能够基于源程序里的类型和函数声明以及导入库，提供效果良好的语法高亮和代码补全功能。同时它还具有简洁明了的用户界面，以及对JavaScript的完美支持。下载地址为https://code.visualstudio.com/。
·WebStorm：WebStorm是JetBrains公司旗下的一款JavaScript编辑工具。它支持代码补全、自动部署和代码调试功能。除此之外，WebStorm还支持GitHub和其他各种版本控制器。读者可从http://www.jetbrains.com/webstorm/下载一个试用版本。
·Notepad++：Notepad++是Windows操作系统下的通用文本编辑器，它支持各种编程语言语法高亮度显示，而且可以很容易地对JavaScript进行布局和格式化。Notepad++的下载地址为http://notepad-plus-plus.org/。
·Sublime Text：Sublime Text是一款对JavaScript支持非常好的文本编辑器。除此之外，Sublime Text的一大亮点是支持多重选择——同时选择多个区域，然后同时进行编辑。这些功能提供了一个很好的JavaScript编程环境。Sublime Text是一个收费闭源软件，下载地址为http://www.sublimetext.com/。
除此之外，还有很多可以编写JavaScript进而创建Three.js应用的开源和商用编辑器。还有一款基于云的代码编辑平台Cloud9，网址是http://c9.io，该平台可以连接GitHub账号，由此可以直接获取本书相关的代码和示例。除了使用这些文本编辑器来运行本书相关的代码和示例，Three.js自身也提供了在线场景编辑器，访问地址为http://threejs.org/editor。使用该编辑器，可以用图形化方法创建Three.js场景。
虽然现代浏览器基本都支持WebGL并能运行Three.js应用，但是本书所采用的是Chrome浏览器。因为Chrome是对WebGL支持最好的浏览器，并且拥有强大的JavaScript代码调试功能。如图1.3所示，使用调试器的断点和控制台功能可以快速地定位问题。在本书中，还会进一步介绍各种调试的方法和技巧。图 1.3
Three.js就介绍到此，下面就开始获取源码并创建我们的第一个场景。1.2 获取源码
本书所有的源码都可以从GitHub（https://github.com/）获取。GitHub是基于Git的在线代码仓库，你可以使用它来存储、访问源码和进行版本控制。获取GitHub上源码的方式有以下两种：
·通过Git获取代码仓库
·下载并解压缩档案文件
接下来会详细讲解这两种方式。1.2.1 通过Git获取代码仓库
Git是开源、分布式的版本控制系统，本书的示例都是基于Git进行创建和版本管理的，GitHub仓库的访问地址为https://github.com/josdirksen/learning-threejs。
如果你已经在操作系统中安装了Git的客户端，那么就可以使用git命令来克隆示例的代码仓库。如果你还没有安装，可以访问http://git-scm.com下载，或者使用GitHub公司自己为Mac或Windows系统提供的客户端。在安装完Git客户端后，打开控制台并在你想要存储代码的目录中运行如下的命令：
如图1.4所示，代码就开始下载了。图 1.4
下载完毕后，在learning-threejs-third文件夹中会看到本书所用的所有的示例。1.2.2 下载并解压缩档案文件
如果你不想使用Git的方式从GitHub上获取源码，那么还可以在GitHub上下载档案文件。在浏览器上访问https://github.com/josdirksen/learning-threejs-third，点击右侧的Clone or download按钮。如图1.5所示。
解压文件到指定的目录，这样就可以获取所有的示例了。图 1.51.2.3 测试示例
现在你已经下载或者克隆了示例源码，下面我们就来测试示例是否能够正常工作，进而了解工程的目录结构。本书的示例是按照章节进行组织的。如果要运行本书的示例，你可以使用浏览器打开HTML文件，或者安装本地Web服务器。第一种方法对于简单的示例是可行的，但是如果示例中需要下载外部资源时，比如模型或者纹理图像，那么仅仅使用浏览器打开HTML文件是行不通的。这个时候，我们就需要本地Web服务器来确保外部资源正确加载。接下来我们会介绍几种安装本地服务器的方式，如果你无法安装本地服务器但使用Chrome或Firefox浏览器，那么我们也会介绍如何禁用安全性检测来运行示例。
接下来，我们将会介绍几种安装本地服务器的方式，依据系统的配置，你可以选择最合适的方式。1.适用于Unix/Mac系统的基于Python的Web服务器
大部分的Unix/Linux/Mac系统默认安装了Python，在示例源码目录中运行如下的命令就可以将本地Web服务器启动起来了。
在你下载了源码的目录中执行上述命令。2.基于NPM的Web服务器
如果你已经在使用Node.js了，那么你肯定已经安装了NPM。使用NPM，有两个方式可以快速地搭建本地Web服务器：第一种方式是使用http-server模块，如下所示：
第二种方式是使用simple-http-server，如下所示：
第二种方式的缺点在于无法自动地显示目录列表，而第一种方式是可以的。3.Mac/Windows上的轻量级服务器——Mongoose
如果你还没有安装Python或者NPM，那么还有一个简单、轻量级的Web服务器——Mongoose。首先，从https://code.google.com/p/mongoose/downloads/list下载你的系统所支持的二进制安装文件。如果你使用的是Windows系统，那么将下载好的二进制文件复制到示例所在的目录，双击即可启动一个运行于该目录下的Web服务器。
对于其他的操作系统，则须将下载的二进制文件复制到指定的目录中，但是启动的方式不是双击，而是通过命令行的方式，如图1.6所示。图 1.6
在这两种情况下都会在8080端口启动一个本地Web服务器。本书的示例目录如图1.7所示。图 1.7
点击各章节的目录就可以获取相应章节的示例。在本书讲解提到某个示例时会指出示例的名称和所在的文件夹，这样你就可以找到该示例的源代码以便测试运行或自行研究。4.禁用Firefox和Chrome的安全性检测
如果你使用的是Chrome浏览器，有种方式可以禁用安全性设置，这样就可以在没有Web服务器的情况下查看示例。需要注意的是，应尽量避免用下面的方法访问真正的网站，因为这样做会使浏览器向各种恶意代码敞开大门。用下面的命令可以启动Chrome浏览器同时禁用所有安全特性。
·对于Windows操作系统：
·对于Linux操作系统：
·对于Mac OS操作系统：
通过这种方式启动Chrome浏览器就可以直接运行本地文件系统中的示例。
对于Firefox浏览器来说，还需要其他的配置。打开Firefox浏览器并在地址栏内输入about：config会看到图1.8所示的页面。图 1.8
在该页面中点击“I’ll be careful，I promise！”按钮，然后就会列出所有用于调整Firefox的属性。在搜索框中输入security.fileuri.strict_origin_policy，并将其值修改为false。如图1.9所示。图 1.9
这时候就可以使用Firefox浏览器直接运行本书的示例了。
到现在为止，你应该已经安装了Web服务器或者禁用了浏览器的安全性设置，那么就开始创建第一个三维场景吧。1.3 搭建HTML框架
首先我们将会创建空的HTML框架，后面的示例将在这个框架的基础上完成。具体如下所示：
你应该已经发现了，这个框架是个仅包含一些基本元素的HTML网页。在
标签中列出了示例所使用的外部JavaScript库，在这里至少要包含Three.js库。此外，这里还包含一个控制器库TrackballControls.js。有了它便可以利用鼠标任意移动摄像机，以便从不同角度观察场景。在标签中最后一个被包含的JavaScript文件是本章的示例程序，文件名为01-01.js。最后，在标签中我们还添加了几行CSS代码，这些CSS代码用于移除Three.js场景网页中的滚动条。在标签中我们只添加了一个在浏览器中打开本章示例代码文件并观察控制台窗口，可以看到如图1.10所示的内容。图 1.10
在
元素中包含Three.js的源代码。Three.js有两个不同的版本：·three.min.js：这个版本的JS库一般应用于网上部署Three.js时。该版本是使用UglifyJS压缩过的，它的大小是普通Three.js版本的四分之一。本书示例所使用的是2018年7月发布的Three.js r95版本。
·three.js：这个是普通的Three.js库。为了便于进行代码调试和理解Three.js的源码，本书的示例使用的都是这个库。
接下来，我们将会创建第一个三维对象并将其渲染到已经定义好的
在这一步，我们将会创建第一个场景并添加几个物体和摄像机。我们的第一个示例将会包含表1.1所列对象。表 1.1
下面将会通过代码示例（带注释的代码在文件chapter-01/is/01-02.js中）来解释如何创建场景并渲染三维对象：
在浏览器中将示例打开，看到的结果和我们的目标，即本章开始时所展示的那张渲染图接近，但效果还有些差距。目前的效果如图1.1所示。图 1.11
接下来将会对代码进行分析，这样我们就可以了解代码是如何工作的：
在代码中，首先定义了场景（scene）、摄像机（camera）和渲染器（renderer）对象。场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有THREE.Scene对象，那么Three.js就无法渲染任何物体，在第2章还会对THREE.Scene进行详细介绍。示例中所要渲染的方块和球体稍后将会添加到场景对象中。
在示例中我们还定义了摄像机对象，摄像机决定了能够在场景看到什么。在第2章，你还会进一步了解摄像机对象能够接受的参数。接下来，我们定义了渲染器对象，该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子。最后WebGLRenderer将会使用电脑显卡来渲染场景。如果你已经看了Three.js的源码和文档（网址为http://threejs.org），你会发现除了基于WebGL的渲染器外，还有其他的渲染器，比如基于HTML canvas的渲染器、基于CSS的渲染器，甚至还有基于SVG的渲染器。尽管它们也能够渲染简单的场景，但是不推荐使用，因为它们已经停止更新、十分耗CPU的资源，而且也缺乏对一些功能的支持，比如材质和阴影。
在示例中，我们调用setClearColor方法将场景的背景颜色设置为接近黑色(new THREE.Color（0X00000000）），并通过setSize方法设置场景的大小。使用window.innerWidth和window.innerHeight可将整个页面窗口指定为渲染区域。
到目前为止，我们已经创建了空白的场景、渲染器和摄像机，但是还没有渲染任何东西。接下来将会在代码中添加轴和平面：
如代码所示，我们创建了坐标轴（axes）对象并设置轴线的粗细值为20，最后调用scene.add方法将轴添加到场景中。接下来要创建平面（plane），平面的创建分为两步来完成。首先，使用THREE.Plane Geometry（60，20）来定义平面的大小，在示例中将宽度设置为60，高度设置为20。除了设置高度和宽度，我们还需要设置平面的外观（比如颜色和透明度），在Three.js中通过创建材质对象来设置平面的外观。在本例中，我们将会创建颜色为0xAAAAAA的基本材质（THREE.MeshBasicMaterial）。然后，将大小和外观组合进Mesh对象并赋值给平面变量。在将平面添加到场景之前，还需要设置平面的位置：先将平面围绕x轴旋转90度，然后使用position属性来定义其在场景中的位置。如果你对Mesh对象感兴趣，那么可以查看第2章中的示例06-mesh-properties.html，该示例详细介绍了旋转和定位。最后，我们将平面添加到场景中。
使用同样的方式将方块和球体添加到平面中，但是需要将线框（wireframe）属性设置为true，这样物体就不会被渲染为实体物体。接下来就是示例的最后一部分：
现在，所有物体都已经添加到场景中的合适位置。在之前我们提到过，摄像机将决定哪些东西会被渲染到场景中。在这段代码中，我们使用x、y、z的位置属性来设置摄像机的位置。为了确保所要渲染的物体能够被摄像机拍摄到，我们使用lookAt方法指向场景的中心，默认状态下摄像机是指向（0，0，0）位置的。最后需要做的就是将渲染的结果添加到HTML框架的
接下来，我们还会使用光照、阴影、材质和动画来美化这个场景。
试读结束[说明：试读内容隐藏了图片]