R3F如何销毁Canvas内所有元素、释放内存以切换至新Canvas

安全阿岳

2026-8-26

实现步骤

你用的是React Three Fiber技术栈，不需要手动遍历场景销毁对象，R3F自带生命周期回收能力，按以下步骤操作即可彻底清除内存完成画布切换：

用条件渲染控制Canvas的挂载与卸载
新增两个状态分别控制旧画布、新画布的显示，点击触发切换时先卸载旧Canvas，等DOM更新完成后再挂载新Canvas。R3F在Canvas组件卸载时会递归销毁场景下所有网格、材质、几何体、WebGL上下文，你用到的Physics物理世界也会同步自动销毁。
调整后的基础代码结构如下：

// 组件顶层新增状态
const [showEntryCanvas, setShowEntryCanvas] = useState(true)
const [showNewCanvas, setShowNewCanvas] = useState(false)

// 画布切换回调，绑定到Mac屏幕点击逻辑上
const handleCanvasSwitch = () => {
  setShowEntryCanvas(false)
  // 错开一帧保证旧画布完全卸载
  setTimeout(() => setShowNewCanvas(true), 0)
}

return (
  <div className="entry-page">
    {showEntryCanvas && (
      <Canvas camera={{ fov: 30 }} dpr={[1, 2]}>
        <spotLight intensity={1.2} position={[3, 15, 5]} />
        <CameraAnimation monitorClick={monitorClick} />
        <Stats />
        <Mac 
          monitorClick={monitorClick} 
          setMonitorClick={setMonitorClick}
          onScreenClick={handleCanvasSwitch} 
        />
        <Keyboard rotation={[0, 0.2, 0]} />
        <Coffee />
        <Touchpad />
        <Physics>
          <DeskPlane />
          <CollisionPlane />
          <Desk />
          <ReactLogo />
          <SassLogo />
          <ThreeJsLogo />
        </Physics>
      </Canvas>
    )}
    {showNewCanvas && <YourNewCanvasContent />}
  </div>
);

补全自定义资源的释放逻辑
R3F的自动回收不会覆盖你手动加载的外部资源，包括自定义纹理、原生ShaderMaterial、自行创建的BufferGeometry、手动绑定的全局事件监听，这类资源需要在对应组件的卸载回调里手动调用dispose()释放，举个组件内清理的例子：

function Coffee() {
  const customTexture = useRef(null)
  useEffect(() => {
    // 自定义纹理加载逻辑
    customTexture.current = textureLoader.load('/coffee_albedo.png')
    // 组件卸载时执行清理
    return () => {
      customTexture.current?.dispose()
    }
  }, [])

  return <mesh>{/* 模型渲染逻辑 */}</mesh>
}

非生态原生组件单独清理
你代码里引入的Stats性能面板、如果后续手动引入原生Three.js的控制器、后期处理Pass这类非R3F生态的组件，需要在对应组件卸载时手动调用实例的dispose()方法，移除绑定的DOM事件、帧循环回调。官方生态库的组件（比如drei的控制器、rapier的Physics）已经内置了清理逻辑，不需要额外处理。

注意：不要手动执行清空场景子节点、强制销毁渲染器的操作，这类操作会打断R3F内部的清理流程，反而容易造成内存残留。如果要验证清理效果，可以打开浏览器内存面板，切换画布后拍摄堆快照，搜索Mesh、Texture、Geometry关键词，确认没有旧场景的实例残留即可。

内容的提问来源于stack exchange，提问作者oooogz