编辑推荐

　　

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

内容简介

　　随着HTML5标准的颁布，以及流行浏览器的日益强大，直接在浏览器中展示三维图形和动画已经变得越来越容易，也越来越受关注。但是三维图形和动画本身比较复杂，不仅需要有丰富的数学、图形学等方面的知识，还需要了解材质、贴图等各种创建三维场景所必备的要素。另外，直接使用WebGL在浏览器中创建三维图形和动画也非常繁琐，它所提供的各种接口尽管非常丰富且强大，但对于用户来说未免过于复杂了。
　　Three.js的出现则完美地帮助人们解决了这个矛盾。Three.js将WebGL的强大功能融汇其中，同时又非常易于使用，即便用户对其中的原理不甚了解，也能借助Three.js创建出绚丽多姿的三维场景和动画。
　　《Three.js开发指南》先从基本概念和Three.js的基本模块讲起，然后伴随着大量的示例和代码，逐步扩展到更多的主题，循序渐进地讲解Three.js的各种功能，帮助读者充分利用WebGL和现代浏览器的潜能，直接在浏览器中创建动态的华丽场景
　　《Three.js开发指南》通过大量的示例和代码，以互动的方式向读者展示Three.js的各种功能。
　　《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的场景中添加物理效果。

作者简介

　　JosDirksen，资深软件工程师和架构师，现任职于Malmberg公司，在后台技术（如Java和Scala）和前端开发（如HTML5、CSS和JavaScript）等技术领域有丰富的从业经验。除了对前端的JavaScript和HTML5等技术充满兴趣，Jos也喜欢研究使用REST和传统的网络服务技术开发后台服务。

　　李鹏程，SAP中国研究院高级软件工程师。早年他曾在AutoDesk公司从事三维设计软件的开发工作，后来因缘际会来到SAP，转行做ERP。随着云热潮的来临，传统的ERP也逐渐转向云端，因此也伴随着这股潮流学习了很多网络前端、后端方面的开发。

目录

前　言
致　谢
第1章用Three.js创建你的第一个三维场景
1.1　使用Three.js的前提条件
1.2　获取源代码
1.2.1　用Git克隆代码仓库
1.2.2　下载并解压压缩包
1.2.3　测试示例
1.3　创建HTML页面框架
1.4　渲染并展示三维对象
1.5　添加材质、灯光和阴影
1.6　用动画扩展你的首个场景
1.6.1　引入requestAnimation-Frame()方法
1.6.2　转动方块
1.6.3　弹跳球
1.7　使用dat.GUI库简化试验
1.8　使用ASCII效果
1.9　总结
第2章使用构建Three.js场景的基本组件
2.1　创建场景
2.1.1　场景的基本功能
2.1.2　在场景中添加雾化效果
2.1.3　使用材质覆盖属性
2.2　使用几何和网格对象
2.2.1　几何对象的属性和函数
2.2.2　网格对象的函数和属性
2.3　选择合适的相机
2.3.1　正投影相机和透视相机
2.3.2　让相机在指定点上聚焦
2.4　总结
第3章使用Three.js里的各种光源
3.1　探索Three.js库提供的光源
3.2　学习基础光源
3.2.1　AmbientLight-影响整个场景的光源
3.2.2　PointLight-照射所有方向的光源
3.2.3　SpotLight-具有锥形效果的光源
3.2.4　DirectinalLight-模拟远处类似太阳的光源
3.2.5　使用特殊光源生成高级光照效果
3.3　总结
第4章使用Three.js的材质
4.1　理解共有属性
4.1.1　基础属性
4.1.2　融合属性
4.1.3　高级属性
4.2　从简单的网格材质（基础、深度和面）开始
4.2.1　简单表面的MeshBasic-Material
4.2.2　基于深度着色的MeshDepthMaterial
4.2.3　联合材质
4.2.4　计算法向颜色的MeshNormalMaterial
4.2.5　为每个面指定材质的MeshFaceMaterial
4.3　学习高级材质
4.3.1　用于暗淡、不光亮表面的MeshLambertMaterial
4.3.2　用于光亮表面的MeshPhongMaterial
4.3.3　用ShaderMaterial创建自己的着色器
4.4　线段几何体的材质
4.4.1　LineBasicMaterial
4.4.2　LineDashedMaterial
4.5　总结
第5章学习使用几何体
5.1　Three.js提供的基础几何体
5.1.1　二维几何体
5.1.2　三维几何体
5.2　总结
第6章使用高级几何体和二元操作
6.1　ConvexGeometry
6.2　LatheGeometry
6.3　通过拉伸创建几何体
6.3.1　ExtrudeGeometry
6.3.2　TubeGeometry
6.3.3　从SVG拉伸
6.3.4　ParametricGeometry
6.4　创建三维文本
6.4.1　渲染文本
6.4.2　添加自定义字体
6.5　使用二元操作组合网格
6.5.1　subtract函数
6.5.2　intersect函数
6.5.3　union函数
6.6　总结
第7章粒子和粒子系统
7.1　理解粒子
7.2　粒子、粒子系统和BasicParticleMaterial
7.3　使用HTML5画布格式化粒子
7.3.1　在CanvasRenderer类里使用HTML5画布
7.3.2　在WebGLRenderer中使用HTML5画布
7.4　使用纹理格式化粒子
7.5　从高级几何体中创建粒子系统
7.6　总结
第8章创建、加载高级网格和几何体
8.1　几何体组合和合并
8.1.1　对象组合
8.1.2　将多个网格合并成一个网格
8.2　从外部资源中加载几何体
8.3　以Three.js的JSON格式保存和加载
8.3.1　保存和加载几何体
8.3.2　保存和加载场景
8.4　使用Blender
8.4.1　在Blender中安装Three.js导出器
8.4.2　在Blender里加载和导出模型
8.5　导入三维格式文件
8.5.1　OBJ和MTL格式
8.5.2　加载Collada模型
8.5.3　加载STL、CTM和VTK模型
8.5.4　展示蛋白质数据银行中的蛋白质
8.5.5　从PLY模型中创建粒子系统
8.6　总结
第9章创建动画和移动相机
9.1　基础动画
9.1.1简单动画
9.1.2　选择对象
9.1.3　用Tween.js做动画
9.2　使用相机
9.2.1　轨迹球控件
9.2.2　飞行控件
9.2.3　翻滚控件
9.2.4　第一人称控件
9.2.5　轨道控件
9.2.6　路径控件
9.3　变形动画和骨骼动画
9.3.1　用变形目标制作动画
9.3.2用骨骼和蒙皮制作动画
9.4使用外部模型创建动画
9.4.1　用Blender创建骨骼动画
9.4.2从Collada模型中加载动画
9.4.3从雷神之锤模型中加载动画
9.5总结
第10章加载和使用纹理
10.1在材质中使用纹理
10.1.1加载纹理并应用到网格
10.1.2使用凹凸贴图创建皱纹
10.1.3使用法向贴图创建更加细致的凹凸和皱纹
10.1.4使用光照贴图创建假阴影
10.1.5用环境贴图创建虚假的反光效果
10.1.6高光贴图
10.2纹理的高级用途
10.2.1定制UV映射
10.2.2重复映射
10.2.3在画布上绘制图案并作为纹理
10.3总结
第11章定制着色器和渲染后期处理
11.1设置后期处理
11.1.1创建EffectComposer对象
11.2后期处理通道
11.2.1简单后期处理通道
11.2.2　使用掩膜的高级效果组合器
11.2.3　用ShaderPass定制效果
11.3　创建自定义的后期处理着色器
11.3.1　定制灰度图着色器
11.3.2　定制位着色器
11.4　总结
第12章用Physijs在场景中添加物理效果
12.1　创建可用Physijs的基本Three.js场景
12.2　材质属性
12.3　基础图形
12.4　使用约束限制对象移动
12.4.1　用PointConstraint限制两点间的移动
12.4.2　用HingeConstraint创建类似门的约束
12.4.3　用SliderConstraint将移动限制到一个轴
12.4.4　用ConeTwistConstraint创建类似球销的约束
12.4.5　用DOFConstraint实现细节的控制
12.5　总结

前言/序言

　　在过去的两年里，浏览器变得更加强大了，而且能够作为平台来运行复杂的应用和图形。但大部分的图形都是二维的。现在大部分的浏览器已经实现了WebGL，它们不仅可以创建二维图形和应用，还可以充分利用GPU，创建漂亮的、高性能的三维应用。
　　直接使用WebGL编程非常复杂。你需要了解WebGL的内部细节，学习复杂的着色器语法，才能用好WebGL。Three.js库提供了一套基于WebGL的、非常易用的JavaScriptAPI，这样你不必学习WebGL的细节就可以创建漂亮的三维图形。
　　Three.js库提供了大量功能和API，你可以通过它们直接在浏览器中创建三维场景。《Three.js开发指南》提供了大量的交互式示例和代码，从中你可以学习到Three.js提供的所有API。
　　《Three.js开发指南》内容
　　第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的物理库来达到上述效果。
　　阅读之前的准备
　　阅读《Three.js开发指南》你要准备的只是一个文本编辑器（例如Sublime文本编辑器），用来编辑示例，以及一个现代的浏览器，用来显示这些示例。有些示例需要一个本地的Web服务器，但是在第1章，你将会学习如何搭建一个非常轻量的Web服务器来使用《Three.js开发指南》中的示例。
　　在我们开始之前，先对书中示例可能出现的问题简单提一下。第1章大致介绍了一下支持WebGL的浏览器，这是运行Three.js所必需的。现在的浏览器，诸如Chrome、Firefox和InternetExplorer可以很好地支持HTML5标准。但是仍然有一些细节要注意。当浏览器有新的版本时，它们有可能会不支持WebGL的某些特性。例如，在《Three.js开发指南》完成的时候，Windows7上的Chrome和Firefox在运行第11章的例子时会有问题。所以在尝试这些示例时，请确保升级到最新版的Chrome和Firefox。
　　读者对象
　　《Three.js开发指南》对所有已经了解JavaScript并开始想在浏览器里创建三维图形的人都会有很大的帮助。你不必去了解任何高级的算法或WebGL，只要具有一般的JavaScript和HTML知识即可。所有示例代码可以登录华章网站（www.hzbook.com）免费下载，《Three.js开发指南》中用到的工具也都是开源的。所以，如果你想要学习如何创建漂亮的、交互的三维图形，并且可以在任何现代的浏览器上运行，那么这《Three.js开发指南》就是你想要的。
　　致　　谢　Acknowledgements
　　写书是一件耗时且艰苦的事情。如果没有很多人的支持和帮助，我不可能完成。我想在这里感谢他们。
　　首先是我的项目协调人，LeenaPurkait，要不是她帮助我协调所有的细节，从而让我可以专注于内容的创作，我根本不可能按时完成所有的章节。我还要感谢RitikaSingh和AnitaNayak，她们花了很多时间和精力来完善《Three.js开发指南》。
　　还有来自Packt出版社的好多人，他们在我写书、审校期间给了我很多帮助，保证整个过程顺利进行。干得不错，伙计们！
　　当然，我还要感谢RicardoCabello，即Mr.dò_ób，Three.js正是他的杰作。
　　非常感谢《Three.js开发指南》的各位审校人。感谢你们那些非常好的反馈和建议，对《Three.js开发指南》的改进帮助很大。正是你们的积极评论才成就了《Three.js开发指南》。
　　我还没有提到最重要的人。我想感谢我的太太Brigitte，她一再地容忍我在周末和晚上将大量的时间花费在笔记本电脑上。我要感谢我的女儿Sophie，她经常把我从键盘上拉开，逗我开心。还有我的女儿Amber，尽管只有几周大，但是她让我对生命中真正重要的事情和时刻充满感激。




其他推荐