Three.js权威指南

Three.js在过去几年中已经成为创建令人惊叹的3D WebGL内容的标准方式。本书探讨Three.js的所有特性，并提供额外的内容，包括如何将Three.js与Blender、React、TypeScript以及最新的物理引擎进行集成。本书共分为四个部分：第一部分介绍搭建开发环境和运行Three.js；第二部分介绍Three.js的核心组件；第三部分介绍如何创建复杂的几何体、动画和纹理；第四部分介绍后期处理、物理模拟和音频集成。本书专为JavaScript开发者编写，旨在帮助他们掌握Three.js库的用法。

Jos Dirksen拥有近20年的软件开发和架构设计经验，涵盖从后端开发（如Java、Kotlin和Scala）到前端开发（使用HTML5、CSS、JavaScript和TypeScript）的多种技术。除了熟练运用这些技术外，Jos还经常在技术会议上发表演讲，并在博客上分享关于新技术和有趣技术的文章。他还喜欢尝试新技术，并探索如何利用它们来创建美观的数据可视化。他目前是一名自由职业的全栈工程师，参与多个Scala和TypeScript项目。Jos曾在私营公司（如ING、ASML、Malmberg和Philips）和国营机构（如美国国防部和阿姆斯特丹港）担任过许多不同的角色。

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　使用旋转关节来限制两个 　　　　对象之间的旋转运动44 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