我重繪對象時如何清除屏幕？

我試圖實現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();

我無法找到一個解決方案。

請問，如果需要更多的細節。在此先感謝。 :)

來源

2016-04-25 mihaela

我會在重繪中刪除loader.load調用。每次都會觸及網絡和/或緩存。我認爲這是造成延遲的原因，並且您不會添加和刪除您認爲自己的物品。您可以定義一次紋理並在重繪功能中重複使用它。 – Radio

謝謝，你真的幫我解決了這個問題。問題在於我沒有移除我認爲的物體。 – mihaela

因此，我找到了一個解決方案：我在redraw和init中移除了loader.load調用，並在這些函數之外定義了紋理和材質，結果相同，但頁面加載速度似乎更快。此外，我並沒有刪除我認爲的對象，所以我改變了這個：boidDesign.name = "boid"+i;用這個：boid.name = "boid" + i; boidDesign.name = boid.name;，它按預期工作。

來源

2016-04-26 06:47:43 mihaela

它在網頁上的加載速度更快，並且它不會試圖每秒鐘打電話給您的服務器60次，這將是一個壞消息。 :)很高興它是固定的。 – Radio

我重繪對象時如何清除屏幕？

回答

相關問題