In the threejs scene, there is a sphere geometry and a plane geometry. The sphere is textured with an image, while the plane geometry is textured with 2D text. The plane geometry is also attached with a click event. When clicking on the plane geometry, the previous sphere and plane geometry should be removed, and new sphere with a new textured image and fresh plane geometry should be loaded. However, the old sphere and plane geometry objects are still stored in memory and need to be removed. The "dispose" method was attempted, but it did not resolve the issue, possibly due to an error in the implementation of the dispose method leading to a scene freeze. Can someone offer assistance on how to fix this problem? A snippet of the code is provided below for reference.https://jsfiddle.net/v1ayw803/
var spheregeometry = new THREE.SphereGeometry(radius, 20, 20, 0, -6.283, 1, 1);
var texture = THREE.ImageUtils.loadTexture(response.ImagePath);
texture.minFilter = THREE.NearestFilter;
var spherematerial = new THREE.MeshBasicMaterial({map: texture});
var sphere = new THREE.Mesh(spheregeometry, spherematerial);
//texture.needsUpdate = true;
scene.add(sphere);
var objects = [];
var objects_sphere = [];
objects_sphere.push(sphere);
for(var i=0; i<spriteResponse.length; i++)
{
// Code omitted for brevity
}
function onDocumentMouseDown( event )
{
// Code omitted for brevity
}
function clean_data()
{
// Code omitted for brevity
}