BufferAttribute

• The array length must be a multiple of itemSize: 3 for position and normal, 2 for uv, 3 or 4 for color.
• Write components with setXYZ(i, x, y, z) or setComponent(i, component, value), then set needsUpdate.
• Switch usage to DynamicDrawUsage for buffers that change every frame.

const positions = new Float32Array([
  -1, -1, 0,
   1, -1, 0,
   0,  1, 0
]);

const colors = new Float32Array([
  1, 0.3, 0.2,
  0.2, 1, 0.5,
  0.3, 0.5, 1
]);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.MeshBasicMaterial({ vertexColors: true, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const position = geometry.getAttribute('position');
position.setUsage(THREE.DynamicDrawUsage);

function animateWave(t) {
  for (let i = 0; i < position.count; i++) {
    position.setY(i, Math.sin(t * 0.002 + i * 0.35) * 0.6);
  }
  position.needsUpdate = true;   // 缺少这一行，画面不会变化
}

• Vertex color values are interpreted as linear; convert sRGB input via Color.setStyle before writing.
• Direct array writes do not upload automatically, so missing needsUpdate leaves stale geometry.