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

In the end what I want to do is create simple particle system which is around in a circle with the name of the site in the middle. The particles move around and eventually "die off" and get recreated. I am relatively new to three.js. I have already tried to find a solution but either all of the tutorials are to old and a lot of things have changed or the tutorial doesnt working for what I want to do. Below is what I have so far. It creates the circle with the pixels around in a circle but what I cant get the to do is to get them to move. That is where I need your guys help. Thanks.

最后我要做的是创建一个简单的粒子系统,它围绕着一个圆圈,中间有一个站点的名称。粒子移动并最终“消失”并重新创建。我对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();

1 个解决方案

#1

You can use....

您可以使用....

particleSystem.rotateZ(0.1);

....in your render loop. 0.1 is the amount you'd like your particle system to rotate per frame.

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

Hope that helps!

希望有所帮助!

#1