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
鄂公网安备 42010302001612号 