react-spring/three 不适用于网格颜色答案

【问题标题】：react-spring/three not working for mesh colorreact-spring/three 不适用于网格颜色
【发布时间】：2022-01-09 06:06:38
【问题描述】：

我正在尝试为我的网格添加颜色过渡，但无法使用 react-spring 这样做

Scene.js

import { useSpring, animated } from '@react-spring/three'

const Cell = () => {
  const [hovered, hover] = useState(false);
  const springs = useSpring({ color: hovered ? 'hotpink' : 'orange'})

  <animated.mesh
   onPointerEnter={(e) => {
        e.stopPropagation();
        hover(true);
      }}
      onPointerLeave={(e) => {
        e.stopPropagation();
        hover(false);
      }}
   >
    <planeGeometry args={[1, 1, 1]} />
    <meshBasicMaterial color={springs.color} />
  </animated.mesh
}

这只会让我的网格变成白色/灰色。

在here 提供的示例中，他们以类似的方式使用它，我不确定它为什么不起作用。我已经通过在网格本身上更改 scale 对此进行了测试，然后它就可以工作了。

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

SpringValues 只能应用于animated 组件。那里有三个组件，mesh、planeGeometry 和 meshBasicMaterial。您已经为 mesh 设置了动画，但您没有对其应用 SpringValues，所以这是多余的。

因为您希望meshBasicMaterial 处理 SpringValue，您应该这样编写：

const Cell = () => {
  const [hovered, hover] = useState(false);
  const springs = useSpring({ color: hovered ? 'hotpink' : 'orange'})

  return <mesh
   onPointerEnter={(e) => {
        e.stopPropagation();
        hover(true);
      }}
      onPointerLeave={(e) => {
        e.stopPropagation();
        hover(false);
      }}
   >
    <planeGeometry args={[1, 1, 1]} />
    <animated.meshBasicMaterial color={springs.color} />
  </animated.mesh
}

你可以在这里看到这个工作——https://codesandbox.io/s/react-spring-forked-6qgre?file=/src/App.js

【讨论】：