如何使用 THREE.js 创建一个简单的粒子系统？答案

【问题标题】：How to create a simple particle system using THREE.js?如何使用 THREE.js 创建一个简单的粒子系统？
【发布时间】：2015-11-21 16:13:07
【问题描述】：

最后我想做的是创建一个简单的粒子系统，它围绕着一个圆圈，中间是站点的名称。粒子四处移动并最终“消亡”并重新创建。我对three.js 比较陌生。我已经尝试找到一个解决方案，但是要么所有的教程都太旧了，而且很多东西都发生了变化，要么教程不适合我想做的事情。以下是我到目前为止所拥有的。它创建了一个圆圈，周围有像素，但我不能做的是让它们移动。这就是我需要你们帮助的地方。谢谢。

var scene = new THREE.Scene();

var VIEW_ANGLE = window.innerWidth / -2,
NEAR = 0.1,
FAR = 1000;

var camera = new THREE.OrthographicCamera(  VIEW_ANGLE,
                            window.innerWidth / 2,
                            window.innerHeight / 2,
                            window.innerHeight / -2,
                            NEAR,
                            FAR);

// pull the camera position back
camera.position.z = 300;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth , window.innerHeight );
document.body.appendChild( renderer.domElement );

// Create the particle variables
var particleCount = 1000;
var particles = new THREE.Geometry();
var particle_Material = new THREE.PointsMaterial({
color: 'red',
size: 1
});

var min = -10,
max = 10;

// Create the individual particles
for (var i = 0; i < particleCount; i++) {

var radius = 200;

var random = Math.random();
var variance = Math.random();

var max = 10,
    min = -10;

radius += (Math.floor(variance * (max - min + 1)) + min);

var pX = radius * Math.cos(random * (2 * Math.PI)),
    pY = radius * Math.sin(random * (2 * Math.PI)),
    pZ = Math.random() * 100;



var particle = new THREE.Vector3(
                    pX,pY,pZ
                );

particle.velocity = new THREE.Vector3(
                        0,
                        -Math.random(),
                        0
                    );

// Add the particle to the geometry
particles.vertices.push(particle);
}

// Create the particle system
var particleSystem = new THREE.Points(
                        particles,particle_Material
                    );

particleSystem.sortParticles = true;

// Add the particle system to the scene
scene.add(particleSystem);

// Animation Loop
function render() {
requestAnimationFrame(render);
var pCount = particleCount;
while(pCount--) {
    // Get particle
    var particle = particles.vertices[pCount];
    console.log(particle);
    particle.y -= Math.random(5) * 10;
    console.log(particle);
}



renderer.render(scene,camera);
}
render();

【问题讨论】：

标签： javascript three.js particles particle-system

【解决方案1】：

你可以使用....

particleSystem.rotateZ(0.1);

....在你的渲染循环中。 0.1 是您希望粒子系统每帧旋转的量。

希望有帮助！

【讨论】：