javascript - @ react 三/ react 三纤维 : useLoader() to load new file on props change

Question

我有一个功能性 react 组件并初始加载一个 gltf 模型 - 路径通过 Prop - 这工作正常。
但是如果 Prop 改变了组件重新渲染——我检查了——路径改变了，应该加载一个新的模型——但我没有。
怎么能做到这一点？
如果状态更新，我想交换/替换正在渲染的对象。
我尝试了不同的加载器，将 gltf 设置为一个状态，但这些都没有。我想我错过了一个基本概念。请帮助

  function Character(props) {
      const spinner = useRef();
      console.log(props.model, "from modelpreviewer");
      const gltf = useLoader(GLTFLoader, props.model);
    
      return gltf ? (
        <primitive
          ref={spinner}
          object={gltf.scene}
        />
      ) : null;
    }

Character 组件呈现如下:

<Canvas
   camera={{ position: [0, 0, 10] }}>
    <ambientLight intensity={0.8} />
    <spotLight intensity={0.7} position={[300, 300, 400]} />
    <Suspense fallback={null}>
      <Character model={props.model} />
    </Suspense>
  </Canvas>

Answer 1

我测试useLoader的问题渲染纹理时，它对我来说很好。
这是一个简单的example这表明纹理将在 props 时发生变化改变了。
我猜你错过了指向 props.model 的正确路径.也许您可以硬编码 props.model 的值确保文件路径正确与否。
已编辑
我找到了 gltf 只渲染一次的原因。答案是here .

You can't reuse meshes or put the same object into the scene twice in webgl/threejs, it will just unmount and remount.

另一种解决方案是 clone the scene .

const { scene } = useLoader(GLTFLoader, url)
const copiedScene = useMemo(() => scene.clone(), [scene])

我还在 codesandbox 上提供了一个固定示例.