如何在THREE.js中的粒子系统中旋转其轴上的每个粒子?

时间:2014-05-11 11:42:34

标签: javascript three.js

我正在制作一个空间场景,我正在使用粒子系统来制造一组小行星, 我想在它的轴上旋转每个小行星。我正在使用以下代码来制作粒子系统。

var asteroidGeometry = new THREE.Geometry();
for(var i=0;i<=10000;i++)
{
    asteroidGeometry.vertices.push( new THREE.Vector3( Math.random()*10000-5000,  Math.random()*10000-5000, Math.random()*10000-5000 ) );

}
var asteroidtexture= THREE.ImageUtils.loadTexture("images/asteroids.png");
var asteroidMaterial = new THREE.ParticleBasicMaterial({color: 'white',size:500,map:asteroidtexture,alphaTest: 0.8});
asteroids = new THREE.ParticleSystem(asteroidGeometry,astroidMaterial);

scene.add(asteroids);

如果我会做像

这样的事情
asteroid.position.x +=0.1;

然后这将旋转整个系统。是否可以在轴上旋转每个粒子?

1 个答案:

答案 0 :(得分:1)

THREE.Geometry实例中的各个顶点可通过其vertices数组访问。

我发现了tutorial,它解释了如何独立地为粒子系统中的粒子制作动画。这是update动画循环的相关部分,稍作修改。

function update() {

    var pCount = particleCount;
    while (pCount--) {

        var particle = particles.vertices[pCount];

        if (particle.position.y < -200) {
            particle.position.y = 200;
            particle.velocity.y = 0;
        }

        particle.velocity.y -= Math.random() * .1;

        particle.position.addSelf(particle.velocity);
    }

    particleSystem.geometry.__dirtyVertices = true;
    renderer.render(scene, camera);
    requestAnimFrame(update);
}