Reactjs 在NextJS中丢失threejs上下文

我正在使用Next.js中的react three fiber，并通过

useGLTFoader

使用Next的

dynamic

导入并禁用服务器端渲染来渲染包含画布和加载glTF文件的组件。 访问/重新加载页面时，glTF将按预期加载和显示

我的问题是，切换页面时出现以下错误：

3.WebGLRenderer:上下文丢失

再次导航回页面时，模型不可见，尽管画布可用，并且在指定操作上截图的我的组件也正常工作（但也不显示模型）

保存画布并呈现glTF的组件非常基本，如下所示：

export const Rendering = ({
  resourcePath,
}) => {
  const gltf = useGLTFLoader(resourcePath, false);

  return (
    <Canvas
      colorManagement
      shadowMap
      camera={{ position: new Vector3(1, 1, 1) }}
      pixelRatio={window.devicePixelRatio}
      gl={{ preserveDrawingBuffer: true }}
    >
      <MakeScreenshot />
      <primitive object={gltf.scene} position={[0, -1, 0} />
      <ambientLight intensity={0.8} />
      <pointLight intensity={1} position={[0, 6, 0]} />
    </Canvas>
  );
};

---

我不明白为什么，但将prop

dispose={null}

添加到渲染glTF场景的

中，为我解决了这个问题

THREE.WebGLRenderer:Context Lost.

消息在切换页面时仍然出现，因此我假设它与我的问题没有直接关系

我的组件现在指定如下：

export const Rendering = ({
  resourcePath,
}) => {
  const gltf = useGLTFLoader(resourcePath, false);

  return (
    <Canvas
      colorManagement
      shadowMap
      camera={{ position: new Vector3(1, 1, 1) }}
      pixelRatio={window.devicePixelRatio}
      gl={{ preserveDrawingBuffer: true }}
    >
      <MakeScreenshot />
      <primitive object={gltf.scene} position={[0, -1, 0} />
      <ambientLight intensity={0.8} />
      <pointLight intensity={1} position={[0, 6, 0]} />
    </Canvas>
  );
};

导出常量渲染=({
资源路径，
}) => {
const gltf=useGLTFLoader（resourcePath，false）；
返回(
);
};

next和react three fiber也有同样的问题，您找到解决方案了吗？