零、前言
在过去的几年里,浏览器变得更加强大,成为交付复杂应用和图形的有力平台。然而,这些大多数是标准的 2D 图形。大多数现代浏览器都采用了 WebGL,它不仅允许您在浏览器中创建 2D 应用和图形,还可以使用 GPU 的功能创建美观且性能良好的 3D 应用。
然而,直接编程 WebGL 非常复杂。您需要了解 WebGL 的内部细节,并学习一种复杂的着色器语言来充分利用 WebGL。Three.js 围绕 WebGL 的特性提供了一个非常容易使用的 JavaScript API,因此您可以创建漂亮的 3D 图形,而无需详细学习 WebGL。
Three.js 提供了大量的特性和 API,您可以使用它们在浏览器中直接创建 3D 场景。在这本书里,你将通过大量的交互例子和代码示例来学习 Three.js 必须提供的所有不同的 API。
这本书涵盖了什么
第 1 章、用 Three.js 创建您的第一个 3D 场景涵盖了开始使用 Three.js 所需的基本步骤。您将立即创建您的第一个 Three.js 场景,在本章结束时,您将能够直接在浏览器中创建并制作您的第一个 3D 场景的动画。
第 2 章、组成三个. js 场景的基本组件,解释了使用三个. js 时需要了解的基本组件。您将了解灯光、网格、几何图形、材质和相机。在本章中,您还将了解到 Three.js 提供的不同灯光以及您可以在场景中使用的摄像机。
第 3 章、使用 Three.js 中可用的不同光源,深入探讨场景中可以使用的不同光源。它展示了示例并解释了如何使用聚光灯、方向灯、环境光、点光源、半球光源和区域光源。此外,它还展示了如何在光源上应用镜头光斑效果。
第 4 章、使用 Three.js 材质讲述了 Three.js 中可以在你的网格上使用的材质。它显示了您可以设置的所有属性,以便为您的特定用途配置材质,并提供了交互示例来实验 Three.js 中可用的材质
第 5 章、学习使用几何图形,这是探索 Three.js 提供的所有几何图形的两章中的第一章。在这一章中,您将学习如何在 Three.js 中创建和配置几何图形,并可以使用提供的几何图形交互示例(如平面、圆、形状、立方体、球体、圆柱体、圆环体、圆环体和多面体)进行实验。
第 6 章、高级几何和二元运算,在第 5 章、学习使用几何的地方继续。它向您展示了如何配置和使用 trial . js 提供的更高级的几何图形,如凸形和车床形。在本章中,您还将学习如何从 2D 形状中挤出三维几何图形,以及如何通过使用二元运算组合几何图形来创建新的几何图形。
第 7 章、粒子、精灵和点云解释了如何使用来自 Three.js 的点云。您将学习如何从零开始和从现有几何图形创建点云。在本章中,您还将学习如何通过使用精灵和点云材质来修改单个点的外观。
第 8 章、创建和加载高级网格和几何图形,向您展示如何从外部源导入网格和几何图形。您将学习如何使用 Three.js 的内部 JSON 格式来保存几何图形和场景。本章还解释了如何从诸如 OBJ、DAE、STL、CTM、PLY 等格式加载模型。
第 9 章、动画和移动相机,探索了各种类型的动画,你可以用它们来让你的场景变得生动起来。您将学习如何将 Tween.js 库与 Three.js 一起使用,以及如何使用基于变形和骨骼的动画模型。
第 10 章、加载和处理纹理,详细介绍了第 4 章、处理 Three.js 材质,其中介绍了材质。在这一章中,我们深入探讨纹理的细节。本章介绍了各种可用的纹理类型,以及如何控制纹理应用于网格的方式。此外,在本章中,您将看到如何直接使用 HTML5 视频和画布元素的输出作为纹理的输入。
第 11 章、自定义着色器和渲染后处理,探索如何使用 Three.js 将后处理效果应用到渲染场景。通过后处理,您可以将模糊、倾斜移动、棕褐色等效果应用到渲染场景。除此之外,您还将学习如何创建自己的后处理效果以及创建自定义顶点和片段着色器。
第 12 章将物理和声音添加到你的场景中,解释了如何将物理添加到你的 Three.js 场景中。有了物理学,你可以探测物体之间的碰撞,使它们对重力做出反应,并施加摩擦力。本章向您展示如何使用 Physijs JavaScript 库来实现这一点。此外,本章还向您展示了如何将位置音频添加到三点场景中。
这本书你需要什么
这本书所需要的只是一个文本编辑器(例如,崇高)来处理这些例子,以及一个现代的网络浏览器来访问这些例子。有些例子需要一个本地的网络服务器,但是你会在第 1 章、用 Three.js 创建你的第一个 3D 场景中学习到,如何设置一个非常轻量级的网络服务器来和本书中的例子一起使用。
这本书是给谁的
这本书非常适合那些已经了解 JavaScript 并想从创建可以在任何浏览器中运行的 3D 图形开始的人。你不需要了解任何关于高等数学或 WebGL 的知识;所需要的只是 JavaScript 和 HTML 的一般知识。所需资料和示例可以免费下载,本书使用的所有工具都是开源的。所以,如果你想学习如何在任何现代浏览器中创建美丽的交互式 3D 图形,这本书适合你。
惯例
在这本书里,你会发现许多区分不同种类信息的文本样式。以下是这些风格的一些例子和对它们的意义的解释。
文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、伪 URL、用户输入和 Twitter 句柄如下所示:“在这段代码中可以看到,除了设置map
属性,我们还将bumpMap
属性设置为一个纹理。”
代码块设置如下:
function createMesh(geom, imageFile, bump) {
var texture = THREE.ImageUtils.loadTexture("../img/textures/general/" + imageFile)
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
var bump = THREE.ImageUtils.loadTexture("../img/textures/general/" + bump)
mat.bumpMap = bump;
mat.bumpScale = 0.2;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
当我们希望将您的注意力吸引到代码块的特定部分时,相关的行或项目以粗体显示:
var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
effectFilm.renderToScreen = true;
var composer4 = new THREE.EffectComposer(webGLRenderer);
composer4.addPass(renderScene);
composer4.addPass(effectFilm);
任何命令行输入或输出都编写如下:
# git clone https://github.com/josdirksen/learning-threejs
新名词和重要词语以粗体显示。您在屏幕上看到的单词,例如菜单或对话框中的单词,出现在文本中,如下所示:“您可以通过转到首选项 | 高级并选中在菜单栏中显示开发菜单来实现。”
注
警告或重要提示会出现在这样的框中。
类型
提示和技巧是这样出现的。
读者反馈
我们随时欢迎读者的反馈。让我们知道你对这本书的看法——你喜欢或不喜欢什么。读者反馈对我们来说很重要,因为它有助于我们开发出你真正能从中获益的标题。
要给我们发送一般反馈,只需发送电子邮件<[feedback@packtpub.com](mailto:feedback@packtpub.com)>
,并在您的邮件主题中提及书名。
如果你对某个主题有专业知识,并且对写作或投稿感兴趣,请参见我们位于www.packtpub.com/authors的作者指南。
客户支持
现在,您已经自豪地拥有了一本书,我们有许多东西可以帮助您从购买中获得最大收益。
下载示例代码
您可以从您在http://www.packtpub.com的账户下载您购买的所有 Packt Publishing 书籍的示例代码文件。如果您在其他地方购买了这本书,您可以访问http://www.packtpub.com/support并注册,以便将文件直接通过电子邮件发送给您。
下载本书的彩色图片
我们还为您提供了一个 PDF 文件,其中包含本书中使用的截图/图表的彩色图像。彩色图像将帮助您更好地理解输出中的变化。您可以从https://www . packtpub . com/sites/default/files/downloads/2215 OS _ graphics . pdf下载此文件。
勘误表
尽管我们尽了最大努力来确保我们内容的准确性,但错误还是会发生。如果你在我们的某本书里发现了错误——可能是文本或代码中的错误——如果你能向我们报告,我们将不胜感激。通过这样做,你可以让其他读者免受挫折,并帮助我们改进这本书的后续版本。如果您发现任何勘误表,请访问http://www.packtpub.com/submit-errata,选择您的书籍,点击勘误表 提交 表格链接,并输入您的勘误表详细信息。一旦您的勘误表得到验证,您的提交将被接受,勘误表将上传到我们的网站或添加到该标题勘误表部分下的任何现有勘误表列表中。
要查看之前提交的勘误表,请前往https://www.packtpub.com/books/content/support并在搜索栏中输入图书名称。所需信息将出现在勘误表部分。
盗版
互联网上版权材质的盗版是所有媒体的一个持续问题。在 Packt,我们非常重视版权和许可证的保护。如果您在互联网上遇到任何形式的我们作品的非法拷贝,请立即向我们提供位置地址或网站名称,以便我们寻求补救。
请通过<[copyright@packtpub.com](mailto:copyright@packtpub.com)>
联系我们,获取疑似盗版资料的链接。
我们感谢您在保护我们的作者方面的帮助,以及我们为您带来有价值内容的能力。
问题
如果您对本书的任何方面有问题,可以在<[questions@packtpub.com](mailto:questions@packtpub.com)>
联系我们,我们将尽最大努力解决问题。
版权属于:月萌API www.moonapi.com,转载请注明出处