在Three.JS粒子系统中移动单个粒子

Moving individual particles within a Three.JS particle system

本文关键字:移动 单个 粒子 粒子系统 Three JS      更新时间:2023-09-26

Three.js遇到一点问题。我目前正试图在渲染每一帧时在粒子系统中移动粒子。没有任何错误报告,但也没有任何进展!我从http://aerotwist.com/tutorials/creating-particles-with-three-js/使用语法particle.position.y,但当我更改下面的代码以镜像它时,JS控制台返回Cannot set property 'y' of undefined。我们非常感谢任何关于我哪里出错的帮助或建议。

完整源代码:

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

似乎必须在创建particleSystem之后添加particleSystem.sortParticles = true;

我在同一教程中遇到了完全相同的问题,但使用ThreeJS 86,我既不需要setY()也不需要particleSystem.sortParticles = true;,而是需要particleSystem.geometry.verticesNeedUpdate = true;而不是particleSystem.geometry.vertices.needsUpdate = true;)。