2、环境搭建：Node.js安装、Vite构建工具、创建第一个Three.js项目、项目结构解析

好，咱们正式开始动手了。

这一章说白了就是「把枪擦亮」。你想想看，再厉害的3D交互，也得有个能跑起来的窝。我见过太多同学卡在环境搭建这一步，代码写好了，一运行报一堆红字，心态直接崩了。所以咱们稳一点，一步步来。

2.1 Node.js 安装——你的工具箱

Three.js 项目依赖 Node.js 环境。为什么？因为我们需要用它自带的 npm（Node Package Manager）来下载和管理各种库。

安装步骤很简单：

1. 打开 nodejs.org，下载 LTS 版本（长期支持版）。我个人习惯用 LTS，稳定，不会半夜更新搞事情。
2. 双击安装，一路 Next。记得勾选「Add to PATH」。
3. 打开终端（CMD 或 PowerShell），输入：

node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就成了。

2.2 Vite 构建工具——为什么选它？

以前我们用 Webpack，配置起来能写一本书。Vite 不一样，它「快」——开发服务器秒启动，热更新几乎无感。

说白了，Vite 就是让你把精力放在写代码上，而不是等编译。

安装 Vite 有两种方式：

• 全局安装：npm install -g vite（不推荐，容易版本冲突）
• 项目内安装：用 npm create vite@latest 脚手架（推荐）

我个人习惯用脚手架，干净利落。咱们接下来就用它。

2.3 创建第一个 Three.js 项目

好，开始动手。打开终端，找个你喜欢的目录，比如 D:\projects，然后执行：

npm create vite@latest my-three-app -- --template vanilla

这里解释一下：

• my-three-app 是项目名，你可以随便改。
• --template vanilla 表示用纯 JavaScript 模板，不加框架。Three.js 本身不依赖 React 或 Vue，所以 vanilla 最轻量。

然后进入项目目录，安装依赖：

cd my-three-app
npm install

接着安装 Three.js 核心库：

npm install three

现在，打开 main.js，把里面的内容全部删掉，换成咱们的 Three.js 入门代码：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

然后在终端运行：

npm run dev

你会看到终端输出一个本地地址，比如 http://localhost:5173。打开浏览器，一个绿色的旋转立方体就出现了。

2.4 项目结构解析

咱们来看看 Vite 生成的这个项目，里面都有啥：

文件/文件夹	作用
index.html	入口 HTML 文件。Vite 会把 JS 自动注入到这里。
main.js	JavaScript 入口文件。咱们的 Three.js 代码就写在这里。
package.json	项目配置文件。记录了依赖、脚本命令等。
node_modules/	所有安装的第三方库都放在这里。别手动改它。
vite.config.js	Vite 的配置文件。目前用默认的就行，后面咱们会改。
public/	静态资源文件夹。放图片、模型文件等。

你可能会问：「为什么没有 style.css？」其实 Vite 模板里也有，但咱们做 Three.js 项目，样式通常由渲染器控制，CSS 用得少。不过留着也无妨，后面做 UI 叠加时会用到。

2.5 避坑指南

嗯，这里有几个坑，我当年都踩过：

• 端口被占用：如果 npm run dev 报端口冲突，可以改 vite.config.js 加一行 server: { port: 3000 }。
• Three.js 版本问题：不同版本 API 可能有细微差异。建议锁定版本，在 package.json 里写成 "three": "^0.160.0" 这样。
• 浏览器缓存：改了代码页面没反应？试试强制刷新（Ctrl+F5）或者清一下缓存。Vite 的热更新一般没问题，但偶尔抽风。

好了，环境搭好了，项目也跑起来了。下一章咱们开始真正玩转 Three.js 的核心概念——场景、相机、渲染器。到时候你会明白，那个绿色立方体只是冰山一角。

公众号:蓝海资料掘金营，微信deep3321