如何在 Verge3D 中更新事物 — Soft8Soft
Description: 使用 JavaScript 更新 Verge3D 实体，如几何体、材质、纹理或摄影机。

# 如何使用 JavaScript 更新 Verge3D 事物

如何使用 JavaScript 更新 Verge3D 实体，如对象、材质、纹理、摄影机或几何缓冲区。

- Objects | 对象
- Materials | 材质
- Textures | 纹理
- Cameras | 摄影机
- BufferGeometry

#

## Objects | 对象

默认情况下，所有对象在添加到场景后都会自动更新其矩阵：

`const object = new v3d.Object3D(); app.scene.add(object);`

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

`const object1 = new v3d.Object3D(); const object2 = new v3d.Object3D(); object1.add(object2); app.scene.add(object1); // object1 和 object2 将自动更新它们的矩阵`

但是，如果您知道对象将是静态的，可以禁用此功能，仅在需要时手动更新变换矩阵。

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

#

## Materials | 材质

所有 uniforms 值都可以自由更改（如颜色、纹理、不透明度等），这些值在每帧都发送到着色器。

WebGL 状态相关参数也可以随时更改（depthTest、blending、polygonOffset 等）。

以下属性在运行时无法轻松更改：

- [page:MeshNodeMaterial 节点]材质的节点图
- uniforms 的数量和类型
- 以下对象存在与否：
  - texture
  - fog
  - vertex colors
  - morphing
  - shadow map
  - alpha test
  - transparent

这些变化需要建立新的着色器程序。您需要设置：

`material.needsUpdate = true`

对于 [page:MeshNodeMaterial 节点]材质，还需运行：

`material.updateNodeGraph()`

请记住，这可能会相当慢，并引起帧率的紊乱（尤其是在 Windows 上，因为在 DirectX 中着色器的编译比 OpenGL 慢）。

为了获得更流畅的体验，您可以通过零强度的灯光、白色的纹理或零密度的雾等"虚拟"值在一定程度上模拟这些特征的变化。

#

## Textures | 纹理

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

`texture.needsUpdate = true;`

渲染目标自动更新。

#

## Cameras | 摄影机

摄影机的位置和目标将会自动更新。如果您需要更改：

- fov, aspect（用于透视摄影机）
- left, right, top, bottom（用于正交摄影机）
- viewportFit
- near
- far

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

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

#

## BufferGeometry

BufferGeometries 将（顶点位置、面的索引、法线、颜色、UV 和任何自定义属性）信息存储在 buffers 中——也就是 [page:TypedArray 类型化数组]。这使得它们通常比标准几何体更快，缺点是更难使用。

关于更新 BufferGeometries，最重要的是要理解您不能调整缓冲区的大小（这种操作开销很大，基本上相当于创建一个新的几何体）。但您可以更新缓冲区的内容。

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

我们以在渲染时扩展的线来示例。我们将分配可容纳 500 个顶点的空间但起初仅绘制 2 个，使用 BufferGeometry.drawRange。

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

接下来我们按如下方式随机增加点到线中：

`const positions = line.geometry.attributes.position.array; let x, y, z, index; x = y = z = index = 0; for (let i = 0, l = MAX_POINTS; i < l; i++) { positions[index++] = x; positions[index++] = y; positions[index++] = z; x += (Math.random() - 0.5) * 30; y += (Math.random() - 0.5) * 30; z += (Math.random() - 0.5) * 30; }`

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

`line.geometry.setDrawRange(0, newValue);`

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

`line.geometry.attributes.position.needsUpdate = true; // required after the first render`

如果您在初始渲染后改变了位置数据值，您可能需要重新计算边界体积，以便引擎的其他功能（如视锥剔除或辅助器）正常工作。

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

## Puzzles

处理上述实体（对象、材质等）的拼图会自动执行所有所需的更新。