使用gltfjsx生成组件复用GLB模型时动态修改材质颜色失效的问题咨询

我最近在使用React Three Fiber和gltfjsx开发时遇到了一个头疼的问题：当我复用同一个GLB模型组件，传入不同的颜色属性时，所有实例的材质颜色都会被最后一次传入的颜色覆盖，完全没法独立控制。

具体场景是这样的：我创建了两个衬衫模型实例，一个传blue颜色，另一个传red颜色，但最后两个模型都显示成红色了。虽然控制台打印props.color能看到分别输出了blue和red，说明属性是正确传递的，但材质颜色就是不生效。

先给大家看一下我的代码：

App.jsx 组件调用代码 #

import { Canvas } from '@react-three/fiber'
import { BakeShadows, OrbitControls, Stage } from '@react-three/drei'
import Shirt from './Shirt'

export default function Viewer() {
  return (
    <Canvas shadows camera={{ position: [0, 0, 150], fov: 40 }}>
      <Stage environment="city" intensity={0.6}>
        <Shirt color="blue" position={[0, 0, 0]} />
        <Shirt color="red" scale={-1} rotation={[0, 0.5, Math.PI]} position={[0, 0, -2]} />
      </Stage>
      <BakeShadows />
      <OrbitControls makeDefault autoRotate />
    </Canvas>
  )
}

gltfjsx生成的Shirt.jsx组件 #

import React from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const { nodes, materials } = useGLTF('/shirt_baked.glb')
  console.log(props.color)
  return (
    <group {...props} dispose={null}>
      <mesh 
        geometry={nodes.T_Shirt_male.geometry} 
        material={materials.lambert1} 
        material-color={props.color} 
      />
    </group>
  )
}

useGLTF.preload('/shirt_baked.glb')

我原本以为通过material-color={props.color}就能把传入的颜色绑定到每个实例的材质上，但实际效果完全不对。我猜测可能是因为useGLTF预加载后，材质是同一个共享实例，所以修改其中一个的颜色会影响所有使用这个材质的模型？

现在想请教大家：有没有办法只加载一次GLB模型，然后在复用组件的时候，让每个实例都能独立修改包括材质颜色在内的所有属性？我不想为每个实例都重新加载一遍模型，那样太浪费性能了。

内容来源于stack exchange