Discover three.js is now open source!
Word Count:461, reading time: ~3minutes

Three.js 应用的结构

在我们构建一个 three.js 应用程序之前，我们需要创建一个网页。我们在简介中简要讨论了我们将如何做到这一点（ Ch 0.5和 Ch 0.6），但现在让我们更深入地了解一下。正如我们在上一章中提到的，我们的目标是尽可能创建最基本、最简单、最平淡无奇的网页，而无需对使用 three.js 的真实 Web 应用程序的外观做出任何假设。通过这样做，我们确保我们编写的代码可以适应任何地方，而无需太多努力。

我们将只用两个文件创建这个基本网页：index.html和styles/main.css。就是这样。现在按下按钮打开编辑器并查看这两个文件。

如果您对本章的任何内容不熟悉，请参阅 A.1：本书中使用的 HTML 和 CSS，在那里我们介绍了如何深入了解简单网页的构建。

index.html

index.html 是我们应用程序的根文件。它是我们在浏览器中直接打开的唯一文件，所有 CSS 和 JavaScript 文件都是通过该文件的引用加载的。

index.html: 我们网页的根目录 
    <!DOCTYPE html>
<html>

<head>
  <title>Discoverthreejs.com - The Structure of a three.js App</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />

  <link rel="icon" href="https://discoverthreejs.com/favicon.ico" type="image/x-icon">

  <link href="./styles/main.css" rel="stylesheet" type="text/css">

  <script type="module" src="./src/main.js"></script>
</head>

<body>
  <h1>Discoverthreejs.com - Nothing to see here yet :)</h1>

  <div id="scene-container">
    <!-- Our <canvas> will be inserted here -->
  </div>
</body>

</html>

styles/main.css

在 index.html 的<head>部分中，其中一个<link>元素引用了 styles/main.css 文件：

index.html: 引用 main.css 
      <link href="./styles/main.css" rel="stylesheet" type="text/css">

… 其中包含一些用于控制页面外观的简单样式：

styles/main.css 
    body {
  /* remove margins and scroll bars */
  margin: 0;
  overflow: hidden;

  /* style text */
  text-align: center;
  font-size: 12px;
  font-family: Sans-Serif;

  /* color text */
  color: #444;
}

h1 {
  /* position the heading */
  position: absolute;
  width: 100%;

  /* make sure that the heading is drawn on top */
  z-index: 1;
}

#scene-container {
  /* tell our scene container to take up the full page */
  position: absolute;
  width: 100%;
  height: 100%;

  /*
    Set the container's background color to the same as the scene's
    background to prevent flashing on load
  */
  background-color: skyblue;
}

稍后我们将仔细查看样式#scene-container，而该文件的其余部分将在 附录 中更详细地解释。

src/main.js: JavaScript 入口点

回到 index.html，样式<link>的正下方是一个<script>标签引用了src/main.js文件：

index.html: 引用 main.js 
      <script type="module" src="./src/main.js"></script>

… 目前是空的：

src/main.js: 即将推出！ 
    // just waiting for your beautiful creations!

main.js 是我们的 JavaScript 应用程序的入口点，我们将在下一章中填充它。该type="module"属性告诉浏览器我们正在编写 JavaScript 模块。如果这对您来说是新的，请转到 A.4：JavaScript 模块，其中包含您需要了解的有关 JavaScript 模块的所有信息，以遵循本书中的代码。

module属性还有另一个优点：浏览器将自动 推迟 运行此文件，直到 HTML 被解析。这将防止由于在浏览器读取之前尝试访问 HTML 元素而导致的错误（浏览器从上到下读取 HTML）。

向页面添加 three.js 场景

下一个在 index.html 中的关注点是场景 scene 容器元素：

index.html: 场景scene容器 
    <body>
  <h1>Discoverthreejs.com - Nothing to see here yet :)</h1>

  <div id="scene-container">
    <!-- Our <canvas> will be inserted here -->
  </div>
</body>

所有 three.js 场景都在一个 <canvas>元素内呈现。一旦我们设置了我们的应用程序，three.js 将为我们创建一个画布，然后我们将它插入到场景 scene 容器中：

index.html: 一旦我们的应用程序运行，我们将把 three.js 画布插入到场景容器中 
    

<div id="scene-container">
  <canvas></canvas>
</div>

然后，我们可以通过设置场景容器元素的样式来控制场景的位置和大小。如果你把注意力转回**main.css**，你会看到我们已经为这个元素创建了一些样式。通过设置位置、宽度和高度，我们告诉浏览器这个元素应该占据整个 window 窗口：

main.css: 设置场景容器的样式 
    #scene-container {
  /* tell our scene container to take up the full page */
  position: absolute;
  width: 100%;
  height: 100%;

  /*
    Set the container's background color to the same as the scene's
    background to prevent flashing on load
  */
  background-color: skyblue;
}

最后，我们将背景颜色设置为天蓝色，因为这是我们将在本节中为大部分的 three.js 场景提供的背景颜色。我们的场景需要几毫秒才能准备好，而浏览器会解析 JavaScript、加载 3D 模型并构建场景，而所有这些场景容器上的内容都是可见的。通过使容器与场景颜色相同，我们确保过渡尽可能平滑。

其他文件夹

将注意力转向编辑器中的文件树。到目前为止，我们还没有查看两个文件夹：assets/ 和 vendor/。

vendor/ 文件夹

vendor/ 文件夹是我们放置 其他人 编写的 JavaScript 文件的地方。对于本书中的大多数示例，这意味着来自 three.js 库的文件，从 three.js GitHub 仓库下载。在本书中，我们将只使用库中的三个文件：

  • vendor/three/build/three.module.js: 主 three.js 文件.
  • vendor/three/examples/jsm/controls/OrbitControls.js: 我们将在 Ch 1.9中介绍的相机控制插件。
  • vendor/three/examples/jsm/loaders/GLTFLoader.js: 我们将在 Ch 1.13中介绍的 3D 模型加载器。

vendor/three 文件夹反映了 GitHub 仓库的结构，但为了清楚起见，我们将仅包含每章所需的文件。我们将使用 NPM 的方式导入这些文件到 main.js 中：

src/main.js: NPM的方式导入three.js文件 
    
import {
Camera,
Group,
Scene,
} from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

如果您喜欢在 本地工作，您可以使用按钮从编辑器下载 zip 打包文件。在 zip 文件中，任何 three.js 导入都将转换为来自 skypack.dev 的 CDN 导入：

src/main.js: 通过CDN方式引入的three.js文件 
    


import { Camera, Group, Scene } from "https://cdn.skypack.dev/[email protected]";

import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js?module";
import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js?module";

请参阅 0.5：如何在您的项目中包含 three.js以了解更多详细信息。

assets 文件夹

最后是 assets/ 文件夹。我们的应用程序中使用的任何非 HTML、CSS 或 JavaScript 的东西都在这里：纹理、3D 模型、字体、声音等等。目前，我们将在 1.8 中使用一个测试纹理：纹理映射简介，以及我们将在 1.13 中使用的一个火烈鸟模型：以 glTF 格式加载 3D 模型。

 

有了这些，是时候开始做真正的工作了！在下一章中，我们将创建我们的第一个简单的 three.js 应用程序。

Import Style
Selected Texture