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

Question

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. :)

I would remove the loader.load call in redraw. This is hitting the network and or cache every time. I think this is causing latency and you're not adding and removing the items you think you are. You can define the texture once and reuse it in the redraw function. — Radio, Apr 26 '16 at 03:43
Thank you, you really helped me solve this. The problem was that I wasn't removing the objects I thought. — mihaela, Apr 26 '16 at 06:49

score 1 · Accepted Answer · answered Apr 26 '16 at 06:47

1

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.

answered Apr 26 '16 at 06:47

mihaela

394
2
12

It's loading faster on the page, and also it isn't attempting to call your server 60 times a second, which would have been bad news. :) Glad it's fixed. – Radio Apr 26 '16 at 14:48

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

1 Answers1