Question

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

Answer 1

你可以使用....

particleSystem.rotateZ(0.1);

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

希望有所帮助！

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

1 个答案: