下载掌阅APP，畅读海量书库
立即打开
这里我们以geometries.html文件为例探索一下Three.js应用程序的HTML结构。你可以在浏览器中查看源代码或在你下载本书源代码的目录的dist/chapter-1子目录中打开该文件来查看geometries.html文件的源代码：
以上这些代码是在你运行npm run build命令之后生成的。在npm run build构建过程中，它会将所有使用的源代码和外部库组合成独立的源文件（称为bundle），然后将它们添加到该页面中。所以你并不需要手工编写这个geometries.html文件。文件开头的前三个<script>标签指向我们使用的所有外部库。本书的后续章节我们还将介绍其他一些库，如 React.js 和 Tween.js 。它们将以同样的方式自动包含在内。在这个示例中，除了<script>标签外，HTML文件中只包含<style>和<body>元素。<style>用于禁用页面中的任何边距，从而能够使用整个浏览器视口来显示3D场景。然后我们将使用JavaScript编程的方式，往空白的<body>元素中动态添加3D场景，细节将在1.4节详细描述。
如果你希望直接在网页中添加一些自定义的HTML元素，当然也是可以的。具体操作是：在你下载的代码根目录中，你会找到一个template.html文件（npm构建命令将使用它来创建这些示例的最终HTML文件）。你可以在这个template.html文件中直接添加任何内容。更深入的工作原理我们不在此讨论，因为超出了本书的范围。但是如果你想了解更多信息，可以参考以下关于webpack的资源：
❑ webpack入门指南：https://webpack.js.org/guides/getting-started/。这个网站包含了一个教程，解释了为什么我们需要在JavaScript开发中使用webpack，以及webpack的基本概念和工作原理。
❑ HTML webpack插件的相关信息：https://github.com/jantimon/html-webpack-plugin。这个链接包含了关于构建过程中使用的webpack插件的详细信息，该插件用于将源代码打包生成供浏览器直接运行的HTML页面。
注意：在使用Three.js时，我们不需要显式地初始化场景或调用JavaScript代码，Three.js会自动执行这一过程。每当页面加载并引入geometries.js文件时，其中的Three.js代码会被自动执行，并使用Three.js创建和渲染一个3D场景。
现在我们已经在页面上引入了必要的Three.js库，下面可以创建和渲染第一个场景了。
