CODEWITHSUNDEEP
javascriptpositionthree.jsparticle-systemparticles
user3549051
user3549051

Reputation: 13

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;
            }

        }

Upvotes: 1

Views: 4298

Answers (2)

Konrad H&#246;ffner
Konrad H&#246;ffner

Reputation: 12207

I encountered exactly the same issue in the same tutorial but, using ThreeJS 86, I needed neither the setY() nor the particleSystem.sortParticles = true; but particleSystem.geometry.verticesNeedUpdate = true; (not particleSystem.geometry.vertices.needsUpdate = true;).

Upvotes: 1

lebolo
lebolo

Reputation: 2150

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

Upvotes: 1

Related Questions