AI 参与说明（Agent：Codex）：本文由 Codex 根据 Three.js、Blender、Khronos 与 React Three Fiber 官方资料辅助撰写与校验，资料整理于 2026-09-08。场景选择与学习顺序是本文的实践建议。运行记录：模型
gpt-6-astra，reasoning effortultra，执行入口 Codex Desktop，提供方openai，CLI 版本0.153.4（不代表桌面 App 版本）。本次修订（2026-09-08，Agent：Codex）：将本地 HTML 运行示例改为站内可直接操作的 Astro demo，补充概念观察步骤与开篇术语参考，并同步调整学习顺序。运行记录：模型
gpt-6-astra，reasoning effortultra，执行入口 Codex Desktop，提供方openai，CLI 版本0.153.4。本次修订（2026-09-08，Agent：Grok）：关联阅读补充 Web 3D 基础概念文档。模型
grok-4.6，提供方xAI，执行入口 Grok Build TUI。
理解 Three.js 与 Blender，可以先看最终要交付什么：制作模型、产品效果图或动画，重点看 Blender；制作可以旋转、点击、换颜色的 3D 网页，重点看 Three.js。网页需要原创模型时，两者可以组成一条制作流程。
先认识本文会反复使用的几个词；中文名称用于导读，后文统一保留英文名称。
| 英文术语 | 中文名称 | 简要解释 |
|---|---|---|
| Three.js | Three.js | 帮助开发者在网页中显示和操作 3D 内容的 JavaScript 库 |
| Blender | Blender | 用可视化界面制作模型、图片与动画的软件 |
| Geometry | 几何体 | 决定一个物体的形状，例如立方体或球体 |
| Material | 材质 | 决定表面颜色以及如何响应光照等表现 |
| Camera | 相机 | 决定从哪里看物体，以及画面能看到的范围 |
| Light | 光源 | 提供照明，让表面产生明暗差异 |
| Rendering | 渲染 | 根据场景和观察条件计算最终画面的过程 |
Blender is a 3D creation suite. Three.js is a JavaScript library for rendering and interacting with 3D scenes, commonly in a web browser. 前者提供可视化创作环境，后者让开发者用代码组织和呈现 3D 内容。Blender Features · Three.js Fundamentals
从目标选择工具
下面的选择以交付内容为依据，不是对工具能力的穷举。
| 想完成的事情 | 优先使用 | 具体分工 |
|---|---|---|
| 制作一把椅子、一个角色或一间房间的 3D 模型 | Blender | 通过可视化操作调整形状、外观与结构 |
| 制作商品海报、建筑效果图或动画短片 | Blender | 安排场景、光照与拍摄角度，输出图片或视频 |
| 网页上的商品可以拖动查看、缩放、切换颜色 | Three.js；原创素材可用 Blender 制作 | Blender 提供素材，Three.js 呈现素材，网页代码处理用户操作 |
| 粒子动画、程序生成的几何造型、互动艺术页面 | Three.js | 形状与运动可以直接由代码生成，不一定需要 Blender |
| 解释机械结构、展示分子或空间数据 | Three.js；按需配合 Blender | Three.js 显示空间关系，业务代码提供数据、规则与说明 |
| 只给网页放一张 3D 风格的插图或一段固定动画 | Blender 加普通图片或视频元素 | 预先生成最终媒体后，浏览器只负责展示或播放 |
| 制作有角色控制、碰撞、关卡与存档的 3D 游戏 | 另行评估完整游戏引擎；Blender 可制作素材 | Three.js 可用于开发游戏，但整套游戏系统需要额外实现或集成 |
Three.js 的优势是把 3D 融入网页。它不会仅凭加载一个模型，就自动得到购物流程、教学逻辑或游戏规则。模型很大、Texture 很多、光照效果复杂时，还需要处理下载体积和运行性能。
Blender 的优势是创作。Modeling、Animation、Simulation 和 Rendering 都在其功能范围内；其中 Simulation 根据设定规则计算布料、流体等变化。制作 3D 内容的入门操作通常不要求编程，但仍要学习空间操作和创作方法。Blender Features
用一把椅子理解基本概念
电脑里的椅子最初是一组描述形状、外观和位置的数据。屏幕最终显示的仍是二维像素；立体感来自透视、遮挡、明暗等线索。
可以把一个 3D 场景想成摄影棚：先有椅子，再给它安排表面外观、位置、灯光与拍摄角度，最后计算画面。
| 固定名称 | 负责什么 | 椅子的例子 |
|---|---|---|
| Geometry | 描述形状的数据；在 Three.js 中通常由 BufferGeometry 及其派生类承载 | 椅背、椅面和椅腿由哪些顶点与三角形构成 |
| Material | 规定表面如何呈现，包括颜色、粗糙程度等参数 | 同样的椅子形状可以呈现木质、塑料或金属外观 |
| Texture | 给 Material 等提供图像或其他采样数据 | 木纹图片，以及随表面位置变化的粗糙度数据；不只是“贴上去的照片” |
| Mesh | 在 Three.js 中把 Geometry 与 Material 组合为可放进场景的对象 | 一条椅腿可以是一个 Mesh；整把椅子也可能由多个 Mesh 组成 |
| Scene | 组织要呈现的对象及其关系 | 椅子、地板、其他物件与 Light 组成场景 |
| Camera | 确定从哪里看、朝哪里看，以及可见范围 | 从正面看椅子，或靠近查看扶手；这里是虚拟 Camera，不是设备摄像头 |
| Light | 为会响应光照的 Material 提供照明 | 侧面照来的光让椅背与椅腿更容易分辨 |
| Rendering | 根据场景与观察条件计算画面；执行它的组件是 Renderer | 把这一刻看到的椅子绘制到网页的 Canvas 上；Canvas 是网页中用于绘图的区域 |
这些是 Three.js 官方入门教程中的核心对象关系；Three.js 还可以绘制点与线，所以并非所有可见对象都是 Mesh。Three.js Fundamentals · Three.js API Reference
Model 是日常交流中对完整 3D 素材的称呼，不一定等于一个 Mesh。一份椅子素材可以包含多个 Mesh、Material、Texture，甚至 Animation。
物体还会有位置、旋转与缩放。初学时先理解“沿某个轴移动、围绕某个轴旋转、改变大小”即可，不必先学习矩阵推导。Camera 的位置变化和物体本身的旋转也要区分：拖动查看椅子时，可以是 Camera 绕着椅子移动，椅子并没有发生形变。
Rendering 与 Animation 为什么不是一回事
Rendering produces an image from a scene and a camera. Animation changes properties over time; a rendering loop draws the updated scene repeatedly. 例如先改变椅子的朝向，再绘制一帧；持续执行，才会看到转动。Three.js Creating a scene
对使用者而言，最重要的是下面两种交付方式。
| 方式 | 画面何时计算 | 使用者能做什么 |
|---|---|---|
| 预先生成图片或视频，通常称为 Offline Rendering 工作流 | 在制作阶段计算好 | 查看图片或播放既定视频；视角与动作已经确定 |
| 随用户操作即时更新的 Realtime Rendering | 在运行时不断计算 | 自由改变视角、配置或场景，并立即看到结果 |
例如，一段椅子旋转视频只能展示预先拍好的角度；实时 3D 页面可以让用户临时低头看椅子底部。后者需要在目标设备上承担实时计算成本，前者则把大部分画面计算放在制作阶段。
Blender 自身也能实时显示和渲染场景。它的 EEVEE 使用 Rasterization，强调速度，既可用于预览，也可用于最终图像与动画；Cycles 使用 Path Tracing，常用于需要更精细光照计算的最终画面。初学时只需知道它们是 Blender 内部可选的 Render Engines，不必马上研究算法细节。Blender Render Engines
因此，“Blender 或 Three.js”与“Offline Rendering 或 Realtime Rendering”是两个不同维度。工具选择主要取决于创作方式和交付环境。
Blender 和 Three.js 怎样一起工作
假设要做一个可以换颜色的椅子商品页，流程可以分成制作、导出、加载与交互几个阶段：
flowchart TD
A["Blender<br/>制作 Model 与 Material"] --> B["glTF 或 GLB<br/>导出适合网页的素材"]
B --> C["Three.js<br/>加载素材并配置 Scene"]
C --> D["网页交互<br/>拖动查看、点击换色"]
D --> E["Renderer<br/>更新 Canvas 画面"]常见文件的用途如下：
| 文件 | 用途 |
|---|---|
.blend | Blender 工作文件，用于保存和继续编辑创作内容 |
.gltf | glTF 的 JSON 表示；可引用外部几何数据与 Texture 等资源 |
.glb | glTF 的二进制容器形式，常把模型数据与 Texture 打包为一个文件，便于分发 |
.png、.jpg 或视频文件 | 已经生成的画面，不包含供用户自由查看的完整 3D 场景 |
glTF is designed for transmitting and loading 3D assets in engines and applications. GLB is its binary container format. glTF 可以表达场景结构、几何、材质与部分动画数据；它不是把 Blender 完整运行环境搬进网页的格式。Khronos glTF · Three.js Loading a glTF file
Three.js 的 GLTFLoader 可以加载导出的素材，然后由程序安排 Camera、Light 与交互。网页上的旋转查看可以使用 OrbitControls；换颜色的按钮则修改目标 Material 的属性。GLTFLoader · OrbitControls
实际制作时需要记住三个边界：
- Blender 中的效果不保证全部导出。任意节点组合、Simulation 或 Compositing 结果未必能直接用 glTF 表达；Compositing 是把渲染结果、效果或其他影像组合成画面的过程。可用能力取决于导出器、文件使用的扩展和加载端支持范围。
- 能加载不代表画面完全相同。Material 转换、环境照明与颜色处理都会影响结果，必须在最终网页中比较外观。
- 素材需要适应交付环境。在制作电脑上能顺畅查看的内容，放到移动网页中仍可能下载慢、占内存或掉帧；应根据目标设备调整几何复杂度与 Texture 尺寸。
前两项来自格式与材质系统差异，第三项是面向实时应用的工程取舍。Blender glTF 导入导出文档
经常一起出现的词，先知道用途即可
不用把这些词全部学完才开始。遇到对应需求再深入会更容易理解。下文的 GPU 指擅长并行处理图形等计算的处理器。
| 名称 | 可以先怎样理解 | 何时需要 |
|---|---|---|
| Modeling | 制作与修改物体形状的过程 | 制作自己的椅子、角色或场景 |
| UV Mapping | 建立 3D 表面与二维 Texture 坐标的对应关系 | 希望木纹、标签等准确落在指定位置 |
| PBR，Physically Based Rendering | 用较一致的物理规则描述表面与光的相互作用；仍包含近似 | 理解金属度、粗糙度以及跨工具的 Material |
| Keyframe | 记录某个时刻的属性值，由动画系统计算中间变化 | 让物体在一段时间内从一个状态变到另一个状态 |
| Rigging | 建立控制结构，例如给角色设置骨骼与控制器 | 让角色抬手、行走；简单旋转的椅子通常不需要 |
| Shader | 在 GPU 上参与几何处理或画面计算的程序 | 自定义水面、特殊表面或视觉效果；入门可先使用现成 Material |
| WebGL / WebGPU | 浏览器访问 GPU 图形能力的底层 API | 理解浏览器支持与渲染后端；使用 Three.js 不要求先从底层 API 写起 |
相关定义可对照 Blender UV Mapping、Blender Animation & Rigging 和 Three.js MeshStandardMaterial。MeshStandardMaterial 使用 PBR 的 metallic-roughness 工作流；PBR 不等于自动获得照片级效果，模型、光照与参数仍然重要。
当前 Three.js 的 WebGLRenderer 使用 WebGL 2；WebGPURenderer 默认尝试 WebGPU，并提供 WebGL 2 后备路径。它们是不同 Renderer 选择，不应把 Three.js 概括为“只能使用 WebGL”。WebGLRenderer · WebGPURenderer
如果项目使用 React，还会遇到 React Three Fiber。React Three Fiber is a React renderer for Three.js. 它让你用 React 组件表达 Three.js 场景，并与 React 状态和交互衔接；Geometry、Material、Camera 等知识仍然需要理解。它不负责代替 Blender 制作复杂素材。React Three Fiber 官方仓库
直接体验：在网页里认识一个 3D 场景
下面的 demo 已经可以直接操作，无需安装软件或准备模型文件。它用 Three.js 内置的 Geometry 显示立方体、球体或圆环，让你把前面的概念与画面变化对应起来。
打开 Three.js 基础交互 demo；手机上也可以打开独立页面，获得更宽裕的操作空间。
可以依次做四组小实验：
- 切换形状，再打开线框。观察立方体、球体和圆环的轮廓，以及表面三角形的分布。Geometry 描述形状，线框帮助你看见构成表面的结构。
- 更换颜色，再调整光照强度。形状保持一致，颜色与明暗发生变化：前者由 Material 的颜色参数控制，后者来自 Light 对表面的照明。
- 拖动查看并缩放。先关闭自动旋转，再用鼠标或触摸操作改变观察角度和距离。这里是 Camera 围绕物体移动，Geometry 本身没有发生形变。
- 打开自动旋转，再重置场景。观察物体朝向随时间变化，并用重置回到初始状态。Animation 改变场景属性，Rendering 把每一刻的状态画出来。
Interaction changes scene state; rendering makes the updated state visible. 同一个形状可以换 Material，Camera 也可以独立改变观察位置，不必重新制作模型。Three.js Fundamentals
下面是供阅读的 JavaScript 机制摘录；其中的对象由场景初始化创建，完整实现已经由站点运行：
material.color.set('#cf6737'); // 修改 Material 的颜色
light.intensity = 2; // 修改 Light 的强度
renderer.render(scene, camera); // 根据当前状态绘制画面
示例固定使用 Three.js 0.180.0（r180），不表示它是最新版本；依赖由站点的 Astro 构建打包，读者直接打开页面即可。运行需要浏览器启用 JavaScript 并支持 WebGL 2。Astro Client-side scripts · Three.js WebGLRenderer
怎样开始学习
如果目标是网页中的 3D 交互，建议先操作上面的 demo，分清 Geometry、Material、Light 与 Camera 分别改变什么。开始编程后，再练习创建一个简单场景、连接交互控件，并加载一个已有的 GLB。能分清“素材有问题”与“网页如何显示素材”之后，再学习 Blender 的基础 Modeling 和 glTF 导出。
如果目标是创作模型、图片或动画，建议先在 Blender 中完成一个简单物体：修改形状，设置 Material，安排 Light 和 Camera，输出一张图片。只有确实需要用户在网页里操作它时，再进入 Three.js。
第一步不需要把 Rigging、自定义 Shader 或复杂 Simulation 一起学完。先完成一个小的交付目标，再让需求决定下一组概念。
关联阅读
- Web 3D 基础概念：从 Mesh 到 GLB：Mesh、PBR、glTF / GLB 与常见文件格式的数据地图。
- 可视化工具：D3.js、Chart.js 与 Three.js：比较统计图表与 3D 内容的不同任务。
- Frontend 工具链导航：返回专题入口。