tommasoturchi
AR / threejs environment persisting between route changes
I have a nextJS app with multiple AR pages. If i look at one AR scene, then go back to the list and navigate to another AR scene a boxGeometry is left in the threejs environment.
I have tested with using image textures and video textures on a boxGeometry object. The behaviour is that the geometry correctly shows a texture passed as an image, or video to the component and works correctly. Navigating to a new page appear which will pass the AR component a different image or video prop then will show the previous geometry still in the scene, its texture is updated to the new image, or video, but the geometry remains frozen in place
Uhm do you have a small example to clarify a bit? Perhaps the objects are not getting destroyed and just hidden, but without looking at the code it's a big hard to diagnose.
I have a repo thats private and its a little hard to share/replicate as it relies on a sanity backed with copyright work. I might be able to make something different to help, but perhaps i can explain better:
I'm using NextJS v 14.2 currently, using the app router.
I have routes with the react-three-mind AR displayed in a component. Using NextJS's built in Link component to navigate between routes I'm finding that the three environment isn't completely cleared. I suspect something is hanging around. As you can see my original post was a while ago, so i'm a bit fuzzy on the exact details, but i suspect something isn't completely removed when the component is unmounted.
I fixed this by navigating between routes using the standard tag rather than NextJS Link tag. This effectively reloads the app, which isn't efficient - but fixes the issue, I twigged that this was the case as a manual reload also sorted the problem.
Asking ChatGPT give the following.
🧠 Why This Happens Next.js' Link and client-side navigation does not unmount the entire app, only the components associated with the route.
If your Canvas (from @react-three/fiber) or scene setup isn't correctly unmounted or if Three.js objects are not disposed of, they can linger in memory or even visually in the next route.
This is especially likely if the Canvas component is shared globally or not properly cleaned up on route changes.
Is there something that isn't cleaned up with useEffect perhaps?