下载掌阅APP，畅读海量书库
立即打开
本书配套代码和示例是按章组织的，不过我们先需要运行一个简单的集成服务器才能访问所有这些示例。要启动并运行这个服务器，我们需要安装Node.js和npm。安装Node.js和npm是为了能够管理JavaScript包和构建JavaScript应用程序。这些工具使得Three.js代码的模块化变得更容易，并且能够更方便地整合现有的JavaScript库。
要安装这两个工具，请转到网站https://nodejs.org/en/download/，然后选择适合操作系统的安装程序。安装完毕之后，请打开终端检查是否安装成功。安装成功的话，会显示以下信息（工具的对应版本）：
安装完这些工具之后，我们还需获取所有需要的外部依赖项，然后才能构建和使用示例：
1．首先我们需要下载示例中使用的外部库。例如，需要下载Three.js等依赖项。我们需要在下载或提取所有示例的目录中运行以下命令来下载所有依赖项：
运行上述命令将开始下载所有所需的JavaScript库，并存储在node_modules文件夹中。
2．然后我们需要构建示例。我们可以使用npm将源代码和外部库合并成一个文件来构建示例。
使用npm构建示例的命令如下：
注意：上述两个命令你只需要运行一次。
3．现在所有示例都已经构建完成。不过要访问这些示例，你还需要启动一个Web服务器。你只需要运行以下命令即可启动这个Web服务器：
在运行了npm run serve命令之后，npm通常会自动打开默认的浏览器，然后导航到http://localhost:8080。如果浏览器没有自动打开，那么你可以手动打开浏览器，并导航到http://localhost:8080。你将会看到一个包含所有章的概览。然后每章子目录下包含了该章的示例，如图1.6所示。
图1.6 所有章和示例的概览
这个Web服务器有一个非常有趣的功能：如果对源代码进行修改并保存，那么浏览器中的示例将立即反映这些更改，而无须刷新浏览器或执行其他操作，我们就可以看到修改后的效果，从而使测试更改变得更加方便。例如，如果你通过运行npm run serve启动了服务器，那么你可以在编辑器中打开chapter-01/geometries.js示例文件进行更改，保存更改后，你会发现浏览器中的内容也同时被更改了。这使测试更改和微调颜色与光源变得更加方便。例如，在代码编辑器中打开chapter-01/geometries.js文件，并在浏览器中打开http://localhost:8080/chapter-01/geometries.html示例，就可以看到实际效果。然后在编辑器中更改立方体的颜色，即找到以下代码：
将其更改为以下内容：
现在，在你保存文件之后，你会立即看到浏览器中立方体颜色发生了变化，而无须刷新浏览器或执行其他操作。
提示
本书使用的方法只是开发Web应用程序的多种不同方法之一。你可以使用其他方法，例如，直接在HTML文件中包含Three.js（和其他库），或者使用import-maps方法，就像在Three.js网站上的示例那样。所有这些方法都有各自的优缺点。为了方便读者实验和获得直接的反馈，本书选择了最接近实际开发流程的方法。
要理解Three.js应用程序中各个组件是如何协同工作的，可以查看在浏览器中打开的HTML文件。