Three.js 使用粒子创建形状

我想使用three.js中的粒子系统创建一个形状，比如说圆。我检查了一些他们使用ParticleCanvasMaterial和Texture（program:function）的东西，但这些东西不再受支持。我通过坐标系统，试图设置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();

var场景、摄影机、渲染器；
var控件、guiControls、datGUI；
颜色、纹理；
var particleCount=1800；
var粒子、P材料、粒子系统；
var win_h=$（document）.height（）；
var win_w=$（document.width（）；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
renderer=new THREE.WebGLRenderer（）；
渲染器.setClearColor（0xB0C5E6）；
设置大小（win_w，win_h）；
renderer.shadowMap.enabled=true；
renderer.shadowMapSoft=true；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
控件。addEventListener（'change'，render）；
var canvas=document.createElement（'canvas'）；
画布宽度=100；
画布高度=100；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
arc（0,0,1,0，Math.PI*2，true）；
context.fill（）；
粒子=新的三个。几何体（）；
纹理=新的三个.TextureLoader（）.load（'ry.png'）；
p材质=新的三点材质({
颜色：0xB0C5E6，
尺码：6，
贴图：纹理，
混合：3.可加性贷款，
透明：正确
});
对于（var p=0；p

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

var ratio = steps/(Math.PI*2)
for (var i = 0; i < steps; i ++ ) {
  var x = basePoint.x + radius * Math.cos(i/ratio);
  var y = basePoint.y;
  var z = basePoint.z + radius * Math.sin(i/ratio));
  particles.vertices.push(new THREE.Vector3(x,y,z));
}

var比率=步数/（数学PI*2）
对于（变量i=0；i

---

在本例中，基点是一个描述圆心的向量（例如，类似于THREE.Vector3，或具有关键点x、y、z的任何对象）。比率用于定义点的密度（或者更确切地说是点之间的距离），步长是要设置的粒子数。如果你想要一个不同的形状，你必须想办法把它们画成一个循环——看看数学函数，它们会帮你解决这个问题。

你的问题不是很清楚。您是尝试使用圆作为粒子纹理，还是尝试将粒子分布在圆中？如果是后者，那么您需要研究“圆的参数方程”。。。在这种情况下，您应该能够确定如何以圆/弧的形状定位粒子。你也可以使用椭圆曲线来生成顶点。好吧，假设我有1000个粒子，我必须与这些粒子形成一个圆或三角形，比如@msusteps这里指的是粒子的数量，rigth？我试过了，不完全一样，但我得到了基本的想法…tq。现在试试，我似乎犯了一个错误。实际上，我正在做完全相同的事情，我只是复制粘贴了我的解决方案，没有意识到它只适用于特定情况。是的，步骤是指粒子的数量