Question

我正在 Next.js 中使用 react-three-fiber ，并且正在渲染包含画布并通过useGLTFoader加载glTF文件的组件。使用Next的dynamic导入和禁用的服务器端渲染。访问/重新加载页面时，glTF已加载并按预期显示。

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

THREE.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>
  );
};

导入（如here所述）是这样完成的：

const Rendering = dynamic(() => import('../rendering/rendering'), {
  ssr: false,
});

Answer 1

我不明白为什么，但是在显示glTF场景的dispose={null}中添加了道具<primitive />，为我解决了这个问题。

切换页面时，THREE.WebGLRenderer: Context Lost.消息仍然出现，因此我认为这与我的问题没有直接关系。

我的组件现在是这样指定的：

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

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

在NextJS中丢失Threejs上下文

1 个答案: