react-three-fiber到@react-three/fiber。在原语中更改对象不能正常工作-

Question

我刚刚在一个较旧的项目形式react-three-fiber和drei中更新了我的依赖项，将其改为@react-three/fiber和drei。一切都像预期的一样，整体性能要好得多。不幸的是，在primitive中对对象的更改不能正常工作。

这是我的ModelComponent：

function Model(props) {
 const model = useLoader(GLTFLoader, props.src);

 return (
  <mesh position={props.position} rotation={props.rotation}>
   <primitive
    object={model.scene}
   />
  </mesh>
 );
}

我在两个源之间切换props.src，但随后两个模型都同时加载，当我切换回来时，第二个模型将不再显示。

在更新我的依赖关系之前，一切都很好。我认为这一定是一些缓存问题，但我不知道到底是什么问题。

我希望你能帮助我。

在这方面，谢谢。

Answer 1

您可以通过为React提供一个key来提示React需要完全重新创建该组件。在本例中，您的模型的URL将成为一个很好的键，因为当URL更改时，您需要一个新的原语：

<primitive key={props.src} object={model.scene} />