不同大小的颗粒three.js所(Three.js Particles of various siz

我是新来three.js所，我试图找出添加1000个颗粒每一个都是不同的大小和颜色的最佳途径。 每个粒子的纹理是由绘制画布创建。 通过使用粒子系统所有粒子是相同的颜色和大小。 创建每个粒子一个粒子系统是非常低效的。 是否有处理这个问题的有效途径？

Answer 1:

去这个问题的最好办法，以我的经验，是创建一个定制的着色材料; 然后就可以包括属性，它们是各不相同的颗粒与颗粒的性质。 着色器的代码会是这个样子：

顶点着色器：

attribute vec3 customColor;
attribute float customSize;
varying vec3 vColor;
void main() 
{
    vColor = customColor; // set color associated to vertex; use later in fragment shader
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = customSize * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

片段着色器：

uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
void main() 
{
    // calculates a color for the particle
    gl_FragColor = vec4( vColor, 1.0 );
    // sets particle texture to desired color
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}

对于类似的活生生的例子，看看：

http://stemkoski.github.io/Three.js/ParticleSystem-Attributes.html

文章来源: Three.js Particles of various sizes