Three.js开发指南(首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能；通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧)pdf/txt下载_在线阅读全文

当前位置:首页 > 计算机/网络 > 程序设计 > Three.js开发指南(首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能；通过大量交互式示例，深入探索使用开源的Three.js库创建绚丽三维图形的实用方法和技巧)

内容简介

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

作者简介

　　Jos Dirksen资深软件工程师和架构师，现任职于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章　用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　总结

显示全部信息

在线试读部分章节

　　第1章
　　用Three.js创建你的第一个三维场景
　　如今浏览器的功能越来越强大，而且这些功能可以通过JavaScript直接调用。你可以用HTML5标签轻松地添加视频和音频，而且可以在HTML5画布上创建各种交互组件。现在这个功能集合里又有了一个新成员，即支持WebGL。通过WebGL，你可以直接使用显卡的计算资源，创建高性能的二维和三维计算机图形，然后在JavaScript里直接使用WebGL编程，创建三维场景并生成动画，这个过程非常复杂，而且容易出错。Three.js库可以简化这个过程。Three.js可以帮助我们的地方如下：
　　创建简单的和复杂的三维图形
　　在三维场景中生成动画、移动物体
　　在物体上应用纹理和材质
　　从三维建模软件中加载图形
　　创建基于样条曲线的二维图形
　　只要几行代码，你就可以从简单的三维图形创建出逼真的、实时的场景来，如下图所示：
　　在第1章中我们会直接开始探究Three.js，通过创建几个例子来展示Three.js是如何工作的。你可以自己亲手试验一下这几个例子。但我们并不会深入探究所有的技术细节，这些细节我们将会在后面的章节中讲解。本章会探讨下面几方面的内容：
　　使用Three.js时要用到的工具
　　下载本书附带的源码和示例
　　创建你的第一个Three.js场景
　　应用材质、光线和动画来改进你创建的场景
　　引入几个辅助库，用于统计和控制场景

第1章 
　　用Three.js创建你的第一个三维场景 
　　如今浏览器的功能越来越强大，而且这些功能可以通过JavaScript直接调用。你可以用HTML5标签轻松地添加视频和音频，而且可以在HTML5画布上创建各种交互组件。现在这个功能集合里又有了一个新成员，即支持WebGL。通过WebGL，你可以直接使用显卡的计算资源，创建高性能的二维和三维计算机图形，然后在JavaScript里直接使用WebGL编程，创建三维场景并生成动画，这个过程非常复杂，而且容易出错。Three.js库可以简化这个过程。Three.js可以帮助我们的地方如下： 
　　创建简单的和复杂的三维图形 
　　在三维场景中生成动画、移动物体 
　　在物体上应用纹理和材质 
　　从三维建模软件中加载图形 
　　创建基于样条曲线的二维图形 
　　只要几行代码，你就可以从简单的三维图形创建出逼真的、实时的场景来，如下图所示： 
　　在第1章中我们会直接开始探究Three.js，通过创建几个例子来展示Three.js是如何工作的。你可以自己亲手试验一下这几个例子。但我们并不会深入探究所有的技术细节，这些细节我们将会在后面的章节中讲解。本章会探讨下面几方面的内容： 
　　使用Three.js时要用到的工具 
　　下载本书附带的源码和示例 
　　创建你的第一个Three.js场景 
　　应用材质、光线和动画来改进你创建的场景 
　　引入几个辅助库，用于统计和控制场景 
　　我们首先会简单介绍一下Three.js，然后立即开始讲解第一个示例及其代码。在开始之前我们先来快速浏览一下现在市面上几个最负盛名的浏览器，以及它们对WebGL的支持情况。 
　　现在支持Three.js的浏览器如下表： 
　　浏　览　器 支 持 情 况 
　　Mozilla Firefox 　4.0版以后开始支持 
　　Google Chrome 　第9版以后开始支持 
　　Safari 　5.1版开始支持，以及那些新安装在Mac OS X的山狮版、狮子版和雪豹版操作系统上的版本。确保在Safari中打开了WebGL选项。为此你可以找到Preferences | Advanced菜单，选中Show develop menu in menu bar。然后选中菜单项Develop | Enable WebGL 
　　Opera 　12.00版以后开始支持。要让Opera支持WebGL，你还需要打开opera:config文件，设置WebGL，并将Enable Hardware Acceleration置为1。然后重启浏览器 
　　Internet Explorer 　Internet Explorer是长期以来唯一一个不支持WebGL的主流浏览器。从IE11开始，微软才开始支持WebGL 
　　基本上Three.js可以在任何流行的浏览器上运行，除了IE的大部分版本。所以如果你想用旧版本的IE，你有两个选择：你可以用Google Chrome Frame来支持WebGL，可以从如下网址下载：https://developers.google.com/chrome/chrome-frame/。除了Google Chrome Frame，你也可以使用iewebgl插件，下载网址是http://iewebgl.com/。在IE上安装这个插件，使其支持WebGL。 
　　Google已经停止了对Google Chrome Frame的官方支持，而且Google Chrome Frame也不支持IE10。 
　　现在Three.js的工程师正在开发一个遵从CSS-3D规范的新渲染器，而这个规范大多数浏览器都支持（包括IE10）。除了桌面浏览器之外，手机和平板电脑上的浏览器也都支持CSS-3D。 
　　通过本章的学习，你可以直接开始创建第一个三维场景，这个场景应该可以在上述任意一个浏览器里运行。我们不会介绍太多Three.js复杂的特性，不过在本章结束的时候你应该可以建立一个Three.js场景，如下图所示： 
　　通过创建这个场景，你可以学习到Three.js的一些基础知识，还可以创建第一个动画。在开始学习这个示例之前，我们先介绍几个工具，这些工具可以帮助你更方便地使用Three.js。我们还要学习如何下载本书中展示的那些示例。 
　　1.1　使用Three.js的前提条件 
　　Three.js是一个JavaScript库，所以当你用Three.js创建一个WebGL应用时，你所需的仅仅是一个文本编辑器和一个支持WebGL的浏览器（用来渲染结果）。我非常诚恳地向你推荐三个JavaScript编辑器，在过去的几年里我一直在使用它们。 
　　WebStorm：这是一个由JetBrains公司开发的编辑器，对于编写JavaScript程序支持得非常好。它提供代码补全、自动部署等功能，还可以直接在编辑器里调试JavaScript。除此之外，WebStorm还能很好地支持Git（以及其他的版本控制系统）。你可以从网址http://www.jetbrains.com/webstorm/获取一个试用版。 
　　Notepad++：这是一个通用型的编辑器，支持很多的编程语言。用它可以很方便地排版和格式化JavaScript代码。 
　　Notepad++只有Windows版。 
　　Sublime Text Editor：这是一个非常好用的小型编辑器，对于编写JavaScript代码支持良好。除此之外，它还提供了很多很有用的选择和编辑功能，一旦你习惯了这些功能，那它就是一个真正不错的JavaScript编辑环境。Sublime Text Editor也有免费试用版，你可以从网址http://www.sublimetext.com/下载。 
　　即使你不用这三个编辑器，依然有很多编辑器可供选择，开源的、商业的都有。它们都可以用来编辑JavaScript代码，创建Three.js项目。网上有一个开源项目有点儿意思，你或许可以试一试，网址是http://c9.io。这是一个云端的JavaScript代码编辑器，而且可以登录你的GitHub账户。这样你就可以直接访问本书附带的所有源代码和示例，并且还可以试验它们。 
　　前面我提到过如今大多数Web浏览器都支持WebGL，都可以用来运行Three.js的示例。通常我在Chrome里运行代码。原因是，大多数情况下，Chrome对WebGL的支持是最好的，性能也不错，而且Chrome里还有一个很好的JavaScript代码调试器。通过这个调试器你可以很快地找到问题所在，可以加断点、在控制台输出信息。在本书里我会给你一些该调试器的使用建议，以及一些调试提示和技巧。 
　　有关Three.js的介绍到此为止，接下来让我们获取源代码并开始创建第一个场景。 
　　1.2　获取源代码 
　　本书所有的源代码都可以从GitHub（https://github.com）下载。GitHub是一个在线的基于Git的代码仓库，你可以通过它存储、访问源代码，并管理源代码的版本。你可以用两种方式获取源代码： 
　　克隆（clone）Git代码仓库 
　　下载代码压缩包，然后解压 
　　在后面的章节中我们会详细探讨这两种方式。 
　　1.2.1　用Git克隆代码仓库 
　　Git是一个开源的、分布式版本控制系统。在写这本书的时候我就是用Git创建并管理书中示例的代码。这就是我会用GitHub这个免费的、在线Git代码仓库的原因。你可以通过访问https://github.com/josdirksen/learning-threejs以查看代码仓库中的内容。 
　　你可以使用git命令行工具来克隆整个代码仓库，从而获取所有示例的代码。为此，你首先要下载一个适合你的操作系统的Git客户端。对于现在大多数的操作系统，都可以从http://git-scm.com下载相应的客户端，或者你也可以使用GitHub自己提供的客户端（Mac版和Windows版）。安装好Git之后你就可以用它来克隆本书的代码仓库。打开一个命令提示窗口，转到一个你想保存源代码的目录。然后在这个目录里运行如下的命令： 
　　运行该命令即可开始下载所有的示例，如下图所示： 
　　现在，本书所有的示例都将包含在文件夹learning-three.js里。 
　　1.2.2　下载并解压压缩包 
　　如果你不想用Git直接从GitHub下载源代码，你也可以下载一个压缩包。访问https://github.com/josdirksen/learningthreejs，并点击下载链接，如下图所示： 
　　将压缩包解压到一个目录，这样你就拥有了所有的示例。 
　　1.2.3　测试示例 
　　现在你已经下载了或克隆了所有的源代码，让我们来快速检查一下，看看是不是所有的东西都准备好了，并熟悉一下文件夹的结构。源代码和示例是按照章节来组织的。查看这些例子有两种方法。你可以直接在浏览器中打开解压的或克隆的目录，并运行某个示例；或者你也可以在本地安装一个Web服务器。对于大多数的基础性的示例，第一个方法就可以了。但是当我们要加载一些外部资源时，例如三维模型和纹理图片，仅仅打开一个HTML文件是不够的。在这种情况下我们就需要一个本地的Web服务器，确保外部资源能够正确加载。在下面的几节里，我们将探讨几种在本地建立Web服务器的简单方法，以方便我们测试。 
　　建立本地的Web服务器非常简单，不同的环境有不同的方法。下面列出了几个建立Web服务器的例子。 
　　1.2.3.1　用Python——适合大多数UNIX/Mac系统 
　　大多数的UNIX/Linux/Mac系统都已经安装了Python。在这些系统中可以很容易地建立本地Web服务器： 
　　在你签出或下载的源代码目录下运行上述命令。 
　　1.2.3.2　用NPM—如果你已经安装了Node.js 
　　如果你已经用过Node.js，那么很可能你已经安装了NPM。使用NPM时你有两种选择，它们都可以快速建立用于测试的本地Web服务器。第一种是使用HTTP Server模块： 
　　你也可以用Simple HTTP Server： 
　　但是第二种方式有个缺点，它不能自动地列出文件夹里的东西，而第一种方式就可以。 
　　1.2.3.3　用Mongoose—在Mac/Windows上可以移植 
　　如果你没有安装Python或者NPM，那么你还可以用一个简单的、可移植的Web服务器，Mongoose。首先，从https://code.google.com/p/mongoose/downloads/list下载特定平台的二进制文件。如果是Windows平台，把下载好的文件复制到示例所在的目录，双击它，即可启动一个Web浏览器，并显示该目录中的内容。 
　　对于其他操作系统，你也必须将这个可执行程序复制到目标目录，但不能双击，只能通过命令行来启动。在这两种情况下，一个本地的Web服务器都会启动，端口是8080。 
　　点击各章的条目，我们就可以展示并访问这一章的示例。在本书中，当我提到某个示例时，我会指出示例的名称和它所在的文件夹，这样你就可以直接测试它，以及查看源代码。 
　　到此为止，你应该已经安装好了一个编辑器，并且可以访问所有的源代码。现在是时候去创建我们的第一个场景了。

显示全部信息

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

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

发布书评

相关图书推荐