How to fix "THREE.WebGLRenderer: Context Lost"

Hello, everyone!!!
I am wada, 3D developer.
I have faced a challenge.


I hope for help from excellent and competent webgl experts.
Thank you.

this is a feature in threejs that helps with garbage collection, it should be called if the canvas gets unmounted. i’m guessing this is react-three-fiber? in that case it will call it automatically for you when the canvas umounts.

generally the amount of canvas you can open is limited in the browser, so the application should only ever open a single one and exchange contents instead. if your app opens and closes canvas across routes or views then that’s what you must fix.

Thank you for your reply, @drcmda
I have used only one canvas in this project.
And then the furnishing(contents) is also one.
I cant understand your answer.
Excuse me, please explain in more detail.
You are good friend, I wanna be a friend with you.
I am waiting for your help.

you open a canvas

you close a canvas → WebGLContext lost

as i said it forces a context loss to help the GC, this is an official feature in threejs, see three.js docs.

i would first make sure that the canvases you work with are stable and are never re-created or re-mounted.

when you are certain it’s not that it can be a real bug, too much resource allocation etc.

Okay, you are cool.
I will try it.
Where are you from?