@react-three / react-three-fiber: useLoader() 在 props 更改时加载新文件

Question

我有一个功能性反应组件并初始加载一个 gltf 模型 - 路径通过道具 - 这工作正常。

但是如果道具改变了组件重新渲染 - 我检查了 - 路径改变了，应该加载一个新的模型 - 但我没有。

如何实现这一目标？ 如果状态更新，我想交换/替换正在渲染的对象。

我尝试了不同的加载器，将 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;
    }

角色组件是这样渲染的：

<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。

您不能在 webgl/threejs 中重复使用网格或将同一对象两次放入场景中，它只会卸载和重新安装。

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

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

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