Как создать простую систему частиц с помощью THREE.js?

Question

В конце концов, я хочу создать простую систему частиц, которая находится по кругу с именем сайта посередине. Частицы перемещаются и в конечном итоге «отмирают» и воссоздаются. Я относительно новичок в трёх. Я уже пытался найти решение, но либо все учебники являются старыми, и многое изменилось, или учебник не работает для того, что я хочу делать. Ниже я до сих пор. Он создает круг с пикселями вокруг круга, но то, что я не могу сделать, это заставить их двигаться. Вот где мне нужны ваши ребята. Благодарю.

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 - это количество, которое вы хотите, чтобы ваша система частиц вращалась на каждый кадр.

Надеюсь, что это поможет!