如何为useGLTF加载的GLB模型添加透明度0至1的淡入效果？

要实现透明度从0到1的淡入效果，你可以通过React Three Fiber的状态管理和帧动画来实现，同时需要调整材质的透明属性，具体实现如下：

核心思路 #

• 用useState管理透明度状态，初始值设为0
• 通过useFrame逐帧更新透明度，加入缓动逻辑让动画更平滑
• 克隆GLB原材质并开启透明属性，避免修改共享材质影响其他场景

修改后的完整代码 #

import { useState, useFrame } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';

const Cell = () => {
  const { nodes, materials } = useGLTF(`${process.env.PUBLIC_URL}/cell.glb`);
  // 初始化透明度状态
  const [opacity, setOpacity] = useState(0);

  // 逐帧更新透明度，控制动画速度
  useFrame((_, delta) => {
    if (opacity < 1) {
      // 用delta适配不同帧率，0.5为动画速度系数，可按需调整
      setOpacity(prev => Math.min(prev + delta * 0.5, 1));
    }
  });

  // 克隆材质并配置透明属性
  const redMaterial = materials.red.clone();
  redMaterial.transparent = true;
  redMaterial.opacity = opacity;

  const glassMaterial = materials['GLB GLASS'].clone();
  glassMaterial.transparent = true;
  glassMaterial.opacity = opacity;

  return (
    <group scale={1}>
      <mesh
        name="Sphere001"
        geometry={nodes.Sphere001.geometry}
        material={redMaterial}
        morphTargetDictionary={nodes.Sphere001.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001.morphTargetInfluences}
      />
      <mesh
        name="Sphere001_1"
        geometry={nodes.Sphere001_1.geometry}
        material={glassMaterial}
        morphTargetDictionary={nodes.Sphere001_1.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001_1.morphTargetInfluences}
      />
    </group>
  );
};

// 预加载模型提升体验
useGLTF.preload(`${process.env.PUBLIC_URL}/cell.glb`);
export default Cell;

关键细节说明 #

• 材质克隆：必须克隆原材质，因为useGLTF返回的材质是全局共享的，直接修改会导致所有使用该材质的模型同步变化
• 动画适配：使用delta（帧间隔时间）控制动画速度，确保在不同帧率设备上动画节奏一致
• 透明开关：必须设置transparent: true，否则材质的opacity属性不会生效

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