# 如何更新场景（[name]）

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

`var object = new THREE.Object3D(); scene.add( object );` 或者它们是已添加到场景中的另一个对象的子节点: `var object1 = new THREE.Object3D(); var object2 = new THREE.Object3D(); object1.add( object2 ); scene.add( object1 ); //object1 和 object2 会自动更新它们的矩阵`

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

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

## 几何形状（Geometries）

### [page:BufferGeometry]

BufferGeometries 将信息（例如顶点位置，面索引，法线，颜色，uv和任何自定义属性）存储在[page:BufferAttribute buffers] —— 也就是， [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays]. 这使得它们通常比标准Geometries更快，缺点是更难用。

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

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

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

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

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

`var positions = line.geometry.attributes.position.array; var x, y, z, index; x = y = z = index = 0; for ( var 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 );`

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

`line.geometry.attributes.position.needsUpdate = true; // 需要加在第一次渲染之后`

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

### 例子：

[example:webgl_custom_attributes WebGL / custom / attributes]
[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]

### [page:Geometry]

以下标志控制各种geometry属性的更新。仅对于需要更新的属性设置标志，因为更新成本很高。 一旦buffers改变，这些标志位会自动重置为false。如果你想要持续更新buffers，你需要保持这些设置为true。 请注意这仅适用于[page:Geometry]而不是[page:BufferGeometry]。

`var geometry = new THREE.Geometry(); geometry.verticesNeedUpdate = true; geometry.elementsNeedUpdate = true; geometry.morphTargetsNeedUpdate = true; geometry.uvsNeedUpdate = true; geometry.normalsNeedUpdate = true; geometry.colorsNeedUpdate = true; geometry.tangentsNeedUpdate = true;`

在早于[link:https://github.com/mrdoob/three.js/releases/tag/r66 r66]的版本中，meshes 需要额外设定 dynamic 标志为true （为了维持内部的 typed arrays）：

`//removed after r66 geometry.dynamic = true;`

### 例子：

[example:webgl_geometry_dynamic WebGL / geometry / dynamic]

## 材质（Materials）

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

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

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

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

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

`material.needsUpdate = true`

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

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

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

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

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

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

### 例子：

[example:webgl_materials_cars WebGL / materials / cars]
[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]

## 纹理（Textures）

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

`texture.needsUpdate = true;`

渲染对象就会自动更新。

### 例子：

[example:webgl_materials_video WebGL / materials / video]
[example:webgl_rtt WebGL / rtt]

## 相机（Cameras）

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

- fov
- aspect
- near
- far

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

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