使用粒子創建一個形狀

我想在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

現在嘗試，我似乎在那裏犯了一個錯誤。我其實只是在做同樣的事情，而我只是複製了我的解決方案，並沒有意識到它只適用於特定情況。是的，步驟是指粒子的數量 –

使用粒子創建一個形狀

回答

相關問題