Context Lost when I route to another page in react three fiber

Questions
1

Hello when I route from main page to another page using react-router-dom it shows THREE.WebGLRenderer: Context Lost. How can I resolve this error?

2

you should not have a canvas for each route, the canvas should persist between routes instead. you can have routes inside the canvas and switch contents. other than that “THREE.WebGLRenderer: Context Lost” is not bad, this is threejs discarding assets to free memory, it is a top level function even if the message seems dangerous.

try this GitHub - pmndrs/react-three-next: React Three Fiber, Threejs, Nextjs starter

or this

1 Like
3

Sorry bro, I went through the router transitions link you sent but I didn’t get to know how to resolve the problem I have did the routes thing its going to another page but 3d model in the routed page is not showing its blank with this message in console THREE.WebGLRenderer: Context Lost. Please help because I’m newbie here

4

Here is the code I did

Screenshot (1)
Screenshot (1)1600Ă—809 62.9 KB

Screenshot (2)
Screenshot (2)1600Ă—809 27 KB

Screenshot (3)
Screenshot (3)1600Ă—835 67.3 KB

5

as i said, if you have the canvas inside the route then on route-change everything will be dropped and discarded and a new canvas will be mounted, in that case it absolutely must print that message, if it didn’t it would mean you have a leak. this is not bad, it just means overhead, canvas needs to boot up again, assets need to be reloaded and reparsed, it’s a waste.

it is better to not put the canvas into your routes but persist it, you can have routes within the canvas. you can exchange contents of the canvas with routes. this is react after all, why

<Route>
  <Canvas>
    <SomeScene />

when you can do

<Canvas>
  <Route>
    <SomeScene />

now the canvas stays mounted, only contents change.

1 Like
6

Thank you so much its working