React Three Fiber中使用useRef实现Opacity动画无效问题

你的代码有两个核心问题导致opacity修改无效：

1. 几何体组件使用错误 #

React Three Fiber中没有名为<Plane>的内置组件，你应该使用**<planeGeometry>**来定义平面几何体。当前写法把未知的<Plane>嵌套在<mesh>内，导致planeRef指向的<mesh>并没有正确关联到你定义的材质，自然无法修改opacity。

2. 直接操作Three对象的属性可能被声明式更新覆盖 #

R3F是声明式框架，直接修改material.opacity可能会被React的状态更新逻辑覆盖，更规范的做法是用React状态来管理opacity值，让R3F自动同步到材质。

修正后的推荐代码 #

import { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'

export default function PlaneWithFade() {
  const planeRef = useRef<Mesh>(null)
  const [opacity, setOpacity] = useState(0)

  useFrame(() => {
    // 限制opacity不超过1，避免无限累加
    if (opacity < 1) {
      setOpacity(prev => prev + 0.01)
    }
  })

  return (
    <mesh ref={planeRef}>
      <planeGeometry args={[5, 5]} />
      <meshBasicMaterial 
        color="white" 
        opacity={opacity} 
        transparent={true}
      />
    </mesh>
  )
}

如果坚持直接操作材质（非声明式场景） #

如果一定要直接修改材质属性，需要确保几何体组件正确，同时手动标记材质需要更新：

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

export default function PlaneWithFade() {
  const planeRef = useRef<Mesh>(null)

  useFrame(() => {
    if (planeRef.current) {
      const material = planeRef.current.material as THREE.MeshBasicMaterial
      if (material.opacity < 1) {
        material.opacity += 0.01
        // 手动标记材质需要重新渲染
        material.needsUpdate = true
      }
    }
  })

  return (
    <mesh ref={planeRef}>
      <planeGeometry args={[5, 5]} />
      <meshBasicMaterial 
        color="white" 
        opacity={0} 
        transparent={true}
        dispose={false} // 防止R3F自动回收材质
      />
    </mesh>
  )
}

关键注意点：

• 必须使用R3F内置的几何体组件（如planeGeometry、boxGeometry等，全小写开头）
• 用状态管理属性是R3F的推荐写法，更符合React声明式逻辑
• 直接操作Three对象时，需设置needsUpdate = true触发材质重新渲染

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