將2D方向應用於粒子 - three.js

第一次使用three.js，我正在做一個非常簡單的粒子動畫，其中映射了4種不同的紋理。到目前爲止，一切都按照需要工作，除了我不知道如何旋轉粒子，以便它們以隨機方向呈現（顛倒，側身等）任何幫助將不勝感激！將2D方向應用於粒子 - three.js

你可以看到我的進步至今這裏：http://development.shapes.divshot.io/particles.html

這裏是相關的代碼：

  sprite1 = THREE.ImageUtils.loadTexture("sprite1.png"); 
      sprite2 = THREE.ImageUtils.loadTexture("sprite2.png"); 
      sprite3 = THREE.ImageUtils.loadTexture("sprite3.png"); 
      sprite4 = THREE.ImageUtils.loadTexture("sprite4.png"); 

      parameters = [ sprite1, sprite2, sprite3, sprite4]; 

      for (i = 0; i < parameters.length; i ++) { 

       sprite = parameters[i]; 

       materials[i] = new THREE.PointCloudMaterial({ size: 45, map: sprite, depthTest: false, transparent : true}); 


       particles = new THREE.PointCloud(geometry, materials[i]); 

       particles.rotation.x = Math.random() * 60; 
       particles.rotation.y = Math.random() * 60; 
       particles.rotation.z = Math.random() * 60; 

       scene.add(particles); 

      }

使用three.js所R71

來源

2015-07-21 Steph

你想要做的是絕對可行的方法（1）在接受的答案。它需要使用「ShaderMaterial」。您的紋理圖像必須居中幷包含在磁盤內 - 具有透明背景。這樣，在片段着色器中旋轉uv座標時不會出現任何僞影。 – WestLangley

AFAIK的three.js所點雲/ PointCloudMaterial顆粒系統使用gl.POINTS來畫點。這意味着它有幾個限制。

您不能旋轉這些點。

如果您編寫自定義着色器，則可以旋轉片段着色器中的UV座標，但如果圖像填充了該點，則無法幫助，因爲在正方形內旋轉正方形紋理會在旋轉時剪切角點。
你不能讓點大於你所在的GPU /驅動程序的最大點。

WebGL只需要最大大小= 1.0，這意味着GPU /驅動程序只支持1個像素大點。

檢查webglstats.com它看起來像只支持1像素大點的GPU /驅動程序的數量變得更小。還有大約5％的機器只支持63像素或更小的點數，如果您在點場中飛行，這應該只是一個問題。
你只能有方點。

如果你想要像火花一樣長而細的東西，你就不能有矩形點。

一個解決方案是使您自己的粒子系統使用四邊形，並可以旋轉它們的頂點以及在多個方向上縮放它們。 This example完全在GPU上運行。不幸的是，它不是基於three.js的。

來源

2015-07-21 12:10:26 gman

將2D方向應用於粒子 - three.js

回答

相關問題