How to rotate each particle on its axis in a Particle system in THREE.js?

Question

I am making a space scene in which I am using a particle system to make group of asteroids, I want to rotate each asteroids on its axis. I am using following code for making a particle system.

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

If I will do something like

asteroid.position.x +=0.1;

then this will rotate whole system. Is it possible to rotate each particle on its on axis?

Answer 1

Individual vertices in a THREE.Geometry instance are accessible via its vertices array.

I found a tutorial that explains how to animate particles in a particle system independently. Here's the relevant section of the update animation loop with some minor modifications.

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