如何更新场景

如何更新场景

默认情况下，所有对象都会自动更新它们的矩阵（如果它们已添加到场景中）

const object = new THREE.Object3D();
scene.add( object );

或者它们是已添加到场景中的另一个对象的子节点:

const object1 = new THREE.Object3D();
const object2 = new THREE.Object3D();
object1.add( object2 );
scene.add( object1 ); //object1 和 object2 会自动更新它们的矩阵

但是，如果你知道对象将是静态的，则可以禁用此选项并在需要时手动更新转换矩阵。

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

BufferGeometry

BufferGeometries 将信息（例如顶点位置，面索引，法线，颜色，uv和任何自定义属性）存储在 [BufferAttribute buffers] —— 也就是，typed arrays。这使得它们通常比标准Geometries更快，缺点是更难用。

关于更新BufferGeometries，最重要的是理解你不能调整 buffers 大小（这种操作开销很大，相当于创建了个新的geometry）。
但你可以更新 buffers 的内容。

这意味着如果你知道 BufferGeometry 的一个属性会增长，比如顶点的数量，你必须预先分配足够大的 buffer 来容纳可能创建的任何新顶点。
当然，这也意味着 BufferGeometry 将有一个最大大小 —— 无法创建一个可以高效地无限扩展的 BufferGeometry。

我们以在渲染时扩展的 line 来示例。我们将分配可容纳 500 个顶点的空间，但起初仅绘制 2 个，使用在 500 个顶点的缓冲区中，但首先只使用 [BufferGeometry.drawRange]。

const MAX_POINTS = 500;
// geometry
const geometry = new THREE.BufferGeometry();
// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
// draw range
const drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );
// material
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// line
const line = new THREE.Line( geometry, material );
scene.add( line );

然后我们随机增加顶点到 line 中，以这样的一种方式：

const positionAttribute = line.geometry.getAttribute( 'position' );
let x = 0, y = 0, z = 0;
for ( let i = 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;
}

如果要更改第一次渲染后渲染的点数，执行以下操作：

line.geometry.setDrawRange( 0, newValue );

如果要在第一次渲染后更改 position 数值，则需要像这样设置 needsUpdate 标志：

positionAttribute.needsUpdate = true; // 需要加在第一次渲染之后

这个 fiddle 展示了一个你可以参考的运动的 line。

例子

材质（Materials）

所有 uniforms 值都可以自由改变（比如 colors, textures, opacity 等等），这些数值在每帧都发给 shader。

GL 状态相关参数也可以随时改变（depthTest, blending, polygonOffset 等）。

在运行时无法轻松更改以下属性（一旦 material 被渲染了一次）：

uniforms 的数量和类型
是否存在
- texture
- fog
- vertex colors
- morphing
- shadow map
- alpha test
- transparent

这些变化需要建立新的 shader 程序。你需要设置：

material.needsUpdate = true;

请记住，这可能会非常缓慢并导致帧率的波动。（特别是在 Windows 上，因为 shader 编译在 DirectX 中比 OpenGL 慢）。

为了获得更流畅的体验，您可以通过“虚拟”值（如零强度光，白色纹理或零密度雾）在一定程度上模拟这些功能的变化。

您可以自由更改用于几何块的材质，但是无法更改对象如何划分为块（根据面材料）。

如果你需要在运行时使用不同的材料配置：

如果材料/块的数量很少，您可以事先预先划分物体（例如，人的头发/脸部/身体/上衣/裤子，汽车的前部/侧面/顶部/玻璃/轮胎/内部）。

如果数量很大（例如，每个面可能有所不同），请考虑不同的解决方案，例如使用属性/纹理来驱动不同的每个面部外观。

例子

纹理（Textures）

如果更改了图像，画布，视频和数据纹理，则需要设置以下标志：

texture.needsUpdate = true;

渲染对象就会自动更新。

例子

相机（Cameras）

相机的位置和目标会自动更新。如果你需要改变：

fov
aspect
near
far

那么你需要重新计算投影矩阵：

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

threejs 开发文档 - 帮助手册 - 教程

如何更新场景（How to update things）