卡顿原因:
没有在切换模型时清除上一个模型占用的内存。
关于模型内存问题:
- 我们在scene下有很多object对象,这些对象可以是你定义的mesh或者loader的模型。这些object下有material,geometry,这两者和内存紧密关联。
- 总体形成:scene->object->内存,这样的格局。
- scene.clear()仅仅是清除scene->object,保证模型不显示,并不会去除object->内存的关联,因此无法触发浏览器垃圾回收机制。
- 因此,需要dispose每个object的geometry和material来释放内存。
解决办法:
如下为threejs官方给出的代码,在销毁模型时使用,即可清除内存。
function clean() {
const meshes = [];
scene.traverse( function ( object ) {
if ( object.isMesh ) meshes.push( object );
} );
for ( let i = 0; i < meshes.length; i ++ ) {
const mesh = meshes[ i ];
mesh.material.dispose();
mesh.geometry.dispose();
scene.remove( mesh );
}
}