【05】three进阶——如何更新场景、材质、纹理、相机信息？

Object Updates: In Three.js, objects automatically update their matrices when added to a scene or are a child of an object in a scene. To optimize for static objects, auto-updating can be disabled, and matrices can be manually updated when necessary:

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

BufferGeometry: BufferGeometries are faster than standard Geometries but harder to work with due to their use of typed arrays. Buffers can't be resized, so it's essential to allocate enough space for growth, like the number of vertices. This also means there is a maximum size for BufferGeometry:

const MAX_POINTS = 500;
//... (initialization code omitted for brevity)
geometry.setDrawRange(0, drawCount);

To add vertices after the initial render:

const positions = line.geometry.attributes.position.array;
//... (vertex addition code omitted for brevity)

For updating the number of points rendered after the first render:

line.geometry.setDrawRange(0, newValue);

For changing the positions after the first render, set the needsUpdate flag:

line.geometry.attributes.position.needsUpdate = true;

Materials: Material uniforms such as colors, textures, and opacity can be freely changed, and GL state-related parameters are also modifiable at any time. However, certain properties cannot be easily changed after a material has been rendered once, as they require a new shader program:

• Number and type of uniforms
• Presence of texture, fog, vertex colors, morphing, shadow map, alpha test, transparent

These changes necessitate setting:

material.needsUpdate = true

Such updates can be slow and cause frame rate fluctuations. Simulating changes through "virtual" values can smooth the experience. Materials for geometric blocks can be changed, but the object's segmentation by block cannot:

Textures: If an image, canvas, video, or data texture is altered, set the following flag for automatic updates:

texture.needsUpdate = true;

Cameras: Camera positions and targets are auto-updated. For changes to fov, aspect, near, or far, the projection matrix must be recalculated:

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

这个摘要包含了如何在Three.js中更新对象、几何体、材料、纹理和相机的关键点。对象的矩阵更新可以手动控制，BufferGeometry需要预先分配足够空间来容纳数据增长，材料的某些属性一旦渲染后无法轻易改变，需要新的着色器程序。纹理更改后需要设置更新标志，而相机的某些属性改变后需要更新投影矩阵。