InstancedMesh实例颜色不更新问题求助

问题场景 #

使用Three.js（React Three Fiber）渲染约20000个球体实例，初始颜色设置正常，但通过hover状态更新颜色时，修改colors数组后实例颜色无变化，即使设置了needsUpdate = true也无效。

实例化代码：

<instancedMesh
  ref={meshRef}
  args={[null, null, events.length]}
  onPointerEnter={toggleHover}
  onPointerLeave={toggleHover}
  onClick={handleClick}
>
  <sphereGeometry args={[1, 8, 8]} attach="geometry"></sphereGeometry>
  <shaderMaterial
    vertexShader={THREE.ShaderLib.lambert.vertexShader}
    fragmentShader={THREE.ShaderLib.lambert.fragmentShader}
    uniforms={uniforms}
    attach="material"
    lights
    vertexColors
  />
</instancedMesh>

初始颜色加载逻辑：

useEffect(() => {
  if (colors) {
    const colors_arr = new Float32Array(colors);
    const colorAttribute = new THREE.InstancedBufferAttribute(colors_arr, 3);
    meshRef.current.geometry.setAttribute("color", colorAttribute);
    meshRef.current.geometry.attributes.color.needsUpdate = true;
  }
}, [colors]);

颜色更新逻辑：

useEffect(() => {
  // Set color of hovered event
  let colors_clone = colors.slice(0);
  if (hovering.current) {
    const hoveringClr = new THREE.Color("#FFFFFF");
    colors_clone[hovering.current * 3] = hoveringClr.r;
    colors_clone[hovering.current * 3 + 1] = hoveringClr.g;
    colors_clone[hovering.current * 3 + 2] = hoveringClr.b;

    document.body.style.cursor = "pointer";
  } else {
    document.body.style.cursor = "auto";
  }

  // Reset color of previous event
  if (hovering.previous) {
    const prevClr = getEventColor(hovering.previous);
    colors_clone[hovering.previous * 3] = prevClr.r;
    colors_clone[hovering.previous * 3 + 1] = prevClr.g;
    colors_clone[hovering.previous * 3 + 2] = prevClr.b;
  }

  setColors(colors_clone);
}, [hovering]);

解决方案 #

核心问题是每次更新colors时都重新创建InstancedBufferAttribute，导致Three.js无法正确识别属性更新。正确做法是复用已有的属性对象，直接修改其数组数据后标记更新。

1. 修改初始化逻辑，复用属性对象

useEffect(() => {
  if (colors && meshRef.current) {
    const colorsArr = new Float32Array(colors);
    const geometry = meshRef.current.geometry;
    
    // 首次初始化创建属性，后续直接更新数组
    if (!geometry.attributes.color) {
      const colorAttribute = new THREE.InstancedBufferAttribute(colorsArr, 3);
      geometry.setAttribute('color', colorAttribute);
    } else {
      geometry.attributes.color.array.set(colorsArr);
      geometry.attributes.color.needsUpdate = true;
    }
  }
}, [colors]);

2. 优化hover颜色更新逻辑，直接操作属性数组

跳过状态中转，直接修改InstancedBufferAttribute的数组，减少性能开销：

useEffect(() => {
  if (!meshRef.current || !meshRef.current.geometry.attributes.color) return;

  const colorAttribute = meshRef.current.geometry.attributes.color;
  const colorsArr = colorAttribute.array;

  // 重置上一个hover实例的颜色
  if (hovering.previous !== null) {
    const prevClr = getEventColor(hovering.previous);
    const idx = hovering.previous * 3;
    colorsArr[idx] = prevClr.r;
    colorsArr[idx + 1] = prevClr.g;
    colorsArr[idx + 2] = prevClr.b;
  }

  // 设置当前hover实例的颜色
  if (hovering.current !== null) {
    const hoveringClr = new THREE.Color("#FFFFFF");
    const idx = hovering.current * 3;
    colorsArr[idx] = hoveringClr.r;
    colorsArr[idx + 1] = hoveringClr.g;
    colorsArr[idx + 2] = hoveringClr.b;
    document.body.style.cursor = "pointer";
  } else {
    document.body.style.cursor = "auto";
  }

  // 标记属性需要更新
  colorAttribute.needsUpdate = true;
}, [hovering]);

原因说明 #

• 重复创建InstancedBufferAttribute会导致Three.js重新分配GPU内存，旧属性的引用失效，视觉上无更新
• 直接修改已有属性的数组并设置needsUpdate = true，是Three.js更新缓冲区属性的标准方式，性能更优且更新可靠
• 对于20000个实例，避免状态中转和数组复制，能显著提升交互流畅度

内容的提问来源于stack exchange，提问作者Ivan Sedelkin