R3F -如何处理画布元素中的所有元素?

Question

我想在点击后破坏画布中的所有模型并切换到另一个画布。所以我想从记忆中删除所有项目，因为我将改变。我该怎么做呢?

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

Answer 1

从html中删除旧的画布并替换为新的画布

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);