Canvas not working

Questions
1 
const EarthCanvas = () => {
  return(
    <Canvas
    shadows
    frameloop='demand'
    gl={{preserveDrawingBuffer: true}}
    camera={{}}
    >
      <Suspense fallback={<CanvasLoader/>}>
        <OrbitControls
        autoRotate
        enableZoom={false}
        maxPolarAngle={Math.PI/2}
        minPolarAngle={Math.PI/2}
        />
        <Earth/>

      </Suspense>

    </Canvas>
  )
}

export default EarthCanvas

I am trying to import my earth canvas here. But if i get this model, then my previous computer canvas isnt loading. and i get the following warning.

chunk-WSOZJKFA.js?v=26b7929f:17824 WARNING: Too many active WebGL contexts. Oldest context will be lost.

What can I do here? Am I doing something wrong? Please help :frowning:

2

I think thats because you are making too many canvas, you should give each canvas a separate ID and in the r3f code define the id of each canvas.

3

browser has an arbitrary limit, you can open x canvas until it crashes the tab. maybe 6, maybe 8 maybe more, or less, it’s up to the browser. i believe that every canvas you open counts against the limit, no matter if it’s closed afterwards.

you have a solution for that in the fiber eco system GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

4

issue solved! thanks a lot!! :slight_smile: