react+treejs页面跳转后清理treejs

心之所向❤️

在使用 React 和 Three.js 时，如果在页面跳转后 Three.js 的资源没有被正确释放，可能会导致 GPU 占用过高。以下是一些可能的解决方案：

• 清理 Three.js 资源：在组件的 componentWillUnmount 方法（对于类组件）或 useEffect 的返回函数（对于函数组件）中，确保清理 Three.js 的资源，如场景、相机、渲染器等。
  
  1. useEffect(() => {
     
  2.   // 初始化 Three.js 资源
     
  3.   const scene = new THREE.Scene();
     
  4.   const camera = new THREE.PerspectiveCamera(...);
     
  5.   const renderer = new THREE.WebGLRenderer();
     
  6. 
     
  7.   // 在组件卸载时清理资源
     
  8.   return () => {
     
  9.     renderer.dispose(); // 释放 WebGL 资源
     
  10.     scene.traverse((object) => {
      
  11.       if (object instanceof THREE.Mesh) {
      
  12.         if (object.geometry) object.geometry.dispose();
      
  13.         if (object.material) {
      
  14.           if (Array.isArray(object.material)) {
      
  15.             object.material.forEach(material => material.dispose());
      
  16.           } else {
      
  17.             object.material.dispose();
      
  18.           }
      
  19.         }
      
  20.       }
      
  21.     });
      
  22.   };
      
  23. }, []);
      

  复制代码
  
  
• 确保没有未取消的动画或事件监听器：如果你在场景中使用了动画或事件监听器，请确保在组件卸载时也取消它们，以避免内存泄漏。
  
• 使用 requestAnimationFrame：如果你在渲染循环中使用 requestAnimationFrame，确保在卸载时停止它。你可以通过标记一个变量来控制渲染循环。
  
  1. let animationId;
     
  2. 
     
  3. const animate = () => {
     
  4.   animationId = requestAnimationFrame(animate);
     
  5.   // 更新场景和渲染
     
  6. };
     
  7. 
     
  8. useEffect(() => {
     
  9.   animate();
     
  10.   return () => {
      
  11.     cancelAnimationFrame(animationId); // 停止动画
      
  12.   };
      
  13. }, []);
      

  复制代码
  
  

晴天小鹿☀️歷

谢谢分享

梦幻森林

11111111111

微笑的鱼

11111111111111

清风徐来☘️

1111111111111111111

风中的花瓣

66666666666666666

森屿微风

感谢楼主分享，有你更精彩！！！

小熊软糖

66666666666666666

梦里星河✨

1111111111111111111

心之所向

11111111111111