Particles inside A Points

Questions
,
1

Hi guys!
I constructed 1 THREE.Points and put 10 vertexs into it.
something like this

const material = new THREE.PointsMaterial({
     map : new THREE.TextureLoad().load('/reources/texture.png')
})

const goemetry =  new THREE.BufferGeometry()

const vertexs = []
for(let i = 0;i<10;i++){
   vertexs.push(Math.random()*10,Math.random()*20,Math.random()*30)
}

geometry.setAttribute('position',new Float32BufferAttribute(vertexs,3))

const points = new THREE.Points(geometry,material)

now i got this question ,by using the same texture, i want them looks a little bit different from others
like rotate each one of them by a different value,change a random size.
I saw the Document and some examples,but i still dont know how
is this a doable design without shaders?

2

Hi! I know only one and bad case. Creating each point as separated mesh:

var points_mesh=[];
for(var n=0;n<100;n++){
points_mesh[n]=new THREE.Points(geometry,material);
scene.add(points_mesh[n]);
}

Thats why need shader to rotate, size, color. Moving points you can in javascript or again in shader.

3

@JohnConstantine
Hi!
You need a slight change in shaders of PointsMaterial: https://jsfiddle.net/prisoner849/qj5b4fg8/

изображение
изображение824×778 100 KB

1 Like
4

Thanks man,I guess i have to use shader to do this

5

You rock man!Much apperciate!

1 Like
6

Yes, shader. And in shader you can use different textures.