Three.js：在浏览器里搭积木的魔法

可视化演示

展示系统处理流水线、实时性能指标曲线及多方案对比分析，包含数据流转、吞吐延迟监控与方案评估。

场景舞台搭建

想象你刚拆开一盒积木，第一件事是什么？当然是找一块平整的底板——只有把底板铺好，你才知道往哪儿放积木、积木之间怎么连接。在 Three.js 里，这块“底板”就是 Scene（场景）。它是所有对象的容器，你创建的每一个积木（几何体）、贴纸（材质）、灯光都必须放进这个容器里，否则就像把积木放在地上——虽然存在，但不在你的“积木房子”里。

当你 new THREE.Scene() 创建一个场景时，Three.js 会在内存中维护一棵对象树。你可以把任何可见或不可见的对象挂到这棵树上，就像往底板上堆叠积木。场景还自带一套坐标系——右手坐标系，其中 X 轴向右、Y 轴向上、Z 轴朝向你。这套坐标系就像是底板上的刻度线，让你能精确地说出“这块积木放在距离中心 5 格、高度 3 格的位置”。

Scene 对象最核心的几个能力包括：add() 方法像一只手，把积木稳稳放到底板上；remove() 方法像拆积木，需要时也能干净地拿走；traverse() 方法像你的眼睛，可以在场景里巡视每一个节点。需要注意的是，Three.js 的 Scene 继承自 Object3D，这意味着它本身也可以拥有位置、旋转、缩放属性——这在实现“滚动的天空盒”或“动态世界”时非常有用。

1. 创建场景：Scene 是最顶层的容器，所有对象都要挂载进来。

$$\text{scene} = \text{new Scene}()$$

2. 添加对象：通过 add 方法把物体挂到场景树下，此时物体才进入渲染范围。

$$\text{scene}.\text{add}(\text{object})$$

3. 对象树结构：每个场景都是一棵层级树，根节点是 Scene，子节点可以是 Mesh、Light、Camera 等。

$$\text{Scene} \rightarrow \text{Mesh} \rightarrow \text{Material}$$

把场景想象成一张无限大的积木底板，这解释了为什么 Three.js 的性能瓶颈往往不在场景本身，而在于场景里的对象数量。合理组织场景树，是 3D 应用优雅与高效的起点。

相机视野控制

搭好积木房子后，你想从各个角度欣赏它。你会怎么做？蹲下来从窗户看、站到凳子上俯视、或者绕着一圈走。在 Three.js 里，你的“眼睛”就是 Camera（相机）。它是一个抽象的视点，决定了“从哪个位置、朝哪个方向、以多大视野”去看场景。没有相机的 Three.js 应用是黑屏的——就像闭着眼睛搭积木，东西都在，但你看不见。

Three.js 最常用的两种相机是 PerspectiveCamera（透视相机）和 OrthographicCamera（正交相机）。透视相机模拟人眼和真实相机的特性：近大远小，现实生活中我们看到的世界就是这样的。正交相机则保持物体大小恒定，不管距离远近，就像建筑图纸的平面视图。透视相机适合游戏和产品展示，正交相机适合 2.5D 界面和建筑平面图。其核心参数包括视野角度（FOV）、宽高比（aspect）、近裁剪面（near）和远裁剪面（far）。

相机的定位也讲究：position.set(x, y, z) 确定相机站在哪里，lookAt(x, y, z) 让相机看向哪里。这就像你站在积木房子东南角，视线聚焦在房屋正门的把手上。设置好这两个参数，就等于确定了“摄影师的位置和镜头朝向”。

1. 近大远小：透视矩阵把三维坐标投影到二维屏幕，核心是视锥体变换。

$$\displaystyle P_{\text{proj}} = \begin{bmatrix} \frac{f}{\text{aspect}} & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & \frac{\text{far}+\text{near}}{\text{near}-\text{far}} & \frac{2\cdot \text{far}\cdot \text{near}}{\text{near}-\text{far}} \\ 0 & 0 & -1 & 0 \end{bmatrix}$$

2. 定义视野：fov 是垂直方向的视野角度，单位是度。

$$f = \frac{1}{\tan(\frac{\text{fov} \cdot \pi}{360})}$$

3. 裁剪范围：near 和 far 定义了相机能看到的最远和最近距离，超出范围的物体被裁剪掉。

$$\text{near} < z < \text{far}$$

相机就像你的双眼，决定了你看到一个怎样的 3D 世界。调好相机参数，是每个 Three.js 应用的第一步——它不是技术题，而是视觉艺术题。

几何体积木

现在进入最有趣的环节：往底板上搭积木。积木盒里有各种各样的形状——立方体、球体、圆柱体、圆锥体、环面……在 Three.js 中，这些形状被称为 Geometry 或 BufferGeometry。它们是 3D 场景的最小积木单元，通过组合它们，可以搭建出几乎任何你想要的物体：房子、汽车、人物，甚至整个城市。

Three.js 内置了大量基础几何体，就像积木盒里的标准件。BoxGeometry(宽,高,深) 是正方体，SphereGeometry(半径,分段数) 是球体，CylinderGeometry(半径顶,半径底,高度) 是圆柱体。每个几何体都由顶点（vertices）和面（faces）构成——顶点是积木块的角落，面是积木块的表面。当你创建一个 BoxGeometry 时，Three.js 会计算好 8 个顶点、6 个面（每个面由 2 个三角形组成），然后把这些数据以 BufferGeometry 的形式存在内存中。

BufferGeometry 是 Three.js 从 r125 版本开始主推的几何体格式。它把顶点位置、法线、颜色、UV 坐标等数据按二进制连续存储在缓冲区中，GPU 可以直接读取并进行渲染。它的优势在于高效——就像积木块表面提前印好了所有贴纸的定位孔，拼搭时直接对齐就行。而旧的 Geometry 由于数据分散、操作灵活但效率较低，在新版本中已被移除。

1. 定位顶点：每个顶点都有三维坐标，定义积木的角落位置。

$$\text{position} = (x_i, y_i, z_i)$$

2. 连接顶点成三角形：index 数组定义每三个顶点组成一个三角形面，GPU 用它来渲染表面。

$$\text{indices} = [(i_1, i_2, i_3), (i_4, i_5, i_6), \dots]$$

3. 法线计算：每个顶点都有一个法线向量，它决定光照在表面上的反射效果。

$$\mathbf{n} = \frac{(v_2 - v_1) \times (v_3 - v_1)}{\|(v_2 - v_1) \times (v_3 - v_1)\|}$$

积木块是 3D 世界的根基。理解了顶点、面、缓冲区，你就理解了 GPU 如何“看见”这个世界——而不是被 Three.js 的 API 牵着走。这是从“会用”迈向“懂行”的关键一步。

材质与灯光

积木块的形状有了，但它们还是灰蒙蒙的——就像刚出厂的素色积木，没有贴纸、没有颜色。要让积木真正“活”起来，需要两样东西：Material（材质）和 Light（灯光）。材质是积木的皮肤，决定了物体表面如何反射光线；灯光是房间里的灯，它照亮积木，让皮肤显现出颜色和质感。

Three.js 内置了多种材质，就像不同风格的贴纸。MeshBasicMaterial 是最简单的“纯色贴纸”，它不依赖光照，只用纯色绘制，适合做背景和辅助线。MeshLambertMaterial 是“哑光贴纸”，表面不反光，适用于粗糙的物体（如墙壁、泥土）。MeshPhongMaterial 是“亮光贴纸”，带高光反射，适合塑料、金属质感。MeshStandardMaterial 是“物理贴纸”，基于 PBR（物理渲染），效果最真实，适合写实风格。

光源则是场景中的“灯”。AmbientLight 是环境光，像天花板上的吸顶灯，均匀照亮全屋；DirectionalLight 是平行光，像太阳，以固定方向照射；PointLight 是点光源，像一盏台灯，从一点向四面八方发亮；SpotLight 是聚光灯，像舞台追光灯，形成一束光锥。不同材质对光的反应完全不同——MeshBasicMaterial 完全不理会光源，而 MeshStandardMaterial 会综合计算漫反射、镜面反射和环境光照。

1. 漫反射（Lambert 模型）：粗糙表面的反射强度与光线入射角的余弦成正比。

$$\displaystyle L_d = k_d \cdot I \cdot \max(0, \mathbf{n} \cdot \mathbf{l})$$

2. 高光反射（Phong 模型）：光滑表面的高光强度与反射向量和视线向量的夹角有关。

$$\displaystyle L_s = k_s \cdot I \cdot \max(0, \mathbf{r} \cdot \mathbf{v})^p$$

3. PBR 能量守恒：表面的反射率与折射率之和不超过 1，保证物理正确。

$$R + T \le 1$$

材质和灯光就像积木的“颜值担当”。即使几何体再精细，没有好的材质和灯光，场景依然显得廉价；反之，一个球体加一束灯光，也能呈现电影级的质感。这就是 3D 渲染的魅力。

动画渲染循环

积木房子搭好了、贴纸贴好了、灯光也亮了，但它是静止的——像一张照片。照片很好看，但我们想要的是“电影”。如何让积木旋转起来、让小车动起来、让小鸟飞行？答案是“动画渲染循环”（render loop）。Three.js 的动画机制很简单：不断更新物体状态，然后重新渲染场景。

这个循环的核心是 requestAnimationFrame 函数，它是浏览器提供的“节拍器”。它告诉浏览器：“在下一帧绘制时，请调用这个函数。”浏览器会在每次屏幕刷新时（通常是每秒 60 次）调用它，从而实现流畅的动画。Three.js 的 renderer.render(scene, camera) 可以把这个循环封装得极其简洁。

在实际项目中，你还需要一个关键工具：Clock（时钟）。它能精确计算两帧之间的时间差（delta time），这个差值正好可以用来驱动运动。为什么要用 Clock？因为不同设备的刷新率不同——一台 120Hz 的显示器和一台 60Hz 的显示器，如果每帧旋转固定角度，动画速度就会差一倍。而把它设置为“每秒旋转 60 度”（rotation += 60 * delta），就能保证在任何设备上都以相同的速度旋转。

1. 计算时间增量：Clock.getDelta() 返回距上一次调用该函数的时间间隔（秒）。

$$\Delta t = t_{\text{当前}} - t_{\text{上一帧}}$$

2. 更新位置：每帧根据速度乘以时间增量来计算位移量，保证动画速度与帧率无关。

$$\text{position} = \text{position} + v \cdot \Delta t$$

3. 渲染新画面：调用渲染器，将最新的场景状态绘制到屏幕上。

$$\text{Render}(\text{scene}, \text{camera})$$

动画循环就是 3D 世界的“心跳”。有了这个心跳，场景中的一切才能活起来。理解 requestAnimationFrame 和 Clock 的关系，你就掌握了让 3D 世界“动起来”的魔法钥匙。

function animate() {  requestAnimationFrame(animate);  mesh.rotation.x += 0.01;  // 更新积木的旋转  renderer.render(scene, camera);  // 重新渲染整个世界}animate();

交互与碰撞

一个会动的 3D 场景很酷，但如果用户只能看、不能摸，那就像一个不允许触摸展品的博物馆——精美但缺乏参与感。要让用户“摸”到积木，就需要交互。Three.js 中最核心的交互工具是 Raycaster（射线检测器）、OrbitControls（轨道控制器），以及用于物理反馈的碰撞检测。

Raycaster 的原理其实非常简单：从相机（或鼠标）位置发射一条看不见的射线，检测这条射线在空间中穿过了哪些物体。就像你闭上一只眼、用手指指向一个方向，你知道手指在那条线上有多远。Raycaster 会返回被射线击中的所有物体列表，并按距离排序。这样用户点击屏幕上的一个点，你就能知道“用户点击了哪个积木”。

OrbitControls 是 Three.js 最常用的相机控制工具，它让用户可以用鼠标拖拽旋转视角、滚轮缩放、右键平移。它就像是给相机装上了一台“云台”，用户可以直接操控自己的视角。看似复杂的功能，用起来只需几行代码：

当交互变得复杂（比如用户拖拽积木到另一个积木上），就需要碰撞检测了。Three.js 本身没有完整的物理引擎，而是通过 Raycaster 和 Box3 等工具实现基础碰撞。例如 Box3 可以计算两个物体的包围盒是否相交。更复杂的物理效果（重力、弹跳、关节）则要集成第三方物理引擎（如 Cannon.js 或 Ammo.js）。碰撞检测的工作原理是：先计算两个物体表面的最近点，再判断是否穿透。

1. 构建射线：从鼠标屏幕坐标转换到世界坐标系，再向场景中发射射线。

$$\mathbf{r} = \text{raycast}(\text{mouse}_{\text{NDC}}, \text{camera})$$

2. 检测相交：射线与每个物体的三角形面进行相交测试，找最近的交点。

$$\text{hit} = \underset{t}{\arg\min} \; \text{intersect}(\mathbf{r}, \text{mesh})$$

3. 包围盒碰撞：比较两个物体包围盒各轴的范围，若全部重叠则发生碰撞。

$$\text{AABB}_A \cap \text{AABB}_B = \emptyset$$

交互系统是 3D 应用与用户之间的“桥梁”。没有它，Three.js 只是一个“展示盒”；有了它，就变成了“游乐场”。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

性能优化策略

积木搭得越来越多，场景越来越丰富，但问题也随之而来：画面开始卡顿。就像积木搭得太高，重心不稳，稍微一碰就塌。在 3D 应用里，“卡顿”的本质是帧率（FPS）下降——每秒钟能渲染的画面帧数不足。Three.js 应用的性能优化，就是在和 GPU 的交道中做一个精明的房东，让每一分资源都用在刀刃上。

优化的核心思路有三个方向。第一个方向是减少绘制调用（Draw Calls）。每次 renderer.render() 时，WebGL 需要逐物体进行绘制，一次绘制调用一个物体。如果一个场景里有 1000 个物体，就需要 1000 次绘制调用。优化方法是使用 InstancedMesh 或 mergeBufferGeometries，把同种几何体合并成一个整体。就像把所有相同的积木块粘在一起，变成一个“超大积木”，只需一次绘制。

第二个方向是纹理优化。纹理贴图是显存的大户。5000×5000 的纹理比 1024×1024 的大 25 倍。优化方法包括：压缩纹理格式、动态生成 mipmap（多级纹理）、限制纹理尺寸。使用 RGBELoader 等工具时，也要注意场景中同时加载的纹理总量。

第三个方向是 LOD（Level of Detail，细节层级）——这叫按需简化。当积木离你远，你看不清细节时，用它低精度的替代品显示；当积木靠近时，再切换高精度模型。Three.js 的 THREE.LOD 对象可以帮助实现这一机制，它会根据物体与相机的距离，自动选择不同精度的模型显示。

1. 实例化绘制：相同几何体的多次绘制合并为一次，减少状态切换。

$$\text{DrawCalls}_{\text{instanced}} = 1$$

2. LOD 选择：根据距离动态切换模型精度。

$$\text{level} = \begin{cases} \text{high} & d < d_1 \\ \text{medium} & d_1 \le d < d_2 \\ \text{low} & d \ge d_2 \end{cases}$$

3. 纹理压缩：通过压缩格式降低显存占用。

$$\text{Memory} = w \times h \times \frac{\text{bits}}{8}$$

性能优化是 3D 应用从“能跑”到“流畅跑”的分水岭。记住三把钥匙：减少绘制调用、精简纹理、按需分配细节。就像整理积木盒——相同颜色放一起、大块头放底层、不常用的小件收进抽屉，搭起来自然顺手流畅。

AI 应用场景

Python 演示

import asyncioimport jsonfrom pyppeteer import launch THREE_JS_APP = """<!DOCTYPE html><html><head><style>body { margin: 0; overflow: hidden; }</style></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>  var scene = new THREE.Scene();  var camera = new THREE.PerspectiveCamera(75,    window.innerWidth / window.innerHeight, 0.1, 1000);  var renderer = new THREE.WebGLRenderer();  renderer.setSize(window.innerWidth, window.innerHeight);  document.body.appendChild(renderer.domElement);   var geometry = new THREE.BoxGeometry(1, 1, 1);  var material = new THREE.MeshStandardMaterial({ color: 0x818CF8 });  var cube = new THREE.Mesh(geometry, material);  scene.add(cube);   var light = new THREE.DirectionalLight(0xffffff, 1);  light.position.set(5, 10, 7);  scene.add(light);  scene.add(new THREE.AmbientLight(0x404040));   camera.position.z = 3;   var frames = 0;  function render() {    requestAnimationFrame(render);    cube.rotation.x += 0.01;    cube.rotation.y += 0.01;    renderer.render(scene, camera);    frames++;  }  render();</script></body></html>""" async def main():    browser = await launch()    page = await browser.newPage()    page.on('console', lambda msg: print('[browser]', msg.text))    await page.goto('data:text/html,' + THREE_JS_APP)    await page.waitFor(1000)    perf = await page.evaluate('''() => ({      webgl: !!document.querySelector('canvas'),      size: {        w: renderer.domElement.width,        h: renderer.domElement.height      }    })''')    print('perf:', json.dumps(perf))    await page.screenshot({'path': 'threejs_demo.png'})    await browser.close() asyncio.get_event_loop().run_until_complete(main())

1. from pyppeteer import launch引入无头浏览器控制库，相当于让 Python 开一个“隐形浏览器”。
2. renderer.domElement.width访问 Three.js 渲染器的画布宽度，验证是否按预期尺寸渲染。
3. page.evaluate()在页面上下文中执行 JavaScript 代码，把 Three.js 关键状态回传给 Python。
4. page.waitFor(1000)等待 1 秒让首帧渲染完成，模拟真实用户的等待体验。
5. async def main()使用异步语法管理浏览器生命周期，避免多标签页导致的阻塞。
6. page.screenshot()截取 3D 场景渲染结果，用于视觉回归测试。
7. browser.close()关闭浏览器，释放内存资源。

常见误区

面试题