新书推荐 |《Three.js开发指南：基于WebGL和HTML5在网页上渲染3D图形和动画（原书第3版）》

Posted 2021-04-04 华章计算机

新书推荐

《Three.js开发指南：基于WebGL和html5在网页上渲染3D图形和动画（原书第3版）》

长按二维码
了解及购买

全面讲解Three.js开发的实用指南，涵盖Three.js的各种功能，通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧。

编辑推荐

本书先从基本概念和Three.js的基本模块讲起，然后伴随着大量的示例和代码，逐步扩展到更多的主题，循序渐进地讲解Three.js的各种功能，帮助你充分利用WebGL和现代浏览器的潜能，直接在浏览器中创建动态的华丽场景。

内容简介

本书通过大量的示例和代码，以丰富的互动的方式向读者展示Three.js的各种功能。

全书共12章：第1章讲述使用Three.js库的基本步骤；第2章讲解Three.js库使用过程中所需要理解的各种基础组件，包括灯光、网格、几何体、材质和相机等；第3章通过具体示例讲解场景中使用的各种灯光；第4章讨论Three.js库中可以用于网格的各种材质，并通过互动示例让你来试用这些材质；第5章讲解Three.js中几何体的创建和设置；第6章展示如何设置、使用Three.js库中的高级几何体，例如凸面体和扫描体；第7章讲解如何使用Three.js库中的粒子系统；第8章展示如何从外部导入网格和几何体；第9章探索各种动画效果，使场景活动起来；第10章深入讲解材质的细节，包括如何控制材质，以及如何将HTML5视频的输出和HTML5画布中的元素作为纹理；第11章探索如何使用Three.js库来对已经渲染过的场景进行后期处理；第12章讲解如何在Three.js的场景中添加物理效果。

作者简介

Jos Dirksen　 

资深软件工程师和架构师，现为荷兰一家大型金融机构的咨询顾问，在后台技术（如Java和Scala）和前端开发（如HTML5、CSS和javascript）等技术领域有丰富的从业经验。除了对前端的JavaScript和HTML5等技术充满兴趣，Jos也喜欢研究使用REST和传统的网络服务技术开发后台服务。

目录

译者序

前言

第1章　使用Three.js创建你的第一个三维场景1

1.1　准备工作3

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　旋转立方体18

1.6.3　弹跳球19

1.7　使用dat.GUI简化试验流程20

1.8　场景对浏览器的自适应22

1.9　总结23

第2章　构建Three.js应用的基本组件24

2.1　创建场景24

2.1.1　场景的基本功能25

2.1.2　给场景添加雾化效果29

2.1.3　使用overrideMaterial属性30

2.2　几何体和网格32

2.2.1　几何体的属性和方法32

2.2.2　网格对象的属性和方法36

2.3　选择合适的摄像机40

2.3.1　正交投影摄像机和透视投影摄像机41

2.3.2　将摄像机聚焦在指定点上45

2.4　总结46

第3章　学习使用Three.js中的光源47

3.1　Three.js中不同种类的光源47

3.2　基础光源48

3.2.1　THREE.AmbientLight48

3.2.2　THREE.SpotLight53

3.2.3　THREE.PointLight58

3.2.4　THREE.DirectionalLight62

3.3　特殊光源63

3.3.1　THREE.HemisphereLight64

3.3.2　THREE.AreaLight65

3.3.3　镜头光晕67

3.4　总结69

第4章　使用Three.js的材质70

4.1　理解材质的共有属性71

4.1.1　基础属性71

4.1.2　融合属性73

4.1.3　高级属性73

4.2　从简单的网格材质开始74

4.2.1　THREE.MeshBasicMaterial75

4.2.2　THREE.MeshDepthMaterial77

4.2.3　联合材质79

4.2.4　THREE.MeshNormalMaterial80

4.2.5　在单几何体上使用多种材质82

4.3　高级材质84

4.3.1　THREE.MeshLambertMaterial85

4.3.2　THREE.MeshPhongMaterial86

4.3.3　THREE.MeshStandardMaterial88

4.3.4　THREE.MeshPhysicalMaterial89

4.3.5　用THREE.ShaderMaterial创建自己的着色器89

4.4　线性几何体的材质95

4.4.1　THREE.LineBasicMaterial95

4.4.2　THREE.LineDashedMaterial97

4.5　总结97

第5章　学习使用几何体99

5.1　Three.js提供的基础几何体101

5.1.1　二维几何体101

5.1.2　三维几何体109

5.2　总结120

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

6.1　THREE.ConvexGeometry122

6.2　THREE.LatheGeometry124

6.3　通过拉伸创建几何体125

6.3.1　THREE.ExtrudeGeometry126

6.3.2　THREE.TubeGeometry127

6.3.3　从SVG拉伸129

6.4　THREE.ParametricGeometry131

6.5　创建三维文本133

6.5.1　渲染文本133

6.5.2　添加自定义字体136

6.6　使用二元操作组合网格137

6.6.1　subtract函数139

6.6.2　intersect函数142

6.6.3　union函数143

6.7　总结143

第7章　粒子和精灵145

7.1　理解粒子145

7.2　THREE.Points和THREE.PointsMaterial148

7.3　使用HTML5画布样式化粒子151

7.3.1　在THREE.CanvasRenderer中使用HTML5画布151

7.3.2　在WebGLRenderer中使用HTML5画布152

7.4　使用纹理样式化粒子155

7.5　使用精灵贴图160

7.6　从高级几何体创建THREE.Points163

7.7　总结165

第8章　创建、加载高级网格和几何体166

8.1　几何体组合与合并166

8.1.1　对象组合166

8.1.2　将多个网格合并成一个网格168

8.2　从外部资源加载几何体170

8.2.1　以Three.js的JSON格式保存和加载171

8.2.2　使用Blender177

8.3　导入三维格式文件181

8.3.1　OBJ和MTL格式181

8.3.2　加载Collada模型185

8.3.3　从其他格式的文件中加载模型186

8.3.4　展示蛋白质数据银行中的蛋白质190

8.3.5　从PLY模型中创建粒子系统192

8.4　总结194

第9章　创建动画和移动摄像机195

9.1　基础动画195

9.1.1　简单动画196

9.1.2　选择对象197

9.1.3　使用Tween.js实现动画198

9.2　使用摄像机201

9.2.1　轨迹球控制器202

9.2.2　飞行控制器204

9.2.3　第一视角控制器205

9.2.4　轨道控制器207

9.3　变形动画和骨骼动画208

9.3.1　用变形目标创建动画209

9.3.2　用骨骼和蒙皮创建动画217

9.4　使用外部模型创建动画220

9.4.1　使用Blender创建骨骼动画220

9.4.2　从Collada模型加载动画223

9.4.3　从雷神之锤模型中加载动画225

9.4.4　使用gltfLoader225

9.4.5　利用fbxLoader显示动作捕捉模型动画227

9.4.6　通过xLoader加载古老的DirectX模型228

9.4.7　利用BVHLoader显示骨骼动画230

9.4.8　如何重用SEA3D模型231

9.5　总结232

第10章　加载和使用纹理233

10.1　将纹理应用于材质233

10.1.1　加载纹理并应用到网格233

10.1.2　使用凹凸贴图创建褶皱238

10.1.3　使用法向贴图创建更加细致的凹凸和褶皱239

10.1.4　使用移位贴图来改变顶点位置240

10.1.5　用环境光遮挡贴图实现细节阴影241

10.1.6　用光照贴图产生假阴影243

10.1.7　金属光泽度贴图和粗糙度贴图244

10.1.8　Alpha贴图246

10.1.9　自发光贴图247

10.1.10　高光贴图248

10.1.11　使用环境贴图创建伪镜面反射效果250

10.2　纹理的高级用途255

10.2.1　自定义UV映射255

10.2.2　重复纹理258

10.2.3　在画布上绘制图案并作为纹理260

10.2.4　将视频输出作为纹理262

10.3　总结263

第11章　自定义着色器和后期处理265

11.1　配置Three.js以进行后期处理265

11.2　后期处理通道268

11.2.1　简单后期处理通道270

11.2.2　使用掩码的高级效果组合器274

11.2.3　高级渲染通道：景深效果278

11.2.4　高级渲染通道：环境光遮挡280

11.3　使用THREE.ShaderPass自定义效果281

11.3.1　简单着色器283

11.3.2　模糊着色器285

11.4　创建自定义后期处理着色器287

11.4.1　自定义灰度图着色器287

11.4.2　自定义位着色器290

11.5　总结292

第12章　在场景中添加物理效果和声音293

12.1　创建基本的Three.js场景294

12.2　Physi.js材质属性298

12.3　Physi.js基础形体300

12.4　使用约束限制对象的移动304

12.4.1　使用PointConstraint限制对象在两点间移动305

12.4.2　使用HingeConstraint创建类似门的约束306

12.4.3　使用SliderConstraint将移动限制在一个轴上309

12.4.4　使用ConeTwistConstraint创建类似球销的约束311

12.4.5　使用DOFConstraint实现细节的控制312

12.5　在场景中添加声源315

12.6　总结317

你与世界

只差一个