primitive tag in "React three fiber" not unmount the 3D model even when destroying the parent component

[bannarisoftwares]

Hello @tommasoturchi , Good day. We have react app, have 2 screens and want to render the multiple 3d models on AR screens. While user tap on AR model, we want to update on Main screen. Here model rendered based on targets are working fine. The problem is , On first time, user able to select the model and able to update the Main screen. But on second time, while i am try to open the AR screen, the first time selected 3d model is always rendering on tapped position. I am able to track the second target and second target 3d model also rendering, But the first 3d model is not going and unmounting. So how to unmount the previously selected 3d model from AR screen on each time open ?.

SandBox Link: https://codesandbox.io/s/ar-3d-model-unmount-issue-uf7t68

Target 1 image url : https://hiukim.github.io/mind-ar-js-doc/assets/images/bear-3c737546fb0bde7a9c45b45ee999d132.png

Target 2 image url : https://hiukim.github.io/mind-ar-js-doc/assets/images/raccoon-2ef571baece2ee4724d0d19edf3de791.png

[tommasoturchi]

Hi @bannarisoftwares ,
I'll take a closer look, but it might be due to how react-three-mind/you handle component disposal, but I didn't fully understand the problem, could you clarify it a bit?

[amcc]

not sure if this is a similar problem to what i'm seeing. I am using Next.js to show multiple pages each with a different AR scene. If I load a page with the AR target, then navigate back to my list of AR pages and load a different AR scene I see that the previous react-three-fiber plane is still visible. When i focus on the new target I see two planes with the target image jumping between the two.

I think the threejs objects are not getting disposed of correctly when the component unmounts.

In my case i'm using a videotexture with drei:
import { useVideoTexture, useTexture } from "@react-three/drei";

It could be a specific problem with this - i found that the video would keep playing despite navigating away from the page - a useEffect return to pause it and set the ref.current of the video to null solved that. I expect something else needs unmounting somehow.