具体描述
首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能，通过大量交互示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧。
在过去的两年里，浏览器变得更加强大了，而且能够作为平台来运行复杂的应用和图形。但大部分的图形都是二维的。现在大部分的浏览器已经实现了WebGL，它们不仅可以创建二维图形和应用，还可以充分利用GPU，创建漂亮的、高性能的三维应用。
直接使用WebGL编程非常复杂。你需要了解WebGL的内部细节，学习复杂的着色器语法，才能用好WebGL。Three.js库提供了一套基于WebGL的、非常易用的JavaScript API，这样你不必学习WebGL的细节就可以创建漂亮的三维图形。
Three.js库提供了大量功能和API，你可以通过它们直接在浏览器中创建三维场景。本书提供了大量的交互式示例和代码，从中你可以学习到Three.js提供的所有API。
本书内容
第1章讲述使用Three.js库的基本步骤。到这章结束的时候，你就可以创建出第一个Three.js场景。你可以直接在浏览器中创建三维场景，并制作动画。
第2章将会讲解Three.js库使用过程中你所需要理解的基础组件。你将会学习使用光源、网格、几何体、材质和相机。通过这章你会对Three.js库提供的各种光源及场景中使用的相机有一个大体的了解。
第3章进一步讲解场景中的各种光源。该章会展示几个例子，并解释如何使用各种光源，该章所介绍的光源包括：SpotLight、DirectionLight、AmbientLight、PointLight、HemisphereLight，以及AreaLight。另外，该章还展示如何在光源中应用LensFlare效果。
第4章讨论Three.js库中可以用于网格的各种材质。这一章将会展示所有可以在材质中设置的属性，每种属性都有其特定的用途。并且这章还提供交互式的例子，通过它们你可以试验Three.js库中各种可用的材质。
第5章开始探讨Three.js库中的各种几何体。在这一章里你会学习如何创建、设置Three.js里的几何体，而且你还可以通过交互式的示例来试验，该章介绍的几何体包括：平面、圆、自定义形状、方块、球体、圆柱体、圆环、环面纽结和多面体。
第6章继续第5章未讲完的内容，展示如何设置、使用Three.js库中的高级几何体，例如凸面体和扫描体。该章将会介绍如何从二维几何体中拉出三维几何体，以及如何使用二元运算将几何体组合起来。
第7章讲解如何使用Three.js库中的粒子系统。你将会学习如何从零开始创建粒子系统，以及如何基于已有的几何体创建粒子系统。你还会学习如何使用精灵和粒子材质来改变粒子的外观。
第8章展示如何从外部源导入网格和几何体。你将会学习如何使用Three.js库的JSON格式来存储几何体和场景。这一章还解释了如何从OBJ、DAE、STL、CTM和PLY格式的文件中加载模型。
第9章探讨各种动画效果，使场景活动起来。你将会学习如何结合Tween.js库使用Three.js，以及基于变形和骨骼的动画效果。
第10章进一步展开讨论第4章引入的材质。这一章会深入讲解材质的细节。该章介绍了各种可用的材质，以及应用到网格上时如何控制材质。另外，在这一章你还会看到如何将HTML5视频的输出和HTML5画布中的元素作为纹理。
第11章探讨如何使用Three.js库来对已经渲染过的场景进行后期处理。通过后期处理，你可以对已经渲染过的场景应用某些特效，如模糊、移轴、陈旧。另外，你还会学习如何创建自定义的后期处理效果，以及创建自定义顶点和片段着色器。
第12章讲解如何在Three.js的场景中添加物理效果。有了物理效果后，你就可以检测物体之间的碰撞，使它们能够对重力产生反应，并产生摩擦。这一章将会展示如何使用JavaScript的物理库来达到上述效果。
阅读之前的准备
阅读本书你要准备的只是一个文本编辑器（例如Sublime文本编辑器），用来编辑示例，以及一个现代的浏览器，用来显示这些示例。有些示例需要一个本地的Web服务器，但是在第1章，你将会学习如何搭建一个非常轻量的Web服务器来使用本书中的示例。
在我们开始之前，先对书中示例可能出现的问题简单提一下。第1章大致介绍了一下支持WebGL的浏览器，这是运行Three.js所必需的。现在的浏览器，诸如Chrome、Firefox和Internet Explorer可以很好地支持HTML5 标准。但是仍然有一些细节要注意。当浏览器有新的版本时，它们有可能会不支持WebGL的某些特性。例如，在本书完成的时候，Windows 7上的Chrome和Firefox在运行第11章的例子时会有问题。所以在尝试这些示例时，请确保升级到最新版的Chrome和Firefox。
作者简介
目录信息
致 谢
第1章用Three.js创建你的第一个三维场景1
1.1 使用Three.js的前提条件3
1.2 获取源代码4
1.2.1 用Git克隆代码仓库4
1.2.2 下载并解压压缩包5
1.2.3 测试示例6
1.3 创建HTML页面框架7
1.4 渲染并展示三维对象9
1.5 添加材质、灯光和阴影13
1.6 用动画扩展你的首个场景15
1.6.1 引入requestAnimation-Frame()方法15
1.6.2 转动方块17
1.6.3 弹跳球17
1.7 使用dat.GUI库简化试验18
1.8 使用ASCII效果19
1.9 总结20
第2章使用构建Three.js场景的基本组件22
2.1 创建场景22
2.1.1 场景的基本功能23
2.1.2 在场景中添加雾化效果27
2.1.3 使用材质覆盖属性28
2.2 使用几何和网格对象29
2.2.1 几何对象的属性和函数29
2.2.2 网格对象的函数和属性33
2.3 选择合适的相机37
2.3.1 正投影相机和透视相机37
2.3.2 让相机在指定点上聚焦41
2.4 总结41
第3章使用Three.js里的各种光源43
3.1 探索Three.js库提供的光源43
3.2 学习基础光源44
3.2.1 AmbientLight—影响整个场景的光源44
3.2.2 PointLight—照射所有方向的光源47
3.2.3 SpotLight—具有锥形效果的光源49
3.2.4 DirectinalLight—模拟远处类似太阳的光源53
3.2.5 使用特殊光源生成高级光照效果54
3.3 总结61
第4章使用Three.js的材质62
4.1 理解共有属性63
4.1.1 基础属性63
4.1.2 融合属性64
4.1.3 高级属性64
4.2 从简单的网格材质（基础、深度和面）开始65
4.2.1 简单表面的MeshBasic-Material65
4.2.2 基于深度着色的MeshDepthMaterial67
4.2.3 联合材质68
4.2.4 计算法向颜色的MeshNormalMaterial70
4.2.5 为每个面指定材质的MeshFaceMaterial72
4.3 学习高级材质73
4.3.1 用于暗淡、不光亮表面的MeshLambertMaterial74
4.3.2 用于光亮表面的MeshPhongMaterial75
4.3.3 用ShaderMaterial创建自己的着色器76
4.4 线段几何体的材质81
4.4.1 LineBasicMaterial81
4.4.2 LineDashedMaterial83
4.5 总结84
第5章学习使用几何体85
5.1 Three.js提供的基础几何体86
5.1.1 二维几何体86
5.1.2 三维几何体92
5.2 总结100
第6章使用高级几何体和二元操作102
6.1 ConvexGeometry102
6.2 LatheGeometry104
6.3 通过拉伸创建几何体105
6.3.1 ExtrudeGeometry106
6.3.2 TubeGeometry107
6.3.3 从SVG拉伸109
6.3.4 ParametricGeometry110
6.4 创建三维文本112
6.4.1 渲染文本113
6.4.2 添加自定义字体114
6.5 使用二元操作组合网格115
6.5.1 subtract函数117
6.5.2 intersect函数120
6.5.3 union函数121
6.6 总结121
第7章粒子和粒子系统123
7.1 理解粒子123
7.2 粒子、粒子系统和BasicParticleMaterial125
7.3 使用HTML5画布格式化粒子128
7.3.1 在CanvasRenderer类里使用HTML5画布128
7.3.2 在WebGLRenderer中使用HTML5画布129
7.4 使用纹理格式化粒子131
7.5 从高级几何体中创建粒子系统139
7.6 总结141
第8章创建、加载高级网格和几何体143
8.1 几何体组合和合并143
8.1.1 对象组合143
8.1.2 将多个网格合并成一个网格145
8.2 从外部资源中加载几何体147
8.3 以Three.js的JSON格式保存和加载147
8.3.1 保存和加载几何体147
8.3.2 保存和加载场景149
8.4 使用Blender151
8.4.1 在Blender中安装Three.js导出器152
8.4.2 在Blender里加载和导出模型153
8.5 导入三维格式文件155
8.5.1 OBJ和MTL格式156
8.5.2 加载Collada模型159
8.5.3 加载STL、CTM和VTK模型160
8.5.4 展示蛋白质数据银行中的蛋白质161
8.5.5 从PLY模型中创建粒子系统163
8.6 总结164
第9章创建动画和移动相机166
9.1 基础动画166
9.1.1简单动画167
9.1.2 选择对象168
9.1.3 用Tween.js做动画170
9.2 使用相机172
9.2.1 轨迹球控件172
9.2.2 飞行控件174
9.2.3 翻滚控件175
9.2.4 第一人称控件175
9.2.5 轨道控件177
9.2.6 路径控件178
9.3 变形动画和骨骼动画180
9.3.1 用变形目标制作动画181
9.3.2用骨骼和蒙皮制作动画184
9.4使用外部模型创建动画186
9.4.1 用Blender创建骨骼动画186
9.4.2从Collada模型中加载动画190
9.4.3从雷神之锤模型中加载动画191
9.5总结192
第10章加载和使用纹理194
10.1在材质中使用纹理194
10.1.1加载纹理并应用到网格194
10.1.2使用凹凸贴图创建皱纹197
10.1.3使用法向贴图创建更加细致的凹凸和皱纹198
10.1.4使用光照贴图创建假阴影199
10.1.5用环境贴图创建虚假的反光效果201
10.1.6高光贴图204
10.2纹理的高级用途205
10.2.1定制UV映射205
10.2.2重复映射207
10.2.3在画布上绘制图案并作为纹理209
10.3总结213
第11章定制着色器和渲染后期处理215
11.1设置后期处理215
11.1.1创建EffectComposer对象216
11.2后期处理通道218
11.2.1简单后期处理通道218
11.2.2 使用掩膜的高级效果组合器223
11.2.3 用ShaderPass定制效果226
11.3 创建自定义的后期处理着色器231
11.3.1 定制灰度图着色器232
11.3.2 定制位着色器235
11.4 总结237
第12章用Physijs在场景中添加物理效果238
12.1 创建可用Physijs的基本Three.js场景238
12.2 材质属性243
12.3 基础图形244
12.4 使用约束限制对象移动248
12.4.1 用PointConstraint限制两点间的移动249
12.4.2 用HingeConstraint创建类似门的约束250
12.4.3 用SliderConstraint将移动限制到一个轴252
12.4.4 用ConeTwistConstraint创建类似球销的约束254
12.4.5 用DOFConstraint实现细节的控制255
12.5 总结259
· · · · · · (收起)
读后感
用户评价
我是一位有着多年Web开发经验的开发者，虽然熟悉前端技术栈，但对3D图形编程一直感到陌生。读完《Three.js开发指南》之后，我感觉自己打开了一个全新的世界。《Three.js开发指南》这本书的结构非常合理，它从最基础的概念讲起，逐步深入到更复杂的应用场景。作者在讲解过程中，总是能够准确地把握读者的学习曲线，不会让你感到 overwhelmed。我特别欣赏书中关于材质和纹理的章节，它让我明白了如何为3D模型赋予逼真的外观，如何通过贴图和着色器来创造出丰富多样的视觉效果。书中对于各种渲染技术的介绍，如 PBR（基于物理的渲染），让我对现代3D图形技术有了更深刻的理解。此外，书中还介绍了一些关于如何与其他Web技术（如HTML、CSS、JavaScript）结合使用 Three.js 的方法，这对于我这样的前端开发者来说尤为重要。我学会了如何将 Three.js 的渲染结果嵌入到现有的Web页面中，如何实现与页面元素的交互，以及如何利用 Web Workers 来处理耗时的3D计算，从而保证页面的流畅性。这本书为我提供了将静态Web内容提升到全新维度所需的知识和技能，我强烈推荐给所有希望拓展自己技术栈的Web开发者。
评分作为一名在工作中需要处理大量数据可视化问题的工程师，我一直在寻找一个能够将复杂数据转化为直观、交互式3D图形的解决方案。《Three.js开发指南》的出现，简直就像是为我量身定做的。这本书的优点在于其高度的实用性和前瞻性。作者并没有仅仅停留在基础知识的讲解，而是深入探讨了如何在实际项目中应用 Three.js 来解决具体问题。例如，书中关于如何构建大型、复杂的3D场景的技巧，以及如何通过优化数据加载和渲染流程来保证流畅的用户体验，都让我受益匪浅。我尤其欣赏作者在介绍各种图表类型（如散点图、柱状图、热力图等）的3D实现方式时，所提供的详细代码和思路。这些内容直接解决了我在数据可视化项目中遇到的痛点。此外，书中关于用户交互的讲解也非常到位，我学会了如何实现鼠标拖拽、缩放、旋转等常用交互，以及如何通过射线拾取来响应用户的点击事件。这些功能对于构建真正引人入胜的数据可视化应用至关重要。总而言之，《Three.js开发指南》不仅仅是一本技术书籍，更像是一本实用的工具箱，它提供了丰富的理论知识和可操作的代码，让我能够自信地将复杂的数据以更具吸引力的方式呈现出来。
评分作为一名对前沿技术充满好奇的设计师，我一直渴望能够将更具沉浸感和互动性的3D体验带入我的设计作品中。《Three.js开发指南》这本书，彻底颠覆了我对Web设计固有的认知。这本书并没有从纯粹的技术角度入手，而是更多地关注如何利用 Three.js 的强大功能来实现令人惊叹的视觉效果和用户体验。作者在书中用大量篇幅讲解了如何运用 Three.js 来创建各种艺术装置、产品展示、虚拟场景等，并且提供了详细的实现思路和代码示例。我尤其喜欢书中关于如何利用 Three.js 来实现动感的粒子效果、流体模拟以及空间感的营造。这些技巧让我能够轻松地为我的设计作品注入生命力，创造出更加引人入胜的视觉故事。此外，书中还介绍了一些关于如何优化3D模型，以及如何考虑移动端和不同设备的兼容性问题，这对于设计师来说至关重要，能够确保我的作品在各种环境下都能呈现最佳效果。我发现，通过这本书，我不仅能够学习到技术，更能够激发我的创意灵感，将抽象的概念转化为具象的3D体验。这本书是任何想要将3D艺术和互动设计融入Web作品的设计师的必备读物。
评分这本书绝对是我今年读过的最让我激动的一本技术书籍！作为一名对前端可视化充满好奇的初学者，我一直对3D图形在网页上的可能性感到惊叹，但又苦于找不到一个既权威又易于理解的入门途径。《Three.js开发指南》恰好满足了我所有的期待。从第一页开始，我就被作者清晰的逻辑和循序渐进的讲解深深吸引。书中没有枯燥的理论堆砌，而是通过大量生动形象的例子，一步步引导我理解 Three.js 的核心概念，例如场景、相机、渲染器，以及如何创建几何体、材质，并赋予它们生命。特别是关于光照和阴影的章节，我终于摆脱了之前一头雾水的状态，真正明白了如何利用不同的光照类型营造出逼真的视觉效果。作者还非常贴心地为每个章节都提供了可运行的代码示例，我可以直接复制代码到自己的开发环境中进行调试和修改，这种“动手实践”的学习方式让我进步神速。最让我惊喜的是，书中还涵盖了一些进阶话题，比如如何加载外部模型、实现粒子系统、以及进行性能优化。这让我明白，这本书不仅是一个入门指南，更是一个能够伴随我成长，不断挖掘 Three.js 潜力的宝藏。我强烈推荐给所有对 Web 3D 开发感兴趣的朋友，无论你是前端开发者，还是UI/UX设计师，亦或是纯粹的技术爱好者，这本书都能为你打开一扇全新的视觉世界大门。
评分我一直对游戏开发抱有浓厚的兴趣，虽然我并非专业的游戏开发者，但 थ्री.js 的出现让我看到了在 Web 端实现一些简单游戏的可能性。《Three.js开发指南》这本书，就像是一位经验丰富的导师，耐心地引导我一步步走进 Three.js 的奇妙世界。这本书最大的特点是其严谨而又充满趣味性的讲解风格。作者在介绍每一个概念时，都会先给出清晰的定义，然后通过一个简洁明了的示例来解释它的实际应用。我特别喜欢书中关于物理引擎和动画系统的章节，它让我理解了如何让3D模型动起来，并且能够模拟真实的物理效果。例如，书中关于重力、碰撞检测以及角色动画的讲解，让我对游戏开发中的核心技术有了更深的认识。我尝试着书中提供的代码，修改了参数，看到了不同的效果，这种互动式的学习方式让我感到非常过瘾。此外，书中还介绍了一些提高开发效率的小技巧，比如如何使用 Three.js 的编辑器来辅助场景搭建，以及如何利用预设的几何体和材质来快速创建模型。这大大降低了我的入门门槛，让我能够更专注于创造性的工作。这本书对于任何想要了解 Web 3D 游戏开发，或者想要在自己的项目中加入一些动态3D元素的人来说，都是一个绝佳的选择。
评分讲得很细致，会读第二遍。
评分入门挺好的，如果先有一些实践经验会看得很快的，会讲述一些没注意到的问题。
评分第一本引入国内的Three.js教程，讲解细致入微，翻译得也不错，很适合初学者。感觉Three.js创建3D页面无比强大，当然也比大部分的前端类库复杂难学
评分雾化和炫光效果好漂亮，粒子系统酷炸了，加上PhysiJS就可以开发3D游戏了(一脸花痴样
评分入门挺好
