オブジェクトを再描画するときに画面をクリアするにはどうすればよいですか？

Question

私はboidsアルゴリズムを実装しようとしていて、three.jsを使って鳥（または私の場合はキューブ）を描画するまではすべてがうまくいっていました。

再描画しても画面が消去されないので、画面上に古いキューブも表示されます。

var scene; 
var camera; 
var aspect = window.innerWidth/window.innerHeight; 


scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000); 
camera.position.z = 200; 

var geometry = new THREE.BoxGeometry(10, 10, 10); 
var loader = new THREE.TextureLoader(); 

function init() 
{ 
    var posx, posy, posz; 
    var velx, vely, velz; 
    var rotx = 0; 
    var roty = 0; 
    var rotz = 0; 

    var boid; 

    loader.load('images/picture.jpg', function (texture) { 
      var material = new THREE.MeshBasicMaterial({ 
       map: texture 
      }); 

      for (var i = 0; i < 5; i ++) { 

       posx = (Math.random() - 0.5) * 100; 
       posy = (Math.random() - 0.5) * 100; 
       posz = (Math.random() - 0.5) * 100; 

       velx = (Math.random() - 0.7) * 100; 
       vely = (Math.random() - 0.7) * 100; 
       velz = (Math.random() - 0.7) * 100; 

       var boidPosition = new THREE.Vector3(posx, posy, posz); 
       var boidRotation = new THREE.Vector3(rotx, roty, rotz); 
       var boidVelocity = new THREE.Vector3(velx, vely, velz); 


       var boidDesign = new THREE.Mesh(geometry, material); 
       boidDesign.position.x = boidPosition.x; 
       boidDesign.position.y = boidPosition.y; 
       boidDesign.position.z = boidPosition.z; 

       boid = new Boid(boidPosition, boidVelocity); 
       boids[i] = boid; 

       boidDesign.name = "test_name" + i; 

       scene.add(boidDesign); 
      } 
     }, 
     function (xhr) { 
      console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
     }, 
     function (xhr) { 
      console.log('An error happened'); 
     } 
    ); 
} 


function redraw() { 
    var boid; 

    loader.load('images/picture.jpg', function (texture) { 
      var material = new THREE.MeshBasicMaterial({ 
       map: texture 
      }); 

      for (var i = 0; i < boids.length; i ++) { 
       boid = boids[i]; 

       var boidPosition = new THREE.Vector3(boid.position.x, boid.position.y, boid.position.z); 

       var boidDesign = new THREE.Mesh(geometry, material); 
       boidDesign.position.x = boidPosition.x; 
       boidDesign.position.y = boidPosition.y; 
       boidDesign.position.z = boidPosition.z; 

       boidDesign.name = "test_name" + i; 

       scene.add(boidDesign); 
      } 
     }, 
     function (xhr) { 
      console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
     }, 
     function (xhr) { 
      console.log('An error happened'); 
     } 
    ); 
} 

function removeEntity(object) { 
    var selectedObject = scene.getObjectByName(object.name); 
    scene.remove(selectedObject); 
} 

function drawAfterUpdate() 
{ 
    var boid; 

    for(var i = 0; i < boids.length; i++) 
    { 
     boid = boids[i]; 
     boid.update(boids); 
     removeEntity(boid); 
    } 

    redraw(boids); 

} 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0x000000); 
document.body.appendChild(renderer.domElement); 


var render = function() 
{ 
    requestAnimationFrame(render); 
    drawAfterUpdate(); 
    renderer.render(scene, camera); 
}; 

init(); 
render(); 

私は解決策を見つけることができません。

は、ここに私のコードです。

詳細が必要な場合は、お尋ねください。 ありがとうございます。 :)

Answer 1

私は解決策を見つけました。私はredrawとinitでloader.load呼び出しを削除し、これらの関数の外にテクスチャとマテリアルを定義しましたが、結果は同じでしたが、ページが速く読み込まれるようです。また、私は思ったオブジェクトを削除していないので、これをboidDesign.name = "boid"+i;に変更しました：boid.name = "boid" + i; boidDesign.name = boid.name;これは期待通りに機能しました。