阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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
      目录
      目录