在 NextJS 中丢失 threejs 上下文
Losing threejs context in NextJS
我在 Next.js 中使用 react-three-fiber 并渲染包含 canvas 并使用 Next 的 dynamic
导入通过 useGLTFoader
加载一个 glTF 文件并禁用服务器端渲染。
访问/重新加载页面时,glTF 会按预期加载和显示。
我的问题是,在切换页面时出现以下错误:
THREE.WebGLRenderer: Context Lost.
再次导航回页面时,模型不可见,尽管 canvas 可用并且我的组件在指定操作上截屏也正常工作(但不显示模型为嗯)。
持有 canvas 并呈现 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,
});
我不明白为什么,但是将道具 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>
);
};
我在 Next.js 中使用 react-three-fiber 并渲染包含 canvas 并使用 Next 的 dynamic
导入通过 useGLTFoader
加载一个 glTF 文件并禁用服务器端渲染。
访问/重新加载页面时,glTF 会按预期加载和显示。
我的问题是,在切换页面时出现以下错误:
THREE.WebGLRenderer: Context Lost.
再次导航回页面时,模型不可见,尽管 canvas 可用并且我的组件在指定操作上截屏也正常工作(但不显示模型为嗯)。
持有 canvas 并呈现 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,
});
我不明白为什么,但是将道具 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>
);
};