THREE.WebGLRenderer：上下文丢失

Question

我有 20 个 3D 对象需要在单个页面上单独渲染。问题是只加载了大约 13 个对象，其余的没有显示。我收到此错误 THREE.WebGLRenderer：上下文在控制台中丢失。我的对象相对较轻，平均大小为 1MB。它们的光纹理最大为 2 MB。我读到这个错误与内存和RAM有关。但正如我提到的，我的文件并没有那么重。

你们认为这有解决办法吗？也许有一些建议。

谢谢你。

Answer 1

错误消息“THREE.WebGLRenderer: Context Lost”表示WebGL上下文已丢失，这可能是由GPU重置或驱动程序崩溃等多种原因引起的。解决此问题的一种方法是尝试通过将属性 gl={{preserveDrawingBuffer:true}} 添加到 Canvas 组件来重置 WebGL 上下文：

function App() {
  return (
    <div style={{ height: "100vh", width: "100vw" }}>
      <Canvas gl={{preserveDrawingBuffer:true}}>
      </Canvas>
    </div>
  );
}