如何使用代码更新事物

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


        var object = new v3d.Object3D();
        scene.add(object);

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


        var object1 = new v3d.Object3D();
        var object2 = new v3d.Object3D(); 
        object1.add(object2); 
        scene.add(object1); 
        //object1 and object2 will automatically update their matrices

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


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

几何图形(Geometry)

BufferGeometry

BufferGeometries将（顶点位置、面的索引、法线、颜色、UV和任何自定义属性）信息存储在缓冲区([page:BufferAttribute buffers])中——也就是[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays 类型化的数组]。这使得它们通常比标准的几何体更快，缺点是更难用。

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

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

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


          var MAX_POINTS = 500;
          
          // geometry
          var geometry = new v3d.BufferGeometry();
          
          // attributes
          var positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point
          geometry.addAttribute('position', new v3d.BufferAttribute(positions, 3));
          
          // draw range
          var drawCount = 2; // draw the first 2 points, only
          geometry.setDrawRange(0, drawCount);
          
          // material
          var material = new v3d.LineBasicMaterial({ color: 0xff0000, linewidth: 2 });
          
          // line
          var line = new v3d.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; // required after the first render

如果您在初始渲染后改变了位置数据值，您可能需要调用 `.computeBoundingSphere()` ，以便重新计算几何体的边界球。


          line.geometry.computeBoundingSphere();

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

示例：

WebGL / custom / attributes
WebGL / buffergeometry / custom / attributes / particles

Geometry

以下标志控制各种几何属性的更新。只为您需要更新的属性设置标志，更新的成本很高。一旦缓冲区发生变化，这些标志会自动重置为 false 。如果您想不断地更新缓冲区，您需要不断地把它们设置为真。注意，这只适用于 Geometry ，而不适用于 BufferGeometry 。


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

在早于 r66 的版本中，网格还需要启用动态标志（以保持内部类型化数组）。


          //removed after r66 geometry.dynamic = true;

示例：

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上，因为在DirectX中着色器的编译比OpenGL慢）。

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

您可以自由地改变几何体块的材质，但是您不能改变一个物体如何被分割成块（根据面的材质）。

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

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

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

示例：

WebGL / materials / cars
WebGL / webgl_postprocessing / dof

纹理

图像、画布、视频和数据纹理如果被改变，需要设置以下标记(flag)：

texture.needsUpdate = true;

渲染目标自动更新。

示例：

WebGL / materials / video
WebGL / rtt

摄影机

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

fov
aspect
near
far

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


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