Three.js - 安装

Three.js - 现代安装与设置

为了构建健壮且优化的 Three.js 应用程序，一个现代的开发环境至关重要。虽然你可以通过简单的

现代方法：使用构建工具（推荐）

这种方法为你提供了强大的功能：依赖管理（轻松添加和更新 Three.js 及其他库）、代码打包（优化你的生产代码）、热模块替换（Hot Module Replacement, HMR，无需刷新页面即可即时查看更改），以及无缝使用现代 JavaScript 特性的能力。

步骤 1：使用 Vite 设置项目

Vite 是一个快速简单的构建工具，非常适合 Three.js 开发。首先，请确保你已经安装了 Node.js（其中包含了 npm）。

打开你的终端并运行以下命令：

# 1. 创建一个新的 Vite 项目（选择 'Vanilla' 和 'JavaScript'）
npm create vite@latest my-threejs-project

# 2. 进入你的新项目目录
cd my-threejs-project

# 3. 安装必要的包
npm install

# 4. 安装 Three.js 作为依赖
npm install three

# 5. 启动开发服务器
npm run dev

Vite 将启动一个本地服务器，你可以在浏览器中看到你的应用程序。现在你可以编辑 main.js 文件并开始编码了！

步骤 2：将 Three.js 导入到你的代码中

在你的 main.js 文件中，现在你可以使用 ES6 模块语法导入 Three.js。

main.js

import * as THREE from 'three';

// 你也可以导入所需的特定组件，例如 OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 你的 Three.js 代码从这里开始...
const scene = new THREE.Scene();
// ...

步骤 3：使用 Git 进行版本控制

使用 Git 这样的版本控制系统来跟踪你的更改是一种最佳实践。在你的项目文件夹中初始化一个仓库：

# 在你的项目文件夹中
git init
git add .
git commit -m "首次提交 Three.js 设置"

快速方式：使用 CDN

对于非常简单的测试或在线代码沙盒（如 CodePen），你可以使用内容分发网络（Content Delivery Network, CDN）直接在 HTML 中引入 Three.js。这种方法不需要 Node.js 或构建步骤。

不建议在生产应用程序中使用此方法，因为它性能较低（没有摇树优化，tree-shaking）并且使得依赖管理变得困难。

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js CDN Example</title>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@latest/build/three.module.js",
          "three/examples/jsm/": "https://unpkg.com/three@latest/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

      // Your code here...
    </script>
  </body>
</html>

请注意 importmap 的使用，这是在浏览器中直接处理 ES 模块的现代方式。

传统方式：手动下载

状态：已废弃。 这种方法涉及从 GitHub 下载 Three.js 源文件并手动将其包含在你的项目中。强烈不建议这样做，原因如下：

• 版本地狱（Versioning Hell）：更新 Three.js 到新版本是一个手动且容易出错的过程。
• 无优化：你被迫包含整个库，即使是你不使用的部分。
• 与现代工具不兼容：它与现代 JavaScript 模块和打包工具（bundlers）配合不佳。

对于任何你计划维护或增长的项目，始终优先选择现代构建工具的方法。