Three.js 安装指南：五种方式对比与首个3D场景实战

1. 项目概述

1.1 这个"THREE 安装"到底是要干什么

先说结论：这个项目名里的 THREE，大概率不是指某个叫"THREE"的软件，而是 Three.js——目前前端 3D 领域使用率最高的 JavaScript 3D 图形库。你要是去 GitHub 搜"THREE 安装"，十有八九跳出来的都是 Three.js 的仓库地址、安装文档、CDN 引用示例。

项目正文是空的，关键词只有一个 THREE，但"安装"两个字已经把需求指向说得比较清楚了：这应该是一个面向 Web 开发者、想在浏览器里跑 3D 场景、但是不知道从哪一步开始入手的人，或者是团队里负责搭项目初始环境的同学。你需要的不是再去看一遍 Three.js 官方文档那长长的目录，而是有人直接告诉你：装它到底有几种方式、每种方式适合什么场景、装完之后怎么写第一行能跑起来的代码。

顺便说一句，开头热词里那串"concierto de aranjuez hiderto kanai quintet three blind mice tmb cd"，看着挺玄乎，其实拆开就是《阿兰胡埃斯协奏曲》、Hiromu Kanai 五重奏、Three Blind Mice 这张经典爵士唱片，TMB 是厂牌缩写。这些跟 Three.js 没什么直接关系，但说明"THREE"这个词在不同语境里指代的东西差别极大——如果你搜"THREE 安装"看到的结果不是 JS 库，而是某张爵士 CD 的安装包，别慌，你点错了。

这篇文章我就按 Three.js 来写，从零开始，把安装和第一个 Demo 跑通的完整路径给你捋一遍，顺带把我实际踩过的坑和总结出的选型逻辑都交代清楚。

1.2 你能从这篇文章里拿到什么

• 搞清楚 Three.js 安装的 5 种方式，以及每种方式分别适合什么水平的开发者、什么类型的项目
• 掌握 npm 装包、Vite 搭项目、CDN 引用的具体操作步骤，并理解每一步为什么要这么做
• 知道装完之后怎么写第一段可运行的 Three.js 代码，而不是光装了个包却不知道从哪下手
• 收获我在实际项目中反复踩过的坑：版本兼容问题、模块化引入的差异、打包体积控制、坐标系调半天发现是镜像的经典翻车现场
• 如果你是纯新手，这篇文章能让你在半小时内跑起来第一个 3D 页面；如果你有基础，可以直接跳到第 4 章看问题排查

2. 选型思路：到底该用哪种方式装 Three.js

2.1 五种安装方式横向对比

在动手之前，建议你先花两分钟想清楚一件事：你的项目到底长什么样。这个决定直接影响到你该选哪种安装方式，选错了后面会绕不少弯路。我把常见的五种方式列成一张表，好坏一目了然。

这里面最值得展开说的是第三行和第四行，因为它们其实是同一条路线——用 npm 安装 Three.js，然后在代码里以 ES Module 方式引入。所谓"模块化按需引入"，本质上是 npm 安装之后的一种高级用法，依赖打包工具帮你做 tree shaking，把没用到的部分从最终产物里剔除掉。

2.2 为什么我更推荐 npm + Vite 这条路线

我个人的建议是：如果你要做的不是那种一次性测试页，而是正经想要长期维护的 3D 项目，直接上 npm + Vite。理由有三个。

第一，依赖管理是真正省心的地方。Three.js 的版本迭代速度不慢，从 r150 到现在的 r160+，API 时不时有调整。用 npm 装，你可以在 package.json 里锁定版本，升级时看 changelog 决定要不要动。用 CDN，你今天写的代码可能三个月后就因为版本更新挂掉了，排查问题时你会陷入一种"代码没问题但结果不对"的抓狂状态。

第二，模块化引入能帮你控制包体积。Three.js 整个库压缩后大概 600KB 左右，看着不大，但如果你只是做一个展示 3D 模型的页面，把整个库全部打进 bundle 里就显得笨重了。配合 Vite，你写import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'这种按需导入，最终打包时 tree shaking 会把没用的模块扔掉，体积能降一个量级。

第三，Vite 的开发服务器体验确实很好。文件改了浏览器秒级热更新，3D 调试时你频繁调参数、换贴图、改光照，这种即时反馈的效率提升非常明显。相比之下，传统方式改一次刷新一次，来回折腾的挫败感很强。

当然，如果你是纯新手，第一次接触 Three.js，连 npm 都没装过，那也别怕。第 3 章我会从最基础的 Node.js 环境准备开始带，每一步都会交代清楚。

3. 实操准备：环境搭建与依赖处理

3.1 安装 Node.js 和 npm

走 npm 路线，第一步是确保本机有 Node.js 环境。这个不需要折腾太久，但有两个容易忽略的细节我提醒一下。

第一，去 nodejs.org 下载 LTS 版本。LTS 是长期支持版，稳定性优先。不要为了尝鲜装最新的 Current 版本，Three.js 本身对 Node 版本没有特别苛刻的要求，但周边工具链、Vite 对 Node 版本是有下限的，稳妥起见用 LTS 不会错。

第二，装完之后，在终端里跑一下这两个命令确认环境正常：

node -v npm -v

能打印出版本号就说明环境 OK。如果提示node: command not found，多半是安装时没把 Node 加入 PATH，Windows 用户可以把安装目录下的路径手动加进环境变量，macOS/Linux 用户检查一下有没有用 nvm 管理版本时没切换成功。

3.2 用 Vite 快速搭建一个前端项目

我个人建议用 Vite 而不是手动初始化 npm 项目，原因是 Vite 帮你做完了大部分配置工作，你只需要专注于 Three.js 本身。执行下面这行命令：

npm create vite@latest three-demo -- --template vanilla

这里解释一下：three-demo是项目名，vanilla代表纯 JavaScript 模板，不带框架。如果你要用 React，就把模板换成react。命令跑完会出现项目结构，然后进目录装依赖：

cd three-demo npm install

npm install会按照 package.json 里的依赖声明，把项目所需的所有包下载到node_modules目录。装完以后，项目结构大概是这样的：

three-demo/ ├── index.html # 页面入口 ├── package.json # 项目配置与依赖声明 ├── src/ │ ├── main.js # 主逻辑代码 │ └── style.css # 样式 └── node_modules/ # 已安装的依赖

这套流程跟 Three.js 本身没有任何耦合，你甚至可以理解为：Vite 先帮你把"能跑起来的 Web 前端"搭好了，Three.js 只是后面塞进来的一个模块。

3.3 安装 Three.js 本体

在项目根目录执行：

npm install three

这条命令的作用是把 Three.js 写入dependencies，同时下载到本地。装完可以在package.json里看到"three": "^0.160.0"之类的版本号。注意，^符号表示允许安装次版本更新，比如 0.160.x，但不允许跨大版本。如果你希望完全锁定版本，可以把依赖改成：

"three": "0.160.0"

然后在src/main.js里引入：

import * as THREE from 'three'

这里的THREE是一个命名空间对象，所有 Three.js 的核心类都挂在它下面。你会在后续代码里频繁用到THREE.Scene、THREE.PerspectiveCamera、THREE.WebGLRenderer、THREE.BoxGeometry等等。

3.4 补充：CDN 方式到底适不适合你

如果你只是想在本地写一个 HTML 文件，双击打开就看效果，不想装 Node、不想建项目，那么 CDN 方式确实是最快的路径。经典写法是这样的：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Three.js CDN 示例</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three' // 在这里写你的场景代码 </script> </body> </html>

注意这里我用了一个叫importmap的技术，它让浏览器能够把import * as THREE from 'three'里的three映射到实际 CDN 地址。这个写法是官方文档推荐的，比旧版那种three.min.js全局脚本引用更符合现代模块规范。但它的限制也很明显：依赖 unpkg 或者 jsdelivr 这类公共 CDN 的稳定性和访问速度，如果你所在网络环境访问这些 CDN 不顺畅，那么本地打开这个 HTML 文件时 3D 场景就会白屏。所以我的建议是：CDN 适合快速验证，正式项目还是老老实实用 npm。

4. 第一个可运行的 3D 场景：从零到旋转立方体

4.1 理解 Three.js 四大核心概念

在写代码之前，必须先把那四个绕不开的核心对象理解到位，否则你抄了代码也不知道自己在干嘛，遇到问题更无从排查。

Three.js 渲染一个 3D 场景，本质上跟拍电影一个道理。你架好一部摄像机，对准演员站的位置，打上灯光，然后按下快门。对应到代码里，就是四样东西：

• 场景（Scene）：相当于舞台，所有物体都必须放进场景里才能被渲染
• 摄像机（Camera）：相当于人的眼睛或镜头，决定了你从哪个角度、距离去观察场景
• 渲染器（Renderer）：相当于放映机，负责把场景和摄像机结合后的画面绘制到屏幕上
• 物体（Mesh）：就是演员本身，由几何体（Geometry）决定形状，材质（Material）决定外观

如果你把这四个概念先理清，再去看官方文档，会轻松很多。很多新手一上来就抄示例代码，然后把摄像机往奇怪的方向调整，结果看到一个黑洞洞的屏幕，然后开始怀疑人生。其实多半是因为摄像机放在了物体背面，或者光照没有打到物体正面。

4.2 编写你的第一个场景代码

在src/main.js里写入以下完整代码。我特意加了注释，每行都说明在干什么，方便你跟着理解：

import * as THREE from 'three' // 1. 创建场景 const scene = new THREE.Scene() // 2. 创建摄像机 // 参数依次是：视角宽度、宽高比、近裁面、远裁面 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) // 把摄像机往后拉，让物体出现在视野里 camera.position.set(0, 0, 5) // 3. 创建渲染器 const renderer = new THREE.WebGLRenderer() // 设置渲染尺寸为窗口大小 renderer.setSize(window.innerWidth, window.innerHeight) // 把 canvas 加入页面 document.body.appendChild(renderer.domElement) // 4. 创建一个立方体 // 几何体：1x1x1 的立方体 const geometry = new THREE.BoxGeometry(1, 1, 1) // 材质：基础材质，蓝色 const material = new THREE.MeshBasicMaterial({ color: 0x00aaff }) // 网格：把几何体和材质组合起来 const cube = new THREE.Mesh(geometry, material) // 把立方体加入场景 scene.add(cube) // 5. 动画循环（替换了原先的静态渲染，让场景动起来） function animate() { // 让立方体绕 x 轴和 y 轴旋转 cube.rotation.x += 0.01 cube.rotation.y += 0.01 // 用摄像机渲染出当前场景 renderer.render(scene, camera) // 请求浏览器在下一帧继续执行 requestAnimationFrame(animate) } animate()

有一说一，这一段代码已经足够让你的 3D 场景跑起来了。用户在浏览器里能看到一个不断旋转的蓝色立方体，背景是默认的黑色。

代码里的requestAnimationFrame是浏览器提供的一个 API，它会在每一帧刷新前调用你传入的函数。3D 动画的本质就是每一帧渲染一张画面，每秒 60 帧就形成了连续动画。你把它理解成：每秒钟告诉浏览器"该画下一张了"。

4.3 跑起来的三种方式

方式一：直接在终端运行npm run dev。Vite 会启动一个本地开发服务器，通常地址是http://localhost:5173，浏览器打开这个地址就能看到你的 3D 场景。

方式二：如果你想先看构建效果，运行：

npm run build

Vite 会把代码打包到dist/目录，然后可以用npm run preview本地预览构建产物。实际部署时，把dist/目录放在你的 Web 服务器上就行。

方式三：如果你是纯 CDN 用户，把我前面那节 importmap 的代码保存成.html文件，浏览器打开即可，不需要任何构建步骤。但如果页面白屏，优先检查网络能不能访问 unpkg。

4.4 从立方体到真实项目：你下一步该加什么

立方体只是起点。真实项目要做的事情比这多得多，我列一下后续必然会遇到的几个模块，你可以按需学习：

• 灯光：MeshBasicMaterial是不受光照影响的，你看到蓝色立方体是因为它自身发光。换成MeshStandardMaterial之后，没有灯光就是全黑。需要的灯光类型包括AmbientLight、DirectionalLight、PointLight
• 相机控制：默认视角是固定的，用户没法拖拽旋转观察。给场景加上OrbitControls，用户就能用鼠标拖拽、滚轮缩放，这是 3D 展示项目最常用的交互方式
• 加载外部模型：真实场景哪有那么多纯几何体，项目基本都是导入 glTF 格式的模型文件，用GLTFLoader加载
• 纹理贴图：给物体表面贴上图片材质，用TextureLoader加载纹理图片

这些模块有一个共同点：都需要额外引入。比如OrbitControls不是three包里的核心，你需要在three/addons/下找对应的模块。下面展示一下在 Vite 项目里怎么用：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js' // 创建轨道控制器 const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true // 开启阻尼效果，转动更顺滑

注意，这里的引入路径是three/addons/...而不是three/...，这是 r148 版本之后的推荐写法。如果你在网上搜到老教程用three/examples/jsm/...，也不是不能跑，但建议统一用three/addons/，因为官方已经改了目录结构。

5. 常见问题与排查技巧实录

5.1 控制台报错：Cannot find module 'three'怎么办

这个错误最常见的两个原因是：你在项目根目录之外的地方运行了代码，或者 npm 依赖没装完整。

排查步骤先看终端里有没有node_modules和package.json。确认package.json里有没有"three"。如果没有，回到项目根目录执行npm install three。如果依赖确实装了但还是报错，那大概率是你代码文件的路径不对，检查你的import * as THREE from 'three'是不是写在src/下的 JS 文件里，而不是随便建个目录放进去。

老实说，这类问题绝大多数是新手期必经的坎。我的建议是，遇到报错先不要急着改代码，把终端里的报错信息完整读一遍，它通常会告诉你具体的文件路径和问题位置。程序员调试 70% 的时间是在学会读报错。

5.2 页面白屏，但是没有任何报错

这是 3D 项目最高频的翻车现场之一。如果你在浏览器里打开页面看到一片空白，F12 打开开发者工具的 Console 也没报错，按这个顺序排查：

第一，检查有没有把renderer.domElement添加到页面上。这个很常见，你写了const renderer = new THREE.WebGLRenderer()，也设置了尺寸，但忘了把 canvas 加到body里。解决办法是一行代码：document.body.appendChild(renderer.domElement)。

第二，检查相机的位置和朝向。摄像机默认在坐标原点(0, 0, 0)，你创建的物体也默认在原点(0, 0, 0)，那摄像机和物体重合，什么都看不见。你要把相机往后拉，比如camera.position.set(0, 0, 5)，这就相当于人往后退了两步再看向舞台。

第三，检查宽高比。如果你把相机宽高比设为window.innerWidth / window.innerHeight，但渲染器尺寸和页面 CSS 没有对应，画面可能被拉伸或者只显示一部分。确保渲染器尺寸与窗口一致。

5.3 模型镜像、坐标错乱：坐标系你搞对了吗

这是我从实际项目里总结出来的、最容易让人怀疑人生的坑。Three.js 使用右手坐标系，X 轴向右，Y 轴向上，Z 轴向屏幕外方向，也就是朝向你自己。如果你在模型编辑软件（比如 Blender 或 3ds Max）里用的坐标系不一致，导入模型后就会出现镜像、旋转偏移等问题。

我踩过的一次实际操作是：从某平台下载了一个 glTF 模型，导入后模型是倒着的，并且前后翻转。排查了很久才发现是制作平台导出时用的是左手坐标系，Z 轴方向刚好相反。解决办法是在导出时统一坐标系，或者在导入后用代码旋转模型，比如model.rotation.y = Math.PI。

另外要提醒一句：如果你发现模型旋转的方向跟预期相反，检查一下是不是有的项目里把网格模型套了一层组导致坐标系叠加变复杂。调试时可以把场景里的模型逐个console.log打印其position、rotation、scale，用这些值来对照判断问题出在哪一层。

5.4 打包体积太大，性能卡顿

Three.js 本身不卡，卡往往是渲染方式问题或者模型面数太高。如果你的 CPU/GPU 占用很高，逐项排查：

• 模型的三角面数：一个模型如果有几十万面，在低端设备上会很吃力。可以考虑用模型减面工具或者更换低模版本
• 渲染器像素比：把渲染器的像素比设为合理的值。默认window.devicePixelRatio在 Retina 屏幕上可能是 2，甚至更高，渲染负荷会大。建议设置上限：

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

• 光源数量：每增加一个光源，渲染器都要做一次额外的光照计算。能用AmbientLight和DirectionalLight组合解决的需求，就不要堆十个点光源
• 动画循环：如果场景静止，不一定需要requestAnimationFrame持续跑。可以只在用户交互或需要更新的帧里调用renderer.render，能省不少 CPU

5.5 版本升级导致 API 变动

Three.js 的版本更新频率其实蛮高，一些 API 在几个月内就可能调整。典型的例子是 r148 之后outputEncoding、gammaOutput相关属性和three/examples/jsm路径的调整。升级版本后如果代码突然跑不起来，去官方迁移指南里面搜一下对应的改动说明。

这里有个实用建议：升级前先看一下官方 changelog 里有没有 breaking changes，或者去 GitHub 的 release notes 页面筛选对应版本。我一般在升正式版本之前会先在分支上做一次升级测试，跑通所有关键功能再合并到主分支，这个习惯帮我避免了好几次线上事故。

6. 官方 Addons 资源地图与扩展能力

6.1 你不知道的官方扩展库

Three.js 的核心包本身只包含基础功能，但官方维护了一套 addons 扩展，放在 npm 包名three的addons/目录下，相当于给了你一整套官方插件库。很多人只知道用OrbitControls，没法想象这套扩展里还有多少好东西。我挑几个高频使用的列一下：

// 轨道控制器：拖拽旋转、缩放视角 import { OrbitControls } from 'three/addons/controls/OrbitControls.js' // 加载 glTF 模型 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' // 加载 OBJ 模型 import { OBJLoader } from 'three/addons/loaders/OBJLoader.js' // 高性能文字渲染 import { TextGeometry } from 'three/addons/geometries/TextGeometry.js' // 引入外部字体 import { FontLoader } from 'three/addons/loaders/FontLoader.js' // 渲染天空盒 import { Sky } from 'three/addons/objects/Sky.js' // 后期处理特效：发光、模糊、颜色校正 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'

这些 addons 的使用逻辑和核心包一致：引入 → 实例化 → 传入参数 → 添加到场景或渲染管线。注意一点，addons 目录里的模块大多数都带了自己的依赖，引入时无需手动管理，npm 会自动解析，但个别模块（比如TextGeometry依赖字体 JSON 文件）需要额外准备资源。

6.2 用 OrbitControls 提升交互体验

如果你希望用户能够通过鼠标拖拽来旋转物体，或者滚轮缩放视角，OrbitControls 的加入非常简单。完整示例是这样的：

import * as THREE from 'three' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) camera.position.set(0, 0, 5) 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.MeshStandardMaterial({ color: 0x00aaff, metalness: 0.3, roughness: 0.4 }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) // 添加灯光 const ambientLight = new THREE.AmbientLight(0xffffff, 0.6) scene.add(ambientLight) const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8) directionalLight.position.set(1, 1, 1) scene.add(directionalLight) // 创建 OrbitControls const controls = new OrbitControls(camera, renderer.domElement) // 开启阻尼效果，让视角转动有惯性，更自然 controls.enableDamping = true controls.dampingFactor = 0.05 // 动画循环 function animate() { requestAnimationFrame(animate) // 使用阻尼时必须每帧更新 controls，否则阻尼效果不生效 controls.update() renderer.render(scene, camera) } animate()

注意我把材质换成了MeshStandardMaterial，因为 BechBasic 材质不接收光照，你加再多灯也没变化。加了金属度和粗糙度参数之后，立方体才有立体感和明暗变化，观感上完全不一样。

再来一个比较容易在调试中发现的操作细节：controls.enableDamping = true开启后，必须每帧调用controls.update()。如果你忘了这一行，不仅没有阻尼效果，旋转时视角还会出现异常跳动。我第一次用的时候没太在意这个细节，结果调试了大半天。

6.3 从零到模型展示：加载外部 glTF 文件

真实项目最常见的需求是把一个设计好的模型文件加载进来展示，比如产品经理给你一个.glb文件，让你放到页面上。用GLTFLoader处理，代码长这样：

import * as THREE from 'three' import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100) camera.position.set(3, 2, 5) const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.shadowMap.enabled = true document.body.appendChild(renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true // 加载 glTF 模型 const loader = new GLTFLoader() loader.load('./models/model.glb', (gltf) => { const model = gltf.scene scene.add(model) }, undefined, (error) => { console.error('模型加载失败', error) }) // 光照、动画循环省略，逻辑同前

loader.load的四个参数分别是：文件地址、成功回调、进度回调、失败回调。加载成功回调里，gltf.scene就是模型的场景对象，直接添加进你自定义的scene。

有一点必须写在前面：在 Vite 项目里，如果模型文件放在public/目录下，那么引用路径是/models/model.glb；如果放在src/里，需要通过 import 导入或者配置静态资源处理，路径会不同。新手常常在这一步搞乱路径，模型加载失败，白屏。最简单的方式，是把模型文件放到public/models/下，这样既不需要额外配置，也不会被 Vite 转译破坏二进制文件。加了一层antialias: true开启抗锯齿，能明显减少模型边缘的锯齿感。

7. 经验总结与踩坑心得

7.1 从安装到项目落地的完整建议

讲了这么多，最后把重点浓缩成几条实操建议。你要是照着做，基本能避开我当初走过的绝大多数弯路。

第一，刚上手时别一上来就上重型框架。我见过不少新手拿着 think 框架、egg 框架之类的概念往项目里套，结果把大量精力耗在探索框架本身，而不是 3D 渲染逻辑上。我的建议是：先用 Vite + 原生 Three.js 把项目跑起来，理解核心概念，再按需引入 React Three Fiber 之类的上层框架。

第二，版本管理要养成习惯。package.json里的依赖版本尽量明确，不要全都是^符号。团队协作时尤其要统一版本，否则你这边跑得好好的，同事一升级拉你代码，报了一堆不明错误。建议团队内约定依赖锁定方式，或者用 lockfile 保证安装版本一致。

第三，写代码时把"可维护性"放在心上。3D 项目很容易累积大段不可读的初始化代码。建议从一开始就把场景、相机、渲染器、控制器拆成独立模块，用函数封装创建过程，后续调试、替换逻辑都顺手得多。

7.2 性能优化从装包那一刻就开始

很多人以为性能优化是项目后期的事，其实从安装阶段就埋下了伏笔。给你三个可执行的小建议：

• 用 npm 安装时留意three包的体积，如果只是做简单 3D 展示，考虑用 CDN 还是按需引入，把你的选择写明在项目 README 里，方便交接
• 客户端渲染 3D 对设备性能要求不低，做移动端项目时建议优先用 WebGL 渲染器而不是 CSS3DRenderer 这类特殊渲染方案，摸清不同渲染器的适配范围再决定
• 如果你需要加载大量模型，考虑用DRACOLoader进行模型压缩，配合.glb格式能把模型体积压缩到原来的几分之一。这个技术在电商 3D 展示场景里尤其常见

7.3 最后一次总结我的体会

我在刚开始研究 Three.js 安装的时候，一度怀疑是不是哪个步骤做错了，因为不同的博客写的流程各不相同，有说用 CDN 的，有说用 Webpack 的，又说用 Vite 的。这些其实都没错，只是对应了不同的项目阶段和使用场景。

安装一个库这件事，看起来是最简单不过的前置步骤，但它实际撑起了整个项目的地基。选对安装方式、理清引入机制，之后写场景、加光照、调交互，都是在确认地基牢固的基础上垒砖盖墙。如果你正在为"Three 安装"发愁，不必过度焦虑，按这篇文章的路径走一遍，把第一个旋转立方体跑起来，你对 Three.js 的信心就建立起来了。

最后再分享一个小技巧：在成功跑起立方体之后，别急着追求花哨效果，先在控制台里打印一下renderer.info.render.triangles，看看你这一帧实际绘制了多少三角面。这个数字会伴随你整个 3D 开发生涯，当你面对"为什么卡"这类问题时，它是第一个值得检查的指标。