Question

NextJS 中丢失 threejs 上下文

2020-09-01

2852

reactjs next.js react-three-fiber

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

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

THREE.WebGLRenderer: Context Lost.

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

保存画布并呈现 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>
  );
};

导入（如此处所述）按如下方式完成：

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

Answer 1

我不明白为什么，但是将 prop dispose={null 添加到渲染 glTF 场景的 <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>
  );
};