How to dynamically remove/add elements to Canvas

[milenazuccarelli]

Hey guys,

I have a Canvas component and some links. Every time a link is clicked the content on the canvas should change, such as the meshes and their positions, but the lighting, post processing, etc. all remain the same. How can I dynamically remove all the children and replace them?

Thanks!

[gsimone]

You can use react to mount and unmount elements in the scene, they are regular components

const [show, toggle] = useState(true)

return (
   <>
       {show && <mesh>...</mesh>
       <mesh  onClick={() => toggle(!show)}>...</mesh>
   </>
)

When show is false, the first mesh will be removed from the scene and disposed without doing anything else