three.js - ParticleSystem と Particle に関する混乱

Question

threejs初心者です。Web のパーティクル システムに関するすべての例をほとんど読みましたが、ParticleSystem と WebGLRenderer または Particle と CanvasRenderer が常に一緒に使用されていることがわかりました。システム内のすべてのパーティクルの動きを WebGLRenderer で制御したいのですが、どうすればよいですか?

Answer 1

パーティクル システムを作成するときに、ジオメトリを渡すことができます。このようなもの：

        var geom = new THREE.Geometry();
        var material = new THREE.ParticleBasicMaterial({size:4, vertexColors: true, color:0xffffff});

        for (var x = -5 ; x < 5 ; x++) {
            for (var y = -5 ; y < 5 ; y++) {
                    var particle = new THREE.Vector3(x*10,y*10,0);
                    geom.vertices.push(particle);
                    geom.colors.push(new THREE.Color(Math.random()*0x00ffff));
            }
        }

        var system = new THREE.ParticleSystem(geom,material);
        scene.add(system);

個々の頂点の位置を変更することで、それらを移動できます。