重绘对象时如何清屏？

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

所以，我找到了一个解决方案：我删除了重绘和初始化中的 loader.load 调用，并在这些函数之外定义了纹理和 material 结果是一样的，但它似乎加载得更快在页面上。另外，我没有删除我认为的对象，所以我更改了这个：boidDesign.name = "boid"+i; 和这个：boid.name = "boid" + i; boidDesign.name = boid.name; 并且它按预期工作。

重绘对象时如何清屏？

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

javascript

three.js

boids