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

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

本文关键字：旋转 粒子 粒子系统 THREE js      更新时间：2023-09-26

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

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;

则会旋转整个系统。是否有可能使每个粒子绕其轴旋转?

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

我找到了一个教程，解释了如何在粒子系统中独立地动画粒子。以下是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);
}
相关文章：