I want to destroy all models in Canvas after one click and switch to another Canvas. So I want to delete all items from memory as I will be changing. How can I do that?
return (
<div className="entry-page">
<Canvas camera={{ fov: 30 }} dpr={[1, 2]}>
<spotLight intensity={1.2} position={[3, 15, 5]} />
<CameraAnimation monitorClick={monitorClick} />
<Stats />
<Mac monitorClick={monitorClick} setMonitorClick={setMonitorClick} />
<Keyboard rotation={[0, 0.2, 0]} />
<Coffee />
<Touchpad />
{/* <OrbitControls /> */}
<Physics>
<DeskPlane />
<CollisionPlane />
<Desk />
<ReactLogo />
<SassLogo />
<ThreeJsLogo />
</Physics>
</Canvas>
</div>
);
Remove the old canvas from the html and replace it with new canvas
var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);