Three.js开发指南 WebGL的JavaScript 3D库PDF电子书下载

第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.AmbientLight 47

3.2.2 THREE.PointLight 51

3.2.3 THREE.SpotLight 54

3.2.4 THREE.DirectionalLight 58

3.3特殊光源 60

3.3.1 THREE.HemisphereLight 60

3.3.2 THREE.AreaLight 61

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.MeshBasicMaterial 71

4.2.2 THREE.MeshDepthMaterial 73

4.2.3联合材质 75

4.2.4 THREE.MeshNormalMaterial 76

4.2.5 THREE.MeshFaceMaterial 78

4.3高级材质 81

4.3.1 THREE.MeshLambertMaterial 81

4.3.2 THREE.MeshPhongMaterial 82

4.3.3用THREE.ShaderMaterial创建自己的着色器 83

4.4线性几何体的材质 89

4.4.1 THREE.LineBasicMaterial 89

4.4.2 THREE.LineDashedMaterial 91

4.5总结 92

第5章 学习使用几何体 93

5.1 THREEJs提供的基础几何体 94

5.1.1二维几何体 94

5.1.2三维几何体 102

5.2总结 112

第6章 高级几何体和二元操作 113

6.1 THREE.ConvexGeometry 113

6.2 THREE.LatheGeometry 115

6.3通过拉伸创建几何体 116

6.3.1 THREE.ExtrudeGeometry 117

6.3.2 THREE.TubeGeometry 119

6.3.3从SVG拉伸 120

6.3.4 THREE.ParametricGeometry 122

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.PointCloudMaterial 138

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 Cloud 153

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使用Blender 165

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.j s以进行后期处理 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.j s场景 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