本书通过大量的交互案例和示例代码介绍了Three.js提供的各种API，让读者不需要了解很难编程的WebGL的底层细节及复杂的着色语言，只需大致了解JavaScript及HTML，就能轻松地在浏览器中创建二维和三维应用及图形。本书共12章，涉及以下内容：使用Three.js创建三维场景，构建场景的基本组件，Three.js中的光源、材质、几何体以及粒子、精灵和点云，创建和加载网格、几何体，创建动画和移动摄像机，加载和使用纹理，自定义着色器和后期处理，在场景中添加物理效果和声音等。
封面图
目录
- 前言
- 第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.1Three.js中不同种类的光源46
- 3.2基础光源47
- 3.2.1THREE.AmbientLight47
- 3.2.2THREE.PointLight51
- 3.2.3THREE.SpotLight54
- 3.2.4THREE.DirectionalLight58
- 3.3特殊光源60
- 3.3.1THREE.HemisphereLight60
- 3.3.2THREE.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.1THREE.MeshBasicMaterial71
- 4.2.2THREE.MeshDepthMaterial73
- 4.2.3联合材质75
- 4.2.4THREE.MeshNormalMaterial76
- 4.2.5THREE.MeshFaceMaterial78
- 4.3高级材质81
- 4.3.1THREE.MeshLambertMaterial81
- 4.3.2THREE.MeshPhongMaterial82
- 4.3.3用THREE.ShaderMaterial创建自己的着色器83
- 4.4线性几何体的材质89
- 4.4.1THREE.LineBasicMaterial89
- 4.4.2THREE.LineDashedMaterial91
- 4.5总结92
- 第5章学习使用几何体93
- 5.1THREE.js提供的基础几何体94
- 5.1.1二维几何体94
- 5.1.2三维几何体102
- 5.2总结112
- 第6章高级几何体和二元操作113
- 6.1THREE.ConvexGeometry113
- 6.2THREE.LatheGeometry115
- 6.3通过拉伸创建几何体116
- 6.3.1THREE.ExtrudeGeometry117
- 6.3.2THREE.TubeGeometry119
- 6.3.3从SVG拉伸120
- 6.3.4THREE.ParametricGeometry122
- 6.4创建三维文本124
- 6.4.1渲染文本124
- 6.4.2添加自定义字体126
- 6.5使用二元操作组合网格127
- 6.5.1subtract函数129
- 6.5.2intersect函数132
- 6.5.3union函数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
