javascript - Three.js Particles of various sizes -

i'm new three.js , trying figure out best way add 1000 particles each being different size , color. texture each particle created drawing canvas. using particlesystem particles same color , size. creating particlesystem each particle inefficient. there efficient way handle this?

the best way go this, in experience, create customized shader material; can include attributes, properties vary particle particle. shader code this:

vertex shader:

attribute vec3 customcolor; attribute float customsize; varying vec3 vcolor; void main()  {     vcolor = customcolor; // set color associated 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; } 

fragment shader:

uniform sampler2d texture; varying vec3 vcolor; // colors associated vertices; assigned vertex shader void main()  {     // calculates color particle     gl_fragcolor = vec4( vcolor, 1.0 );     // sets particle texture desired color     gl_fragcolor = gl_fragcolor * texture2d( texture, gl_pointcoord ); } 

for similar live example, check out:

http://stemkoski.github.io/three.js/particlesystem-attributes.html