Three.js場景被絞死並變得緩慢

Question

三個場景包含球體和平面幾何體，球體紋理包含圖像和平面幾何體 被紋理化爲2d文本，並且平面幾何體附有單擊事件，當單擊在平面幾何 與鼠標我需要刪除以前的球體和平面幾何和加載新的球體與新的紋理 圖像和新的平面幾何這是發生的，但以前的球面和平面幾何仍然在內存中，我需要 刪除這些對象，我試圖使用「處置」的方法，但沒有幫助我可能是我犯了一些錯誤 執行處置方法，因此，現場被絞死，有人可以請幫助我如何解決 這個問題。我已經添加了一部分代碼，可能會給出有關該問題的想法。 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++) 
      { 

       var cardinal = {ID: parseInt(spriteResponse[i].ID), lat: parseFloat(spriteResponse[i].lat), lon: parseFloat(spriteResponse[i].lng), name: spriteResponse[i].name}; 
       //var sprite = new labelBox(cardinal, radius, root); 
       //sprite.update(); was previously commented   
       //spritearray.push(sprite); 

       var phi = Math.log(Math.tan(cardinal.lat*(Math.PI/180)/2 + Math.PI/4)/Math.tan(click_marker.getPosition().lat()* (Math.PI/180)/2 + Math.PI/4)); 
       var delta_lon = Math.abs(click_marker.getPosition().lng() - cardinal.lon)*Math.PI/180; 
       var bearing = Math.atan2(delta_lon , phi) ; 
       var Z_value = Math.cos(bearing)*(radius*0.75); 
       var X_value = Math.sin(bearing)*(radius*0.75); 

       var canvas = document.createElement('canvas'); 
       context = canvas.getContext('2d'); 
       metrics = null, 
       textHeight = 32, 
       textWidth = 0, 
      // actualFontSize = 2; 
       context.font = "normal " + textHeight + "px Arial"; 
       metrics = context.measureText(cardinal.name); 
       var textWidth = metrics.width; 
       //var textHeight = metrics.height; 
       canvas.width = textWidth; 
       canvas.height = textHeight; 
       context.font = "normal " + textHeight + "px Arial"; 
       context.textAlign = "center"; 
       context.textBaseline = "middle"; 
       context.beginPath(); 
       context.rect(0, 0, textWidth, textHeight); 
       context.fillStyle = "white"; 
       context.fill(); 

       context.fillStyle = "black"; 
       context.fillText(cardinal.name, textWidth/2, textHeight/2); 


       texture_plane = new THREE.Texture(canvas); 
       var GPU_Value = renderer.getMaxAnisotropy(); 
       texture_plane.anisotropy = GPU_Value; 
       texture_plane.needsUpdate = true; 



       //var spriteAlignment = new THREE.Vector2(0,0) ; 
       material = new THREE.MeshBasicMaterial({color: 0xffffff,side: THREE.DoubleSide ,map : texture_plane}); 
       material.needsUpdate = true; 
       //material.transparent=true; 
       geometry = new THREE.PlaneGeometry(0.3, 0.2); 
       plane = new THREE.Mesh(geometry, material); 
       plane.database_id = cardinal.ID; 
       plane.LabelText = cardinal.name; 


       //plane.scale.set(0.3, 0.3,1); 
       plane.scale.set(textWidth/165, textHeight/70, 1); 
       plane.position.set(X_value,0,Z_value); 
       plane.coordinates = { X: X_value, Z: Z_value}; 
       plane.lat_lon = { LAT: cardinal.lat, LON: cardinal.lon}; 
       plane.textWidth = textWidth; 
       plane.textHeight = textHeight; 
       objects.push(plane); 
       scene.add(plane); 
       plane.userData = { keepMe: true }; 
       //objects.push(plane); 
       //plane.id = cardinal.ID; 
       //var direction = camera.getWorldDirection(); 
       camera.updateMatrixWorld(); 
       var vector = camera.position.clone(); 
       vector.applyMatrix3(camera.matrixWorld); 
       plane.lookAt(vector); 



       document.addEventListener('mousedown', onDocumentMouseDown, false); 


      } 
function onDocumentMouseDown(event) 
      { 

       //clearScene(); 
       event.preventDefault(); 

       var mouse = new THREE.Vector2(); 
       mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
       mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
       var raycaster = new THREE.Raycaster(); 
       raycaster.setFromCamera(mouse, camera);    
       var intersects = raycaster.intersectObjects(objects);     

       var matched_marker = null; 
       if(intersects.length != 0) 
       { 
        for (var i = 0; intersects.length > 0 && i < intersects.length; i++) 
        { 
         var x_id = intersects[0].object.database_id;       
          for(var j = 0; markers.length > 0 && j < markers.length; j++) 
         { 
          if(x_id == markers[j].ID) 
          { 
           matched_marker = markers[j]; 
           break; 
          }        
         } 
         if(matched_marker != null) 
         { 
          break; 
         }  
        } 

        // loadScene(); 
        clean_data(); 
        google.maps.event.trigger(matched_marker, 'click'); 


       } 

     } 
    function clean_data() 
     { 
      for(var k=0;k<objects_sphere.length;k++) 
      { 
       scene.remove(objects_sphere[k]); 
       objects_sphere[k].geometry.dispose(); 
       objects_sphere[k].material.map.dispose(); 
       objects_sphere[k].material.dispose(); 



      } 

      for (var j=0; j<objects.length; j++) 
      { 
       scene.remove(objects[j]); 
       objects[j].geometry.dispose(); 
       objects[j].material.map.dispose(); 
       objects[j].material.dispose(); 

      // objects[j].material.needsUpdate = true; 




      } 

      /*spheregeometry.dispose(); 
      spherematerial.dispose(); 
      texture.dispose(); 
      scene.remove(sphere);*/ 
     } ` 

Answer 1

它看起來像你從來沒有重新描繪無論是在示例代碼或的jsfiddle現場。如果您從場景中移除對象並保留對象，則可能是您沒有再次渲染場景。嘗試添加一個渲染循環。

animationLoop() { 
    myrenderer.render(myScene, myCamera) 
    window.requestAnimationFrame(animationLoop) 
}