R3F - How to dispose of all elements in the Canvas element?

user_18196551 0
Viewed 51

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>
  );
react-three-fiber three.js reactjs javascript
1 Answers

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);
user_135423800
Related