user3549051 user3549051 - 1 year ago 130
Javascript Question

Moving individual particles within a Three.JS particle system

Running into a bit of a problem with Three.js. I'm currently trying to move particles within a particle system when each frame is rendered. No errors are being reported, but nothing is moving either! The example I took from the code at http://aerotwist.com/tutorials/creating-particles-with-three-js/ uses the syntax

particle.position.y
, but the JS console returns
Cannot set property 'y' of undefined
when I change the below code to mirror that. Any help or pointers on where I'm going wrong is much appreciated.

Full source code:

var scene, camera, renderer, particleCount = 0, particleSystem, particles;

init();
animate();

function init()
{
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);
camera.position.z = 5;

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

particleCount = 1800,
particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({color: 0xFFFFFF, size: 0.5});

for (var i = 0; i < particleCount; i++)
{
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vector3(pX, pY, pZ);

particles.vertices.push(particle);
}

particleSystem = new THREE.ParticleSystem(particles, pMaterial);
scene.add(particleSystem);
}

function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);

var pCount = particleCount;
while (pCount--)
{
var particle = particles.vertices[pCount];
particle.y = Math.random() * 500 - 250;
particleSystem.geometry.vertices.needsUpdate = true;
}

}

Answer Source

It seems like you have to add particleSystem.sortParticles = true; after creating your particleSystem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download