作者：(美)乔斯·德克森(Jos Dirksen) 著 叶伟民 译
页数：416
出版社：机械工业出版社
出版日期：2025
ISBN：9787111771333
电子书格式：pdf/epub/txt
网盘下载地址：下载Three.js权威指南 在网页上创建3D图形和动画的方法与实践(原书第4版)
内容简介
Three.js已成为创建令人惊叹的3D WebGL内容的行业标准。在本书中，你将学习Three.js的所有功能，了解如何将其与最新的物理引擎集成。你还将掌握直接在浏览器中创建身临其境的3D场景并制作动画的技巧，充分挖掘WebGL和现代浏览器的潜力。
本书首先介绍Three.js中使用的基本概念和构建模块，通过大量示例和代码帮助你详细探索这些基本主题。你将学习如何使用纹理和材质创建逼真的3D物体，以及如何从外部资源加载现有模型。接下来，你将了解如何使用Three.js内置的相机控件控制相机，这将使你能够在创建的3D场景中飞行或行走。然后将介绍如何使用HTML5视频和画布元素作为三维对象的材质，为模型制作动画。在了解如何为场景添加重力和碰撞检测等物理特性之前，你将学习如何使用变形目标和基于骨骼的动画。最后，你将掌握如何将Blender与Three.js相结合，并创建VR和AR场景。
本书结束时，你将掌握使用Three.js创建三维动画图形的技巧。
通过本书，你将学到：
·使用Three.js提供的不同相机控件来浏览3D场景。
·探索直接使用顶点创建雪、雨和星系效果。
·从glTF、OBJ、STL和COLLADA等外部格式导入模型并制作动画。
·使用变形目标和基于骨骼的动画设计和运行动画。
·使用高级材质纹理创建逼真的3D物体。
·通过创建自定义顶点和片段着色器直接与WebGL交互。
·使用Rapier物理引擎制作场景，并将Three.js与VR和AR集成。
作者简介
Jos Dirksen拥有近20年的软件开发和架构设计经验，涵盖从后端开发（如Java、Kotlin和Scala）到前端开发（使用HTML5、CSS、JavaScript和TypeScript）的多种技术。除了熟练运用这些技术外，Jos还经常在技术会议上发表演讲，并在博客上分享关于新技术和有趣技术的文章。他还喜欢尝试新技术，并探索如何利用它们来创建美观的数据可视化。他目前是一名自由职业的全栈工程师，参与多个Scala和TypeScript项目。Jos曾在私营公司（如ING、ASML、Malmberg和Philips）和国营机构（如美国国防部和阿姆斯特丹港）担任过许多不同的角色。
本书特色
Three.js已成为创建令人惊叹的3D WebGL内容的行业标准。在本书中，你将学习Three.js的所有功能，了解如何将其与最新的物理引擎集成。你还将掌握直接在浏览器中创建身临其境的3D场景并制作动画的技巧，充分挖掘WebGL和现代浏览器的潜力。
目录
Contents 目 录
前言
关于作者
关于审校者
第一部分 搭建开发环境和
运行Three.js
第1章 使用Three.js创建你的
第一个3D场景2
1.1 技术要求5
1.2 测试和实验示例9
1.3 探索Three.js应用程序的
HTML结构11
1.4 渲染和查看3D对象13
1.4.1 设置场景14
1.4.2 添加光源16
1.4.3 添加网格17
1.4.4 添加动画循环19
1.4.5 使用lil-gui来控制属性，
从而使实验更容易23
1.5 辅助工具25
1.6 本章小结26
第2章 Three.js应用程序的基本组件28
2.1 创建场景28
2.2 几何体和网格的关系38
2.2.1 几何体的属性和函数38
2.2.2 网格的函数和属性44
2.3 针对不同的场景使用不同的相机47
2.3.1 正交相机与透视相机48
2.3.2 确定相机需要看向的位置53
2.3.3 调试相机的视角53
2.4 本章小结55
第3章 在Three.js中使用光源56
3.1 Three.js提供了哪些类型的光源57
3.2 如何使用基本光源57
3.2.1 THREE.AmbientLight58
3.2.2 THREE.SpotLight60
3.2.3 THREE.PointLight67
3.2.4 THREE.DirectionalLight70
3.2.5 使用THREE.Color对象72
3.3 特殊光源74
3.3.1 THREE.HemisphereLight74
3.3.2 THREE.RectAreaLight76
3.3.3 THREE.LightProbe77
3.3.4 THREE.LensFlare80
3.4 本章小结83
第二部分 Three.js核心组件
第4章 使用Three.js材质86
4.1 常见的材质属性87
4.1.1 基本属性87
4.1.2 混合属性89
4.1.3 高级属性89
4.2 从简单材质开始90
4.2.1 THREE.MeshBasicMaterial90
4.2.2 THREE.MeshDepthMaterial94
4.2.3 组合材质95
4.2.4 THREE.MeshNormalMaterial95
4.2.5 为单个网格对象指定多个材质98
4.3 高级材质102
4.3.1 THREE.MeshLambertMaterial103
4.3.2 THREE.MeshPhongMaterial104
4.3.3 THREE.MeshToonMaterial106
4.3.4 THREE.MeshStandardMaterial106
4.3.5 THREE.MeshPhysicalMaterial108
4.3.6 THREE.ShadowMaterial109
4.3.7 使用自定义着色器与THREE.
ShaderMaterial109
4.3.8 使用CustomShaderMaterial
自定义现有着色器114
4.4 线形几何体可以使用的材质115
4.4.1 THREE.LineBasicMaterial115
4.4.2 THREE.LineDashedMaterial118
4.5 本章小结119
第5章 基本几何体120
5.1 2D几何体121
5.1.1 THREE.PlaneGeometry121
5.1.2 THREE.CircleGeometry123
5.1.3 THREE.RingGeometry125
5.1.4 THREE.ShapeGeometry126
5.2 3D几何体131
5.2.1 THREE.BoxGeometry131
5.2.2 THREE.SphereGeometry132
5.2.3 THREE.CylinderGeometry134
5.2.4 THREE.ConeGeometry135
5.2.5 THREE.TorusGeometry136
5.2.6 THREE.TorusKnotGeometry137
5.2.7 THREE.PolyhedronGeometry140
5.2.8 THREE.IcosahedronGeometry142
5.2.9 THREE.TetrahedronGeometry142
5.2.10 THREE.OctahedronGeometry142
5.2.11 THREE.Dodecahedron-
Geometry144
5.3 本章小结144
第6章 高级几何体146
6.1 学习高级几何体146
6.1.1 THREE.ConvexGeometry147
6.1.2 THREE.LatheGeometry148
6.1.3 BoxLineGeometry150
6.1.4 THREE.RoundedBox-
Geometry151
6.1.5 TeapotGeometry152
6.2 通过2D形状创建3D几何体153
6.2.1 THREE.ExtrudeGeometry153
6.2.2 THREE.TubeGeometry155
6.2.3 从SVG图像中拉伸3D形状157
6.2.4 THREE.ParametricGeometry160
6.3 用于调试的几何体163
6.3.1 THREE.EdgesGeometry163
6.3.2 THREE.WireFrameGeometry164
6.4 创建一个3D文字网格165
6.4.1 渲染文本165
6.4.2 添加自定义字体167
6.4.3 使用Troika库创建文本168
6.5 本章小结169
第7章 点和精灵170
7.1 理解点和精灵171
7.2 使用纹理样式化粒子175
7.2.1 使用HTML canvas绘制图像175
7.2.2 使用纹理来设置粒子的样式177
7.3 使用精灵贴图183
7.4 从现有几何体创建THREE.Points186
7.5 本章小结187
第三部分 创建复杂的几何体、
动画和纹理
第8章 创建和加载复杂的网格
和几何体190
8.1 几何体分组和合并190
8.1.1 对象分组190
8.1.2 合并几何体194
8.2 从外部资源加载几何体196
8.3 从3D文件格式导入202
8.3.1 OBJ和MTL格式202
8.3.2 加载glTF模型206
8.3.3 展示完整的乐高模型207
8.3.4 加载基于voxel的模型208
8.3.5 从PDB渲染蛋白质211
8.3.6 从PLY模型加载点云214
8.3.7 其他加载器215
8.4 本章小结216
第9章 动画和移动相机217
9.1 基本动画217
9.1.1 简单动画218
9.1.2 选择和移动对象220
9.1.3 使用Tween.js来创建动画224
9.2 通过相机实现动画228
9.2.1 ArcballControls228
9.2.2 TrackBallControls230
9.2.3 FlyControls232
9.2.4 FirstPersonControls233
9.2.5 OrbitControls235
9.3 变形和蒙皮动画236
9.3.1 使用变形目标实现动画236
9.3.2 使用变形目标和混合器
实现动画238
9.3.3 使用蒙皮动画实现动画244
9.4 使用外部模型创建动画247
9.4.1 使用gltfLoader247
9.4.2 使用fbxLoader可视化动作
捕捉模型249
9.4.3 从Quake模型加载动画251
9.4.4 从COLLADA模型加载动画251
9.4.5 使用BVHLoader可视化骨骼253
9.5 本章小结254
第10章 加载和使用纹理255
10.1 在材质中应用纹理255
10.1.1 加载纹理并将其应用于
网格255
10.1.2 使用凹凸贴图来为网格提供
更多的细节259
10.1.3 使用法线贴图实现更细致的
凹凸和皱纹261
10.1.4 使用位移贴图来改变顶点
的位置263
10.1.5 使用环境光遮蔽贴图添加
细致的阴影265
10.1.6 使用光照贴图创建伪光照
效果268
10.1.7 金属贴图和粗糙贴图269
10.1.8 使用透明贴图创建透明
模型271
10.1.9 使用发光贴图使模型发光273
10.1.10 使用高光贴图来确定模型
的闪亮度275
10.1.11 使用环境贴图创建伪反射277
10.1.12 重复包裹282
10.2 使用HTML5 canvas作为纹理
的输入284
10.2.1 使用HTML5 canvas创建
颜色贴图285
10.2.2 使用canvas作为凸凹贴图286
10.2.3 使用视频输出作为纹理288
10.3 本章小结289
第四部分 后期处理、物理模拟
和音频集成
第11章 渲染后期处理292
11.1 设置Three.js以支持后期处理292
11.1.1 创建THREE.EffectCom-
poser293
11.1.2 配置THREE.EffectComposer
以进行后期处理294
11.1.3 更新渲染循环295
11.2 后期处理通道296
11.2.1 简单的后期处理通道297
11.2.2 在同一屏幕上显示多个
渲染器的输出302
11.2.3 其他简单通道303
11.3 高级EffectComposer流之
使用遮罩305
11.3.1 高级通道—散景309
11.3.2 高级通道—环境光遮蔽311
11.4 使用THREE.ShaderPass
自定义效果313
11.4.1 简单着色器314
11.4.2 模糊着色器318
11.5 创建自定义后期处理着色器320
11.5.1 自定义灰度着色器320
11.5.2 创建自定义位着色器324
11.6 本章小结325
第12章 给场景添加物理效果
和音效326
12.1 使用Rapier创建基本Three.js
场景327
12.1.1 设置世界和创建描述328
12.1.2 渲染场景并模拟世界330
12.2 在Rapier中模拟多米诺骨牌331
12.3 设置摩擦力和恢复力335
12.4 Rapier支持的形状338
12.5 使用关节限制对象的移动341
12.5.1 用固定关节连接两个对象341
12.5.2 使用球形关节连接对象342
12.5.3 使用旋转关节来限制两个
对象之间的旋转运动344
12.5.4 使用平移关节来限制一个
对象只能沿一个轴移动346
12.6 将声源添加到场景中348
12.7 本章小结350
第13章 结合使用Blender和
Three.js351
13.1 从Three.js导出场景并将其
导入Blender352
13.2 从Blender导出静态场景并将其
导入Three.js356
13.3 从Blender导出动画并将其
导入Three.js359
13.4 用Blender烘焙光照贴图和
环境光遮蔽贴图365
13.4.1 在Blender中设置场景365
13.4.2 将光照加入场景367
13.4.3 将光照烘焙到纹理中369
13.4.4 导出场景并将其导入
Blender373
13.4.5 用Blender烘焙环境光
遮蔽贴图375
13.5 在Blender中进行自定义
UV建模376
13.6 本章小结380
第14章 结合使用Three.js与React、
TypeScript、Web-XR381
14.1 结合使用Three.js和TypeScript382
14.2 在TypeScript的帮助下集成
Three.js和React385
14.3 在Three.js fibers的帮助下轻松
集成Three.js和React389
14.4 Three.js和VR395
14.5 Three.js和AR400
14.6 本章小结402
前言
Preface 前 言
Three.js在过去几年中已经成为创建令人惊叹的3D WebGL内容的标准方式。在本书中，我们将探讨Three.js的所有特性，并提供额外的内容，包括如何将Three.js与Blender、React、TypeScript以及最新的物理引擎进行集成。
在本书中，你将学习如何在浏览器中直接创建和动画化沉浸式3D场景，充分利用WebGL和现代浏览器的潜力。
本书从Three.js使用的基本概念和模块开始，并通过大量的示例和代码帮助你详细了解这些基本主题。你还将学习如何使用纹理和材质创建逼真的3D对象。除了手动创建这些对象之外，我们还将解释如何从外部文件加载现有模型。接下来，你将了解如何使用Three.js内置的相机控件轻松控制相机，这将使你能够在你创建的3D场景中飞行或行走。然后，后面的章节将向你展示如何将HTML5视频和canvas元素用作3D对象的材质并为你的模型添加动画。你将学习如何使用变形和蒙皮动画，了解如何将物理效果（如重力和碰撞检测）添加到场景中。最后，我们将解释如何将Blender与Three.js结合使用，如何将Three.js与React和TypeScript集成，以及如何使用Three.js创建VR（Virtual Reality，虚拟现实）和AR（Augmented Reality，增强现实）场景。
