本书通过大量的交互案例和示例代码介绍了Three.js提供的各种API，让读者不需要了解很难编程的WebGL的底层细节及复杂的着色语言，只需大致了解JavaScript及HTML，就能轻松地在浏览器中创建二维和三维应用及图形。本书共12章，涉及以下内容：使用Three.js创建三维场景，构建场景的基本组件，Three.js中的光源、材质、几何体以及粒子、精灵和点云，创建和加载网格、几何体，创建动画和移动摄像机，加载和使用纹理，自定义着色器和后期处理，在场景中添加物理效果和声音等。
本书通过大量的示例和代码，以丰富的互动的方式向读者展示Three.js的各种功能。
全书共12章：第1章讲述使用Three.js库的基本步骤；第2章讲解Three.js库使用过程中所需要理解的各种基础组件，包括灯光、网格、几何体、材质和相机等；第3章通过具体示例讲解场景中使用的各种灯光；第4章讨论Three.js库中可以用于网格的各种材质，并通过互动示例让你来试用这些材质；第5章讲解Three.js中几何体的创建和设置；第6章展示如何设置、使用Three.js库中的高级几何体，例如凸面体和扫描体；第7章讲解如何使用Three.js库中的粒子系统；第8章展示如何从外部导入网格和几何体；第9章探索各种动画效果，使场景活动起来；第10章深入讲解材质的细节，包括如何控制材质，以及如何将HTML5视频的输出和HTML5画布中的元素作为纹理；第11章探索如何使用Three.js库来对已经渲染过的场景进行后期处理；第12章讲解如何在Three.js的场景中添加物理效果。
作者简介
Jos Dirksen 资深软件工程师和架构师，现为荷兰一家大型金融机构的咨询顾问，在后台技术（如Java和Scala）和前端开发（如HTML5、CSS和JavaScript）等技术领域有丰富的从业经验。除了对前端的JavaScript和HTML5等技术充满兴趣，Jos也喜欢研究使用REST和传统的网络服务技术开发后台服务。
现代浏览器都支持WebGL，这样不必使用Flash、Java等插件就能在浏览器中创建三维图形。然而，直接使用WebGL在浏览器中创建三维图形和动画也非常繁琐，它所提供的各种接口尽管非常丰富且强大，但对于用户来说未免过于复杂了。
Three.js的出现则完美地帮助人们解决了这个矛盾。Three.js将WebGL的强大功能融汇其中，同时又非常易于使用，即便用户对其中的原理不甚了解，也能借助Three.js创建出绚丽多姿的三维场景和动画。
本书先从基本概念和Three.js的基本模块讲起，然后伴随着大量的示例和代码，逐步扩展到更多的主题，循序渐进地讲解Three.js的各种功能，帮助你充分利用WebGL和现代浏览器的潜能，直接在浏览器中创建动态的华丽场景。
通过阅读本书，你将学会：
?使用Three.js提供的不同几何体
?在创建的三维对象上应用光线和阴影
?通过Three.js提供的各种摄像机控制功能，在三维场景中轻松导航
?在材质上应用高级纹理（凹凸贴图、法向贴图、高光贴图和光照贴图），创建逼真的三维图形
?导入OBJ、STL、Collada等外部格式的模型和创建动画效果
?创建和运行基于形态和框架的动画
?使用Physijs这个JavaScript库，实现三维物体的物理效果
?创建自定义顶点和片段着色器，实现与WebGL的直接交互
在最近的几年中，浏览器的功能变得愈发强大，并且成为展现复杂的应用和图形的平台。然而其中的大部分都是标准的二维图形。大多数现代浏览器已经支持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提供的更高级的几何体，如凸面体和Lathe。在本章，你还能学到如何从二维形状拉伸出三维几何体，并且学会通过二元操作来组合几何体，从而创建出一个新的几何体。
第7章介绍从头开始或者通过现有的几何体来创建一个粒子系统。这一章还介绍了如何使用精灵或点云材质来改变单个点的外观。
第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场景中添加声音。
本书的使用要求
使用本书只需一个能够“玩转”你的例子的文本编辑器（如Sublime）和能够显示这些例子的现代浏览器。有些例子会需要一个本地的网络服务器，你可以在本书第1章中学会如何搭建一个轻量级的网络服务器以使用书中的例子。
面向的读者
这本书对于每一个知道JavaScript并且想要在浏览器中创建运行的三维图形的人来说都是很棒的。你不需要知道任何高级的数学知识或WebGL，所需的只是对JavaScript和HTML有大致的了解。书中所需要的材料和示例都可以免费下载，所用的工具都是开源的。所以，如果你想创建可以在任何现代浏览器中运行的交互的三维图形，这本书就适合你。
读者反馈
我们一直欢迎读者的反馈。读者反馈让我们知道你对这本书的想法—你是否喜欢。读者反馈对我们非常重要，因为它能帮助我们开发读者真正想要的主题。
你可以简单地发一封邮件到feedback@packtpub.com，在邮件标题中标明本书的标题。
如果你在某个主题方面十分专业并且有兴趣写书，可以在www.packtpub.com/authors查看我们的作者指南。
客户支持
现在你已经拥有一本Packet书了，我们有很多东西可以帮助你，希望你能从这次购买中得到最大的价值。
下载源码
你可以访问http://www.packtpub.com并通过你的账号下载所购买的Packt图书的所有示例源码。如果你是在别的地方购买的图书，也可以访问http://www.packtpub.com/support并注册，我们会直接将示例代码通过电子邮件发送给你。
下载本书的彩图
我们同样提供了一个PDF文件，其中保存了书中用到的所有截图或图表的彩色图片。这些彩图会帮助你更好地理解输出结果的变化。你可以访问https://www.packtpub. com/sites/default/files/downloads/2215OS_Graphics.pdf 下载这个文件。
勘误表
尽管我们已经尽量保证内容的准确性，但错误总是难免的。如果你在本书中找到了错误，无论是文字错误或代码错误，请告诉我们，我们将非常感激。你的帮助，不仅可以让其他读者避免遇到同样的错误，还有助于我们在本书的后续版本中提供更高质量的信息。如果你发现了任何一处错误，请通过访问http://www.packtpub.com/submit-errata来提交：选择书名，点击Errata Submission Form链接，输入你提交的勘误的详情。一旦你的勘误验证通过，你的提交将被接受，勘误会上传到我们的网站或添加到任何与这个勘误相关的勘误表中。
如果你想查阅之前提交的勘误表，请访问https://www.packtpub.com/books/content/support，在搜索框中输入书名，相关信息会显示在“勘误表”部分。
关于盗版
互联网上版权材料的盗版是所有媒体一直面临的问题。在Packet，我们对版本和许可证的保护十分重视。如果你在互联网上看到了任何形式的任何一份我们作品的非法版本，请立即向我们提供地址或网站名称，以便我们采取补救措施。
请通过copyright@packetpub.com联系我们，附上嫌疑盗版作品的链接。
你能帮助我们的作者维护知识产权，我们深表感谢。
问题
如果对本书有任何问题，可以通过question@packtpub.com与我们联系，我们会尽最大的努力来解决。
计算机\Web开发
现代浏览器都支持WebGL，这样不必使用Flash、Java等插件就能在浏览器中创建三维图形。然而，直接使用WebGL在浏览器中创建三维图形和动画也非常繁琐，它所提供的各种接口尽管非常丰富且强大，但对于用户来说未免过于复杂了。
Three.js的出现则完美地帮助人们解决了这个矛盾。Three.js将WebGL的强大功能融汇其中，同时又非常易于使用，即便用户对其中的原理不甚了解，也能借助Three.js创建出绚丽多姿的三维场景和动画。
本书先从基本概念和Three.js的基本模块讲起，然后伴随着大量的示例和代码，逐步扩展到更多的主题，循序渐进地讲解Three.js的各种功能，帮助你充分利用WebGL和现代浏览器的潜能，直接在浏览器中创建动态的华丽场景。
通过阅读本书，你将学会：
?使用Three.js提供的不同几何体
?在创建的三维对象上应用光线和阴影
?通过Three.js提供的各种摄像机控制功能，在三维场景中轻松导航
?在材质上应用高级纹理（凹凸贴图、法向贴图、高光贴图和光照贴图），创建逼真的三维图形
?导入OBJ、STL、Collada等外部格式的模型和创建动画效果
?创建和运行基于形态和框架的动画
?使用Physijs这个JavaScript库，实现三维物体的物理效果
?创建自定义顶点和片段着色器，实现与WebGL的直接交互
[美]乔斯?德克森（ Jos Dirksen） 著：暂无相关简介
杨芬 赵汝达 译：暂无简介
前言
第1章 使用Three. js创建你的第一个三维场景1
1.1 准备工作4
1.2 获取源码5
1.2.1 通过Git获取代码仓库5
1.2.2 下载并解压缩档案文件5
1.2.3 测试示例6
1.3 搭建HTML框架9
1.4 渲染并查看三维对象10
1.5 添加材质、光源和阴影效果14
1.6 让你的场景动起来16
1.6.1 引入requestAnimationFrame()方法16
1.6.2 旋转立方体17
1.6.3 弹跳球18
1.7 使用dat.GUI简化试验流程19
1.8 场景对浏览器的自适应21
1.9 总结22
第2章 构建Three.js场景的基本组件23
2.1 创建场景23
2.1.1 场景的基本功能24
2.1.2 给场景添加雾化效果29
2.1.3 使用overrideMaterial属性30
2.2 几何体和网格31
2.2.1 几何体的属性和方法31
2.2.2 网格对象的属性和方法36
2.3 选择合适的摄像机40
2.3.1 正交投影摄像机和透视投影摄像机40
2.3.2 将摄像机聚焦在指定点上44
2.4 总结45
第3章 学习使用Three.js中的光源46
3.1 Three.js中不同种类的光源46
3.2 基础光源47
3.2.1 THREE.AmbientLight47
3.2.2 THREE.PointLight51
3.2.3 THREE.SpotLight54
3.2.4 THREE.DirectionalLight58
3.3 特殊光源60
3.3.1 THREE.HemisphereLight60
3.3.2 THREE.AreaLight61
3.3.3 镜头光晕64
3.4 总结66
第4章 使用Three.js的材质67
4.1 理解材质的共有属性68
4.1.1 基础属性68
4.1.2 融合属性69
4.1.3 高级属性70
4.2 从简单的网格材质开始70
4.2.1 THREE.MeshBasicMaterial71
4.2.2 THREE.MeshDepthMaterial73
4.2.3 联合材质75
4.2.4 THREE.MeshNormalMaterial76
4.2.5 THREE.MeshFaceMaterial78
4.3 高级材质81
4.3.1 THREE.MeshLambertMaterial81
4.3.2 THREE.MeshPhongMaterial82
4.3.3 用THREE.ShaderMaterial创建自己的着色器83
4.4 线性几何体的材质89
4.4.1 THREE.LineBasicMaterial89
4.4.2 THREE.LineDashedMaterial91
4.5 总结92
第5章 学习使用几何体93
5.1 THREE.js提供的基础几何体94
5.1.1 二维几何体94
5.1.2 三维几何体102
5.2 总结112
第6章 高级几何体和二元操作113
6.1 THREE.ConvexGeometry113
6.2 THREE.LatheGeometry115
6.3 通过拉伸创建几何体116
6.3.1 THREE.ExtrudeGeometry117
6.3.2 THREE.TubeGeometry119
6.3.3 从SVG拉伸120
6.3.4 THREE.ParametricGeometry122
6.4 创建三维文本124
6.4.1 渲染文本124
6.4.2 添加自定义字体126
6.5 使用二元操作组合网格127
6.5.1 subtract函数129
6.5.2 intersect函数132
6.5.3 union函数133
6.6 总结134
第7章 粒子、精灵和点云135
7.1 理解粒子135
7.2 粒子、THREE.PointCloud和THREE.PointCloudMaterial138
7.3 使用HTML5画布样式化粒子140
7.3.1 在THREE.CanvasRenderer中使用HTML5画布140
7.3.2 在WebGLRenderer中使用HTML5画布142
7.4 使用纹理样式化粒子144
7.5 使用精灵贴图149
7.6 从高级几何体创建THREE.Point Cloud153
7.7 总结155
第8章 创建、加载高级网格和几何体156
8.1 几何体组合与合并156
8.1.1 对象组合156
8.1.2 将多个网格合并成一个网格158
8.1.3 从外部资源中加载几何体160
8.1.4 以Three.js的JSON格式保存和加载161
8.1.5 使用Blender165
8.1.6 导入三维格式文件169
8.2 总结179
第9章 创建动画和移动摄像机180
9.1 基础动画180
9.1.1 简单动画181
9.1.2 选择对象182
9.1.3 使用Tween.js实现动画184
9.2 使用摄像机186
9.2.1 轨迹球控制器187
9.2.2 飞行控制器189
9.2.3 翻滚控制器190
9.2.4 第一视角控制器191
9.2.5 轨道控制器192
9.3 变形动画和骨骼动画193
9.3.1 用变形目标创建动画195
9.3.2 用骨骼和蒙皮创建动画198
9.4 使用外部模型创建动画200
9.4.1 使用Blender创建骨骼动画201
9.4.2 从Collada模型加载动画203
9.4.3 从雷神之锤模型中加载动画204
9.5 总结205
第10章 加载和使用纹理206
10.1 将纹理应用于材质206
10.1.1 加载纹理并应用到网格206
10.1.2 使用凹凸贴图创建褶皱210
10.1.3 使用法向贴图创建更加细致的凹凸和褶皱211
10.1.4 使用光照贴图创建阴影效果212
10.1.5 使用环境贴图创建反光效果214
10.1.6 高光贴图218
10.2 纹理的高级用途220
10.2.1 自定义UV映射220
10.2.2 重复纹理222
10.2.3 在画布上绘制图案并作为纹理224
10.2.4 将视频输出作为纹理227
10.3 总结229
第11章 自定义着色器和后期处理230
11.1 配置Three.js以进行后期处理230
11.2 后期处理通道233
11.2.1 简单后期处理通道233
11.2.2 使用掩码的高级效果组合器239
11.2.3 使用THREE.ShaderPass自定义效果242
11.3 创建自定义后期处理着色器248
11.3.1 自定义灰度图着色器248
11.3.2 自定义位着色器251
11.4 总结253
第12章 在场景中添加物理效果和声音254
12.1 创建基本的Three.js场景254
12.2 材质属性259
12.3 基础图形260
12.4 使用约束限制对象的移动265
12.4.1 使用PointConstraint限制对象在两点间移动266
12.4.2 使用HingeConstraint创建类似门的约束267
12.4.3 使用SliderConstraint将移动限制在一个轴上269
12.4.4 使用ConeTwistConstraint创建类似球销的约束270
12.4.5 使用DOFConstraint实现细节的控制272
12.4.6 在场景中添加声源276
12.5 总结277
