第二章：Three.js 环境搭建

最新推荐文章于 2025-06-30 10:46:35 发布

昱晏

最新推荐文章于 2025-06-30 10:46:35 发布

阅读量3.3k

点赞数 42

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/imdeity/article/details/139550549

第二章：环境搭建

本章将详细介绍如何搭建 Three.js 的开发环境，包括安装 Node.js 和 npm，配置 Three.js 项目，以及在 HTML 中引入 Three.js。

2.1 安装 Node.js 和 npm

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。npm 是 Node.js 的包管理工具，用于安装和管理 JavaScript 库和工具。

2.1.1 安装 Node.js

打开 Node.js 官网 nodejs.org。
下载并安装适合你操作系统的最新稳定版（LTS 版本）。
安装完成后，在命令行中输入以下命令，验证安装是否成功：
```
node -v
npm -v
```
如果正确安装，会显示 Node.js 和 npm 的版本号。

2.1.2 安装 npm 包

npm 包是 Node.js 的核心组成部分，可以通过 npm 轻松安装和管理项目依赖。

创建一个新的项目文件夹，例如 threejs-project。
```
mkdir threejs-project
cd threejs-project
```
初始化 npm 项目，生成 package.json 文件：
```
npm init -y
```
安装 Three.js：
```
npm install three
```

2.2 Three.js 的安装与配置

Three.js 可以通过 npm 安装，也可以直接在 HTML 中引用。我们将介绍这两种方法。

2.2.1 使用 npm 安装 Three.js

在上一步已经安装了 Three.js，现在我们可以配置项目结构。

创建项目结构：

mkdir src
touch src/index.html
touch src/main.js

配置 src/index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Project</title>
</head