Reactjs 使用react three fiber和react spring设置缓冲区属性的动画

我有简单的点网格与自定义着色器和缓冲区几何体

几何体具有位置、大小和颜色属性。 指针悬停时，悬停的顶点变为红色

到目前为止还不错

现在，我想设置悬停顶点颜色变化的动画

以下是点网格的代码片段：

const Points = (
  props = { hoveredIndex: null, initialCameraZ: 0, array: [], sizes: [] }
) => {
  const [_, setHover] = useState(false);

  const vertices = new Float32Array(props.array);
  const sizes = new Float32Array(props.sizes);
  const _colors = genColors(props.sizes.length); // returns [] of numbers.

  const uniforms = useMemo(() => {
    return {
      time: { type: "f", value: 0.0 },
      cameraZ: { type: "f", value: props.initialCameraZ }
    };
  }, [props.initialCameraZ]);

  // trying to use react-spring here
  const [animProps, setAnimProps] = useSpring(() => ({
    colors: _colors
  }));

  const geometry = useUpdate(
    (geo) => {
      if (props.hoveredIndex !== null) {
        const i = props.hoveredIndex * 3;
        const cols = [..._colors];
        cols[i] = 1.0;
        cols[i + 1] = 0.0;
        cols[i + 2] = 0.0;

        geo.setAttribute(
          "color",
          new THREE.BufferAttribute(new Float32Array(cols), 3)
        );

        setAnimProps({ colors: cols });
      } else {
        geo.setAttribute(
          "color",
          new THREE.BufferAttribute(new Float32Array(_colors), 3)
        );

        setAnimProps({ colors: _colors });
      }
    },
    [props.hoveredIndex]
  );

  return (
    <a.points
      onPointerOver={(e) => setHover(true)}
      onPointerOut={(e) => setHover(false)}
    >
      <a.bufferGeometry attach="geometry" ref={geometry}>
        <bufferAttribute
          attachObject={["attributes", "position"]}
          count={vertices.length / 3}
          array={vertices}
          itemSize={3}
        />
        <bufferAttribute
          attachObject={["attributes", "size"]}
          count={sizes.length}
          array={sizes}
          itemSize={1}
        />
        <a.bufferAttribute
          attachObject={["attributes", "color"]}
          count={_colors.length}
          array={new Float32Array(_colors)}
          // array={animProps.colors} // this does not work
          itemSize={3}
        />
      </a.bufferGeometry>
      <shaderMaterial
        attach="material"
        uniforms={uniforms}
        vertexShader={PointsShader.vertexShader}
        fragmentShader={PointsShader.fragmentShader}
        vertexColors={true}
      />
    </a.points>
  );
};

const Points=(
props={hoveredIndex:null，initialCameraZ:0，数组：[]，大小：[]
) => {
const[_，setHover]=useState（false）；
常量顶点=新的Float32Array（props.array）；
常量大小=新的Float32Array（props.size）；
const _colors=genColors（props.size.length）；//返回[]个数字。
const制服=使用备忘录（（）=>{
返回{
时间：{type:“f”，值：0.0}，
cameraZ:{type:“f”，值：props.initialCameraZ}
};
}，[props.initialCameraZ]）；
//试着在这里使用弹簧
const[animProps，setAnimProps]=useSpring（（）=>({
颜色：_颜色
}));
常量几何体=使用更新(
（geo）=>{
如果（props.hoveredIndex！==null）{
常数i=props.hoveredIndex*3；
常数cols=[…_颜色]；
cols[i]=1.0；
cols[i+1]=0.0；
cols[i+2]=0.0；
geo.setAttribute(
“颜色”，
新的THREE.BufferAttribute（新的Float32Array（cols），3）
);
setAnimProps（{colors:cols}）；
}否则{
geo.setAttribute(
“颜色”，
新的THREE.BufferAttribute（新的Float32Array（_颜色），3）
);
setAnimProps（{colors:_colors}）；
}
},
[道具.悬停索引]
);
返回(

当我尝试使用
animProps.colors
作为缓冲属性中的颜色时，它无法更改颜色

我做错了什么？如何改正

我知道我可以创建“开始”和“目标”颜色属性，将它们传递到着色器并在那里进行插值，但这会影响使用react three fiber的目的

有没有办法在react three fiber中设置缓冲区属性的动画