Question

我想在three.js中使用粒子系统创建一个形状说圈。我检查了一些他们使用ParticleCanvasMaterial和Texture（程序：函数）的东西，但不再支持这些东西。我经历了协调系统并试图设置pX，pY的值，但它没有用，好吧，这是我的代码，任何帮助将不胜感激..

由于

            var scene, camera, renderer;
            var controls, guiControls, datGUI;
            var spotLight, texture;
            var particleCount = 1800;
            var particles, pMaterial, particleSystem;
            var win_h = $(document).height();
            var win_w = $(document).width();

            function init() {

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );

                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(0xB0C5E6);
                renderer.setSize( win_w, win_h );
                renderer.shadowMap.enabled = true;
                renderer.shadowMapSoft = true;

                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.addEventListener('change', render);

                var canvas = document.createElement( 'canvas' );
                canvas.width = 100;
                canvas.height = 100;

                var context = canvas.getContext( '2d' );
                context.beginPath();
                context.arc( 0, 0, 1, 0,  Math.PI * 2, true );
                context.fill();

                particles = new THREE.Geometry();
                texture = new THREE.TextureLoader().load('ry.png');
                pMaterial = new THREE.PointsMaterial({
                    color: 0xB0C5E6,
                    size: 6,
                    map: texture,
                    blending: THREE.AdditiveBlending,
                    transparent: true

                });


                for (var p = 0; p < particleCount; p++) {
                    var pX = (p * win_w )/ particleCount ;
                    var pY = 5;
                    var pZ = Math.random() * 500 - 750;
                    particle = new THREE.Vector3(pX, pY, pZ);



                    particles.vertices.push(particle);
                }

                particleSystem = new THREE.Points( particles, pMaterial );

                $('#webGL-con').append( renderer.domElement );

                scene.add(particleSystem);

            }


            function render() {

                requestAnimationFrame(render);

            }  

            function animate() {

                render();
                renderer.render(scene, camera);
                controls.update();
                requestAnimationFrame( animate );
            }

            init();
            animate();

Answer 1

好吧，如果你只想在一个圆圈中设置粒子，那就相当容易了。对于在xz平面上设置的圆，您可以使用这些：

SELECT p.id, m1.value || " " || m2.value FROM places p 
   JOIN meta m1 ON m1.place = p.id 
   JOIN meta m2 ON m2.place = p.id 
      WHERE p.type IN ("1")
       AND m1.key = "lat"
       AND m2.key = "lng";

在这种情况下，

basePoint是一个描述圆心的矢量（例如，例如THREE.Vector3，或任何带有键x，y，z的对象）。 ratio用于定义点的密度（或者更确切地说是距离），步长是您想要设置的粒子数。如果你想要一个不同的形状，你将不得不弄清楚如何在循环中绘制它们 - 看看数学函数，它们会帮助你解决这个问题。

创建带有粒子的形状

1 个答案: