1

我有带有自定义着色器和缓冲区几何图形的简单点网格。

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

到目前为止，一切都很好。

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

这是 Points 网格的代码片段：

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>
  );
};

完整的代码和示例可在代码沙箱上找到

当我尝试animProps.colors在 bufferAttribute 中使用颜色时，它无法更改颜色。

我究竟做错了什么？如何使它正确？

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

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

4

0 回答 0