Three.js 开发指南
🌙
手机阅读
本文目录结构
Three.js 开发指南
内容简介
本书通过大量的交互案例和示例代码介绍了 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.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 union 函数 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
