Three.jsのシーンがぶら下がってゆっくりとなります

Question

3jsのシーンは球と平面のジオメトリから成ります。球は画像と平面のジオメトリでテクスチャされます は2dのテキストでテクスチャされ、プレーンジオメトリはclickイベントでアタッチされます。マウスで平面形状 に私は、以前の球と平面ジオメトリを削除し、新しいテクスチャ イメージと何が起こっている新しい平面形状を持つ新しい球をロードする必要がありますが、以前の球と平面形状は、まだメモリに残っていると私は を必要としますこれらのオブジェクトを削除するには、私はこの方法を「処分」を使用してみましたが、それは私がこれのシーンが絞首刑にされますので、私は、Disposeメソッドを実装するためにいくつかの間違い を作っています誰かが を解決するためにどのように私を助けてくださいすることができかもしれ助けにはなりませんでしたこの問題。問題に関するアイデアを与えるかもしれないコードの一部を追加しました。 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) 
}