パーティクルを使用した形状の作成

Question

three.jsのパーティクルシステムを使用して円の形を作成したいとします。私はParticleCanvasMaterialとTexture（プログラム：関数）を使用するもののいくつかをチェックしましたが、そのものはもはやサポートされていません。私は、座標系を経て、PX、の値を設定しようとしましたが、それはうまくええ、ここに私のコードは、任意のヘルプは..

おかげ

  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

まあが理解されるであろうが、うまくいきませんでした円でパーティクルを設定したいだけなら、それはむしろ簡単です。この場合

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である：xz平面上の円のセットのためにこれらの使用します）。比率は、ポイントの密度（またはその間の距離）を定義するために使用され、ステップは、設定するパーティクルの数です。別の形状が必要な場合は、ループでそれらを描く方法を理解する必要があります。数学的関数を見てみると、それらはあなたを助けます。