使用粒子创建一个形状

我想在three.js中使用粒子系统创建一个形状圆圈。我检查了一些他们使用ParticleCanvasMaterial和Texture（程序：函数）的东西，但不再支持这些东西。我通过坐标系去，并试图设置像素，的的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();

来源

2016-10-13 janmesh007

你的问题不是很清楚。你是否试图用一个圆作为粒子纹理，或者你是否试图将粒子分布在一个圆圈中？如果是后者，那么你会想看看“参数方程为一个圆”......在这种情况下，你应该能够弄清楚如何将粒子定位成圆/弧形。您也可以使用EllipseCurve来获取为您生成的顶点。 – msun

好吧，假设我有1000个粒子，我必须用这些粒子形成一个圆或三角形，像[link]（http://william.hoza.us/text/?t=Hello）@msu – janmesh007

好，如果你只是想将粒子设置成一个圆圈，那么它很容易。为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)); 
}

基点在这种情况下是一个描述的圆的例如中心（如THREE.Vector3的载体，或用密钥X的任何对象，Y，Z ）。比率用于定义点的密度（或之间的距离），步数是要设置的粒子数。如果你想要一个不同的形状，你将不得不弄清楚如何在循环中绘制它们 - 看看数学函数，它们会帮助你解决这个问题。

来源

2016-10-14 11:04:44

这里的步骤指的是到不。的粒子严重？我尝试过，不完全一样，但我得到了基本的想法... tq。 – janmesh007

现在尝试，我似乎在那里犯了一个错误。我其实只是在做同样的事情，而我只是复制了我的解决方案，并没有意识到它只适用于特定情况。是的，步骤是指粒子的数量 –

使用粒子创建一个形状

回答

相关问题