javascript - 如何在 THREE.js 中的粒子系统中绕其轴旋转每个粒子？

Question

我正在制作一个太空场景，其中我使用粒子系统来制作一组小行星， 我想让每个小行星绕其轴旋​​转。我正在使用以下代码来制作粒子系统。

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;

然后这将旋转整个系统。是否可以使每个粒子绕其轴旋转？

Answer 1

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

我找到了tutorial这解释了如何独立地为粒子系统中的粒子设置动画。这是更新动画循环的相关部分，并进行了一些细微的修改。

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