1. 首页
  2. three.js

three.js正在寻找有关记忆问题的帮助,请将三个功能与React集成

我有一个React组件,它基本上是Obj和Mtl加载程序示例,移植到ComponentDidMount上的React组件中运行。Obj和Mtl值作为道具从父级中的状态传递。我遇到的问题是,当道具更改为加载一个新模型时,所有三个代码都只在挂载上运行,因此我将清除场景,删除画布标记,然后在ComponentDidUpdate中再次运行整个脚本。这似乎效率很低,在6或7个型号切换后速度会减慢。我想知道是否有人能帮我找到一种不浪费内存的正确方法?提前感谢。n从“React”导入React;导入*作为“三满”类三容器的三个扩展反应组件= = document.getElementById(“OBJ”);document.body.appendChild(==函数(xhr){if(长度可计算)=新的三.目标装载机();objLoader.setMaterials(材料);objLoader.setPath(“obj/”);objLoader.load(模型、函数(对象=窗口宽度= ( event.clientY-windowHalfY)/1;}函数animate(){requestAnimationFrame(animate);render();}函数render(){摄像机位置.x+=(鼠标-摄像机位置.x)*.1;摄像机位置.y+=(-mouseY-摄像机位置.y)*.1;摄影机,看( 场景位置);渲染器.render(场景,摄影机);}}}componentDidUpdate(){var摄影机,场景,==new透视照相机( 45, 窗口宽度/ 窗内高度,1,2000);//导出模型翻转z=new三,颜色(0xDDDD=加载的/ xhr.total* 100;console.log( 数学圆(完成百分比,2)+%下载“==新3.webgl渲染器();renderer.setPixelRatio( window.devicePixelRatio);.setSize( 窗口宽度, 窗内高度);container.appendChild( D.DomeElement);document.addEventListener(“mousemove”,onDocumentMouseMove,false);window.addEventListener(“调整大小”,onWindowResize,false);}函数=(event.clientX-windowHalfX)/+=(鼠标-摄像机位置.x)*.1;摄像机位置.y+=(-mouseY-摄像机位置.y)*.1;摄影机,看( 场景位置);渲染器.render(场景,摄影机);}}}render(){returnstackoverflow.com正确销毁场景并在React in ComponentDidUpdate 18中使用三个js更新OBJ加载程序,three.js约书亚于UTC时间4月18日凌晨4:51询问n Looking for help with memory issues integrating Three with Reactn

three.js正在寻找有关记忆问题的帮助,请将三个功能与React集成 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e6%ad%a3%e5%9c%a8%e5%af%bb%e6%89%be%e6%9c%89%e5%85%b3%e8%ae%b0%e5%bf%86%e9%97%ae%e9%a2%98%e7%9a%84%e5%b8%ae%e5%8a%a9%ef%bc%8c%e8%af%b7%e5%b0%86%e4%b8%89%e4%b8%aa%e5%8a%9f%e8%83%bd%e4%b8%8erea/