【three.js教程】Three.js 运行时更新：矩阵、几何体、材质怎么改才不卡

Three.js 运行时更新：矩阵、几何体、材质怎么改才不卡

原文出处：Three.js Manual – How to update Things

本文基于官方手册「How to update Things」章节整理，用通俗方式带你看懂：对象加进场景后矩阵怎么刷新、改几何体顶点要不要重建、材质哪些能随便改、相机改了参数为什么画面没变——把「更新」这件事一次讲清。

写在前面

写 Three.js 应用，大部分时间都在「动态地改东西」：让物体动起来、随鼠标调整形状、运行时换贴图、玩家靠近时改相机视野……但这些更新不是「改了属性就完事」，不同对象有不同的更新规则。改错了，要么画面不刷新，要么悄悄掉帧。这一篇按对象类型逐一拆解：矩阵、几何体、材质、贴图、相机、InstancedMesh、SkinnedMesh。

一、变换矩阵：默认自动更新，静态对象可手动优化

所有对象一旦被加进场景，它的矩阵默认就会自动更新：

constobject=newTHREE.Object3D();scene.add(object);

如果它是另一个已被加入场景的对象的子节点，同样会自动更新：

constobject1=newTHREE.Object3D();constobject2=newTHREE.Object3D();object1.add(object2);scene.add(object1);// object1 和 object2 的矩阵都会自动更新

但如果你确定某个对象永远不会动（纯静态），可以把自动更新关掉，只在需要时手动刷新一次，省下每帧的矩阵计算：

object.matrixAutoUpdate=false;object.updateMatrix();

划重点：关掉matrixAutoUpdate后，你改了position/rotation/scale不会自动反映到矩阵上，必须自己再调一次updateMatrix()。别关了又忘了手动刷。

二、BufferGeometry：缓冲区不能改大小，只能改内容

BufferGeometry把顶点位置、索引、法线、颜色、UV 等数据存在typed arrays（类型化数组）里，比老式Geometry更快，但用起来更讲究。

最关键的一条：你不能改变缓冲区的大小。重新分配大小的开销，基本等同于新建一个几何体。你只能更新缓冲区里已有的内容。

这意味着：如果你预感到某个属性（比如顶点数）会增长，就必须预先分配一个够大的缓冲区。当然，这也意味着你的几何体有个上限——不存在能无限高效扩张的BufferGeometry。

看一个「运行时不断变长的线」的例子。先预分配 500 个顶点的空间，但一开始只画前 2 个点，靠BufferGeometry.drawRange控制绘制数量：

constMAX_POINTS=500;// 几何体constgeometry=newTHREE.BufferGeometry();// 属性：每个点 3 个 float（x, y, z）constpositions=newFloat32Array(MAX_POINTS*3);geometry.setAttribute('position',newTHREE.BufferAttribute(positions,3));// 绘制范围：只画前 2 个点constdrawCount=2;geometry.setDrawRange(0,drawCount);// 材质与线constmaterial=newTHREE.LineBasicMaterial({color:0xff0000});constline=newTHREE.Line(geometry,material);scene.add(line);

之后想往线上加点的套路是这样：

constpositionAttribute=line.geometry.getAttribute('position');letx=0,y=0,z=0;for(leti=0;i<positionAttribute.count;i++){positionAttribute.setXYZ(i,x,y,z);x+=(Math.random()-0.5)*30;y+=(Math.random()-0.5)*30;z+=(Math.random()-0.5)*30;}

如果渲染之后想改变绘制点的数量，改drawRange即可：

line.geometry.setDrawRange(0,newValue);

如果想渲染之后修改位置数据的值，必须打上更新标记，否则 GPU 端的缓冲区不会刷新：

positionAttribute.needsUpdate=true;// 首次渲染后修改必须设置

⚠️ 改完位置数据后，通常还要重算包围体，否则视锥剔除（frustum culling）、辅助工具等会算错：

line.geometry.computeBoundingBox();line.geometry.computeBoundingSphere();

官方还提供了一个可拖来改去演示动态线的 fiddle（jsfiddle.net/t4m85pLr/1），可以照着改。

三、Materials：哪些能随便改，哪些要重建着色器

材质的uniform 值（颜色、贴图、透明度等）可以随便改，每帧都会发给着色器；跟 GL 状态相关的参数（depthTest、blending、polygonOffset等）也能随时改。

但有这么一批属性，一旦材质被渲染过一次，就不容易在运行时改了：

• uniforms 的数量和类型；
• 以下特性的「有无」：
  • texture（贴图）
  • fog（雾）
  • vertex colors（顶点颜色）
  • morphing（形变）
  • shadow map（阴影贴图）
  • alpha test（透明度测试）
  • transparent（透明）

改这些会触发着色器程序重建，需要手动打标记：

material.needsUpdate=true;

性能提醒：这会相当慢，可能造成掉帧——尤其 Windows 上（DirectX 的 shader 编译比 OpenGL 慢）。平滑一点的做法是「用假值模拟」：比如零强度的灯光、白色贴图、零浓度的雾，先用着，避免运行时硬切 shader。

另外，你可以自由更换几何体块（chunk）用的材质，但不能改变物体按面材质被切成几块的方式。如果运行时需要多种材质配置：数量少就提前切好（比如人的头发/脸/身体/上衣/裤子），数量大（每个面都可能不同）就考虑用 attribute 或贴图来驱动每面的差异。

四、Textures：改了内容要打 needsUpdate

图片、canvas、视频、数据贴图，改了之后需要打上更新标记：

texture.needsUpdate=true;

例外：渲染目标（Render Target）会自己自动更新，不用管。

五、Cameras：改了 fov/aspect 记得重算投影矩阵

相机的位置和朝向是自动更新的。但如果你改了下面这些参数：

• fov
• aspect
• near
• far

就必须重算投影矩阵，否则画面不会按新参数变化：

camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();

这是个高频坑：窗口 resize 时改了camera.aspect却忘了updateProjectionMatrix()，结果画面拉伸或不变。Resize 处理里这两行是固定搭档。

六、InstancedMesh：改实例后要重算包围体

InstancedMesh用于便捷地做实例化渲染。视锥剔除、射线拾取等特性依赖最新的包围体（包围球/包围盒）。由于它的机制特殊，类自己带有boundingBox和boundingSphere，优先级高于几何体层级的包围体。

和你改几何体一样：每当底层数据变了（比如用setMatrixAt()变换实例），就要重算：

instancedMesh.computeBoundingBox();instancedMesh.computeBoundingSphere();

七、SkinnedMesh：同理

SkinnedMesh在包围体这件事上和InstancedMesh一个道理——类自己有boundingBox/boundingSphere来正确包住动画中的网格。调用computeBoundingBox()/computeBoundingSphere()时，会基于**当前的骨骼变换（即当前动画状态）**来算。

总结

一张表记住各类对象的更新规则：

延伸阅读

• three.js docs – BufferGeometry.setDrawRange
• three.js docs – Material.needsUpdate
• three.js docs – Texture.needsUpdate
• three.js docs – Camera.updateProjectionMatrix
• three.js example – WebGL / custom / attributes