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

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐