Three.js权威指南:在网页上创建3D图形和动画的方法与实践(原书第4版)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.1 技术要求

Three.js是一个JavaScript库,因此创建一个Three.js WebGL应用程序非常简单,你只需要一个文本编辑器来编写JavaScript代码,以及任何一个支持WebGL的浏览器来渲染结果。我推荐以下文本编辑器,我在过去的几年里广泛使用它们进行各种项目:

Visual Studio Code:这是一款由微软开发的免费编辑器,适用于所有主流平台,并提供基于类型、函数定义和导入库的优秀语法高亮显示和智能补全。它提供了一个非常清爽的界面,非常适合开发JavaScript项目。你可以从https://code.visualstudio.com/下载它。如果你不想下载这个编辑器,那么可以直接访问https://vscode.dev/,在浏览器中直接启动编辑器,通过这个编辑器,你可以连接到GitHub存储库或访问本地文件系统中的目录。

WebStorm:这是一款由JetBrains开发的编辑器,它提供了对JavaScript代码的强大支持。它支持代码补全、自动部署和JavaScript调试(可以直接在编辑器中进行)。此外,WebStorm还支持GitHub和其他版本控制系统。你可以从http://www.jetbrains.com/webstorm/下载试用版本。

Notepad++:Notepad++是一款通用的文本编辑器,支持多种编程语言的代码高亮显示。Notepad++能够轻松地对JavaScript代码进行布局和格式化。注意,Notepad++仅适用于Windows操作系统。你可以从http://notepad-plus-p l u s. org/下载Notepad++。

Sublime Text Editor:Sublime是一款优秀的编辑器,为编辑JavaScript提供了非常好的支持。此外,它提供了许多非常有帮助的选择(如多行选择)和编辑选项,一旦你习惯了它们,这些选项就会提供一个非常好的JavaScript编辑环境。Sublime也可以免费试用,你可以从http://www.sublimetext.com/下载。

除了这些编辑器之外,还有很多其他的编辑器可以使用,包括开源和商业软件,你可以使用这些编辑器来编辑JavaScript并创建Three.js项目,因为你只需要能够编辑文本即可。其中,AWS Cloud9(http://c9.io)是一个基于云的JavaScript编辑器,可以连接到GitHub账号。通过这种方式,你可以直接访问本书的所有源代码和示例,并进行实验。

提示

除了可以使用这些基于文本的编辑器来编辑和实验本书中的源代码之外,你还可以使用Three.js提供的在线编辑器。

使用这个编辑器(可以在http://threejs.org/editor/找到),你可以使用图形化方法创建Three.js场景。

我建议选择Visual Studio Code。它是一个非常轻量级的编辑器,对JavaScript具有极好的支持,并且还可以安装一些扩展来让编写JavaScript应用程序变得更加容易。

前面我提到,大多数现代Web浏览器都支持WebGL,并且可以运行Three.js示例。我通常使用Firefox运行我的代码,因为在通常情况下,Firefox对WebGL具有最好的支持和性能,并且拥有出色的JavaScript调试器。使用Firefox的调试器,你可以通过断点和控制台输出等方法快速定位问题,如图1.4所示。

提示

本书中的所有示例在Chrome和Firefox中都可以一样正常运行。因此,你可以选择你喜欢的浏览器。

我会在后续章节提供一些关于调试器使用和其他调试技巧的建议。简介部分到此结束,现在让我们获取源代码并开始第一个场景。

图1.4 Firefox调试器

获取源代码

本书的所有代码都可以在GitHub上找到(https://github.com/Pack t P u b l i s h i n g/Learn-Three.js-Fourth-edition)。GitHub是一个提供在线Git存储库托管服务的网站。你可以使用Git存储库来存储、访问和版本化源代码。你可以通过多种方式获取本书的源代码。例如以下两种:

❑ 克隆Git存储库。你可以使用git命令行工具获取本书源代码的最新版本。

❑ 可以从GitHub下载包含所有内容的压缩包到本地,然后将其解压。

现在我们详细讲解一下这两种方式。

克隆Git存储库

你可以使用git命令行工具克隆存储库。首先你需要下载操作系统对应的Git客户端安装程序。有些操作系统默认安装了Git。你可以在终端运行以下命令快速确认这一点:

如果默认没有安装Git,那么你可以在http://git-scm.com下载客户端然后按照安装说明进行安装。安装完Git之后,你可以使用git命令行工具克隆本书的存储库。打开命令行工具并转到要下载源代码的目录。在该目录中运行以下命令:

执行完之后,所有源代码将被下载到learning-threejs-fourth目录中。然后你可以从该目录中运行本书的所有示例。

下载和解压压缩包

如果你不想通过前面git方式直接从GitHub下载源代码,那么你也可以下载源代码压缩包。在浏览器中打开https://github.com/PacktPublishing/Learn-Three.js-Fourth-edition,然后单击右侧的Code按钮。然后单击Download ZIP即可,如图1.5所示。

图1.5 从GitHub下载源代码压缩包

下载完之后将其解压到你选择的目录,你就可以使用所有示例了。

现在你已经下载或克隆了源代码,接下来让我们快速检查一下是否一切正常,并熟悉一下目录结构。