react-spring/three无法实现mesh颜色过渡效果该如何处理？

问题原因 #

• 你只给mesh加了animated修饰，但使用的meshBasicMaterial是原生R3F组件，无法消费react-spring返回的动态弹簧值，必须改为animated.meshBasicMaterial才能让颜色的动态值生效。
• 你的Cell组件未返回JSX结构，代码中定义的网格没有被实际渲染。
• 缺少useState的导入语句，同时animated.mesh的闭合标签存在语法缺失。

修正后代码 #

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

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

  return (
    <animated.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>
  )
}

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