I'm struggling with a webpage I'm constructing. It seems like a simple task, but I keep encountering issues that I suspect may be caused by a memory leak.
Despite spending most of the day researching for a solution, I can't seem to find one. I've followed all the advice I could find, but I'm still stuck.
I have 30 STL models, each under 120kb, that I switch between. Only three are displayed on screen at once and users can customize the entire model by swapping them out.
To change the colors of the models, I use:
var selectedObject = scene.getObjectByName(object);
newMaterial = '#'+matHex[newMaterial-1];
newMaterial = hexToRgb(newMaterial);
selectedObject.material.color = newMaterial;
This part works smoothly without any noticeable slowdowns.
For replacing the model, I use:
var mesh = scene.getObjectByName(object);
if (mesh instanceof THREE.Mesh)
{
scene.remove(mesh);
mesh.geometry.dispose();
mesh.geometry = null;
mesh.material.dispose();
mesh.material = null;
mesh = null;
}
Afterwards, I execute a function to add the model back into the scene:
function addHandle(){
loader.load( stlPath+'Handle'+handleID+'.stl', function ( geometry ) {
material = '0x'+matHex[handleMat-1]; //set color hex from array
var handleMaterial = new THREE.MeshPhongMaterial( { color: parseInt(material), specular: specular, shininess: shininess } );
var handleMesh = new THREE.Mesh( geometry, handleMaterial );
handleMesh.position.set( 0, 0, 0 );
handleMesh.rotation.set( Math.PI/2, - Math.PI/2, 0 );
handleMesh.scale.set( .008, .008, .008 );
handleMesh.name = "Handle";
handleMesh.id = handleID;
handleMesh.castShadow = true;
handleMesh.receiveShadow = true;
scene.add( handleMesh );
updateHandle(); //check if Handle needs to rotate
} );
}
Based on my research, this is the correct method for disposing of meshes. However, after processing around twelve meshes in this manner, the camera rotation starts to slow down and loading the next model takes longer. This lag becomes especially noticeable on mobile devices.
If anyone spots something obvious that I might be overlooking, I would greatly appreciate the help!