前言
第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.AmbientLight47
3.2.2 THREE.PointLight51
3.2.3 THREE.SpotLight54
3.2.4 THREE.DirectionalLight58
3.3 特殊光源60
3.3.1 THREE.HemisphereLight60
3.3.2 THREE.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.1 THREE.MeshBasicMaterial71
4.2.2 THREE.MeshDepthMaterial73
4.2.3 联合材质75
4.2.4 THREE.MeshNormalMaterial76
4.2.5 THREE.MeshFaceMaterial78
4.3 高级材质81
4.3.1 THREE.MeshLambertMaterial81
4.3.2 THREE.MeshPhongMaterial82
4.3.3 用THREE.ShaderMaterial创建自己的着色器83
4.4 线性几何体的材质89
4.4.1 THREE.LineBasicMaterial89
4.4.2 THREE.LineDashedMaterial91
4.5 总结92
第5章 学习使用几何体93
5.1 THREE.js提供的基础几何体94
5.1.1 二维几何体94
5.1.2 三维几何体102
5.2 总结112
第6章 高级几何体和二元操作113
6.1 THREE.ConvexGeometry113
6.2 THREE.LatheGeometry115
6.3 通过拉伸创建几何体116
6.3.1 THREE.ExtrudeGeometry117
6.3.2 THREE.TubeGeometry119
6.3.3 从SVG拉伸120
6.3.4 THREE.ParametricGeometry122
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 函数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
· · · · · · (
收起)
