問題描述
在使用three.js渲染3D模型時(shí)朝聋，經(jīng)常性的會(huì)遇到在連續(xù)添加模型后来颤，導(dǎo)致瀏覽器崩潰的問題汰扭，經(jīng)過排查，發(fā)現(xiàn)是瀏覽器占用了太多的內(nèi)存福铅，但是卻一直沒有釋放萝毛，導(dǎo)致內(nèi)存被耗盡而崩潰。
解決方法
排查到問題之后滑黔，相關(guān)操作為：當(dāng)重新創(chuàng)建和加載模型時(shí)笆包，需要釋放內(nèi)存的操作，具體操作如下：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n5" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">?</pre>
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var meshList = [];
clearScene（）略荡； //創(chuàng)建前進(jìn)行之前添加的模型存儲(chǔ)釋放操作
for(var i = 0; i<100;i++) {
var spherGeo = new THREE.CylinderGeometry(6, 6, 30, 40, 80);
var spherMaterial = new THREE.MeshLambertMaterial({
color: color,
// wireframe: true
})
sphere = new THREE.Mesh(spherGeo, spherMaterial);
meshList.push(sphere);
sphere.position.set(pointData[i].x, pointData[i].y, pointData[i].z);
// sphere.rotation.x = 30;
scene.add(sphere);
renderer.render(scene, camera); //重新渲染界面加載模型
}
?
/**
* 清除模型庵佣，模型中有 group 和 scene,需要進(jìn)行判斷
* @param scene
* @returns
*/
function clearScene(){
// 從scene中刪除模型并釋放內(nèi)存
if(meshList.length > 0){
for(var i = 0; i< meshList.length; i++){
var currObj = meshList[i];
// 判斷類型
if(currObj instanceof THREE.Scene){
var children = currObj.children;
for(var i = 0; i< children.length; i++){
deleteGroup(children[i]);
}
}else{
deleteGroup(currObj);
}
scene.remove(currObj);
}
}
}
?
// 刪除group，釋放內(nèi)存
function deleteGroup(group) {
//console.log(group);
if (!group) return;
// 刪除掉所有的模型組內(nèi)的mesh
group.traverse(function (item) {
if (item instanceof THREE.Mesh) {
item.geometry.dispose(); // 刪除幾何體
item.material.dispose(); // 刪除材質(zhì)
}
});
}
?
參考文章： https://blog.csdn.net/ItChuangyi/article/details/85242427
