Three.js自学笔记：1.环境搭建

一、下载VSCode

1.官网网址

https://code.visualstudio.com/

2.切换中文

按下 Ctrl + Shift + X（或点击左侧方块图标）打开扩展面板，在搜索框里输入

Chinese

找到 "Chinese (Simplified) Language Pack for Visual Studio Code" 并点击 Install。
安装完成后，右下角会弹出一个提示框，点击 Restart（重启）即可变成中文界面。

如果重启后仍是英文，再手动切换一次：

按下 Ctrl + Shift + P → 输入 Configure Display Language → 选择 zh-cn → 重启 VSCode。

3.Live Server：写完 HTML 一键跑本地服务器，防止 `file://` 跨域。

4.Three.js Snippets：敲 `three` 自动补全常用代码。

二、下载Node.js

Node.js 官网 https://nodejs.org

页面中间会看到两个大按钮：
- 左边 LTS（Recommended For Most Users）
- 右边 Current
选左边 LTS，鼠标点击它。

下载安装包

浏览器自动开始下载文件，名字类似
node-v24.13.0-x64.msi

双击运行安装包

弹出「Node.js Setup」向导 → 点 Next。
勾许可协议

「I accept ...」打勾 → Next。
选择安装目录

默认 C:\Program Files\nodejs\ 即可 → Next。
选择组件

保持 全部打勾 （默认已含 npm）→ Next。
自动装 Chocolatey 提示

向导最后一页可能出现「Automatically install ... Chocolatey」

这个 不用勾 ，直接 Next → Install。

等进度条走完 → Finish。

验证是否成功

Win + R 输入 cmd 回车，依次输入：
复制代码
```
node -v
npm -v
```
只要两行都能输出版本号（如 v20.18.1、10.8.2），说明装好了。

三、新建

把终端默认改为cmd

菜单 文件(File) → 首选项(Preferences) → 设置(Settings) → 搜索框输入

terminal integrated default profile

在 "Windows" 下拉框里选 Command Prompt，关掉设置页，再开新终端就永远是 cmd 了。

VSCode 内置终端：菜单栏「终端 › 新终端」

注：npm init -y 会拿当前文件夹名字 当作默认的 package.json 里的 "name" 字段，而中文"用户"不是合法 npm 包名（只能英文字母、数字、连字符）。

先回到根目录（或任意英文路径）再建文件夹：

cd
mkdir three-start
cd three-start
npm init -y

在同一窗口接着敲：

复制代码

npm install three

等进度条跑完出现类似：

added 1 package, and audited 2 packages in 2s

就说明 Three.js 安装完成，可以继续：

在 VSCode 打开当前文件夹

终端里直接输入：

复制代码

code .

就会用 VSCode 打开 C:\three-start。

在 THREE-START 根目录（和 package.json 同级）点 「新建文件」 图标：

① 取名 index.html → 把下面内容整段贴进去 → Ctrl+S 保存：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 起步</title>
  <style>body{margin:0;overflow:hidden}</style>
</head>
<body>
  <!-- 1. 先加载 three 的 ES 模块并挂到全局 -->
  <script type="module">
    import * as THREE from './node_modules/three/build/three.module.js';
    window.THREE = THREE;
  </script>

  <!-- 2. 再加载我们自己的脚本 -->
  <script type="module" src="./main.js"></script>
</body>
</html>

② 再新建 main.js → 贴：

javascript 复制代码

// 从全局拿 THREE，不再 import 裸包名
const THREE = window.THREE;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);   // 黑色背景，防止白屏误判

const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

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

// 窗口大小适配
addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

保存后，在 index.html 上 右键 → Open with Live Server ，浏览器弹出 http://127.0.0.1:5500/ 看到旋转绿色立方体就完成