javascriptthree.jsboids

How can I clear the screen when I redraw an object?


I'm trying to implement the boids algorithm, and everything was going great until drawing the birds (or cubes, in my case) using three.js.

The screen is not cleared after redrawing so I get even the old cubes on the screen.

Here is my code:

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();

I just can't find a solution.

Please ask, if more detail is needed. Thanks in advance. :)


Solution

  • So, I found a solution: I removed loader.load call in redraw and init, and defined texture and material outside these functions and the result was the same, but it seem to load faster on page. Also, I wasn't removing the objects I thought, so I changed this: boidDesign.name = "boid"+i; with this: boid.name = "boid" + i; boidDesign.name = boid.name; and it worked as expected.