2、开发环境搭建：Node.js与npm安装、VS Code配置、本地服务器搭建、浏览器开发者工具
好，咱们正式开始动手了。这一章我带你搭好开发环境。别小看这一步，我见过太多同学卡在环境配置上，一卡就是半天，心态直接崩了。其实说白了，就是几个工具的安装和配置，走一遍流程，后面就顺了。
2.1 Node.js 与 npm 安装
Node.js 是什么？你可以把它理解成一个「让 JavaScript 能在电脑上跑」的环境。我们做 3D 网页交互，很多工具和库都依赖它。npm 是 Node.js 自带的包管理器，用来下载和管理各种代码库。
第一步：下载 Node.js
去官网 nodejs.org，下载 LTS 版本。LTS 是长期支持版，稳定，适合生产环境。我个人习惯用 LTS，不会追新，因为新版本有时候会踩坑。
第二步：安装
双击安装包，一路 Next 就行。注意勾选「Add to PATH」，这样你才能在命令行里直接使用 node 和 npm 命令。
第三步：验证安装
打开终端（Windows 用 cmd 或 PowerShell，Mac 用 Terminal），输入：
node -v
npm -v如果能看到版本号，比如 v18.16.0 和 9.5.1，那就说明安装成功了。嗯，这里要注意，版本号可能不一样，只要不是报错就行。
我曾经遇到过一个问题：安装完 Node.js 后，在终端输入 node -v 提示「不是内部或外部命令」。这是因为安装时没有勾选「Add to PATH」。解决办法很简单：卸载重装，记得勾上那个选项。或者手动配置环境变量，但新手不建议折腾。
2.2 VS Code 配置
编辑器我推荐 VS Code，免费、轻量、插件丰富。做 3D 开发，它绝对够用。
下载与安装
去 code.visualstudio.com 下载对应系统的版本。安装过程没什么特别的，一路 Next 就行。
必装插件
安装完成后，打开 VS Code，点击左侧的扩展图标（或者按 Ctrl+Shift+X），搜索并安装以下几个插件：
| 插件名称 | 作用 |
|---|---|
| Live Server | 一键启动本地服务器，支持热更新 |
| Prettier | 代码格式化，让代码更整洁 |
| ESLint | JavaScript 语法检查，帮你发现潜在错误 |
| JavaScript (ES6) code snippets | 代码片段，提高编码效率 |
我个人习惯还会装一个 Material Icon Theme，让文件图标更好看。你想想看，每天对着编辑器，视觉舒服一点，心情也会好一些。
基本配置
按 Ctrl+Shift+P，输入「settings」，打开设置 JSON 文件。我建议你加上这几行：
{
"editor.fontSize": 16,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"prettier.singleQuote": true,
"prettier.semi": false
}字体大小 16 是我个人习惯，年纪大了，小字看着累。自动保存也很重要，我吃过亏，写了一大段代码忘了保存，结果浏览器刷新还是旧版本，排查了半天才发现是没保存。
2.3 本地服务器搭建
做 3D 网页交互，你不能直接双击 HTML 文件打开。因为很多 3D 库（比如 Three.js）需要加载外部资源，直接打开文件会触发跨域问题。说白了，就是浏览器不允许本地文件访问其他文件。
方法一：使用 Live Server（推荐）
安装好 Live Server 插件后，在 VS Code 里打开你的项目文件夹，右键点击 HTML 文件，选择「Open with Live Server」。浏览器会自动打开，地址栏显示的是 http://127.0.0.1:5500 这样的格式。
这个方法的优点是：你修改代码后，浏览器会自动刷新，不用手动按 F5。我在项目中经常用，效率提升很明显。
方法二：使用 Node.js 的 http-server
如果你不想用 VS Code 插件，也可以用命令行。打开终端，输入：
npm install -g http-server安装完成后，进入你的项目目录，运行：
http-server终端会显示一个本地地址，比如 http://192.168.1.100:8080，复制到浏览器打开就行。
如果你用的是 Mac 或 Linux，还可以用 Python 自带的服务器：
python -m http.server 8000。一行命令就搞定，不需要安装任何东西。
2.4 浏览器开发者工具
浏览器开发者工具，简称 DevTools，是我们调试 3D 页面的利器。我敢说，一个不会用 DevTools 的前端，不是一个合格的前端。
打开方式
在 Chrome 或 Edge 中，按 F12 或 Ctrl+Shift+I 就能打开。Mac 用户按 Cmd+Option+I。
常用面板
| 面板名称 | 作用 |
|---|---|
| Elements | 查看和修改 HTML 结构、CSS 样式 |
| Console | 查看日志、运行 JavaScript 代码 |
| Sources | 调试 JavaScript 代码，设置断点 |
| Network | 查看网络请求，分析资源加载情况 |
| Performance | 分析页面性能，找出卡顿原因 |
3D 开发最常用的功能
做 3D 交互时，Console 面板用得最多。你可以在代码里写 console.log() 输出变量值，看看数据对不对。也可以直接在 Console 里输入代码测试，比如：
// 查看 Three.js 场景中的物体数量
scene.children.length
// 查看相机的位置
camera.position为什么会这样？因为浏览器会实时执行你输入的代码，结果立刻显示出来。调试效率非常高。
还有一个功能我经常用：在 Elements 面板中，选中一个 3D 画布（canvas 元素），右键选择「Break on」→「attribute modifications」。这样当画布的属性被修改时，代码会暂停，你可以看到是谁修改了它。这个技巧帮我解决过好几次「画布突然变黑」的 bug。
- Node.js 和 npm 是基础，安装后记得验证版本号
- VS Code 装好 Live Server、Prettier 等插件，配置自动保存
- 本地服务器用 Live Server 最方便，避免跨域问题
- 浏览器 DevTools 的 Console 和 Elements 面板是调试主力
好了，环境搭好了，下一章我们开始写第一个 3D 页面。到时候你会看到，一个简单的立方体在浏览器里旋转起来，那种成就感，嗯，我到现在还记得第一次跑通 Three.js 示例时的心情。