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.
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();
