three.js 파티클의 색상을 다양하게 하기

material의 color설정을 통해서 파티클에 색상을 입힐 수도 있겠지만, 각각 파티클 개별의 색상을 다르게 설정하는 방법을 알아보자.

 

// Points
const geometry = new THREE.BufferGeometry();
const count = 10000;
const positions = new Float32Array(count * 3);
const colors = new Float32Array(count * 3);
for(let i = 0; i < positions.length; i++){
    positions[i] = (Math.random() - 0.5) * 10;
    colors[i] = Math.random();
}
geometry.setAttribute(
    'position', 
    new THREE.BufferAttribute(positions, 3)
);
geometry.setAttribute(
    'color',
    new THREE.BufferAttribute(colors, 3),
);

...

const material = new THREE.PointsMaterial({
    size: 0.3,
    map: particleTexture,

    // set particle image transparent
    transparent: true,
    alphaMap: particleTexture,
    depthWrite: false,
    // color
    vertexColors: true,
})

ㄹ각각의 파티클에 color값을 설정해주기 위해서는 geometry buffer의 color attribute값을 설정해주어야한다. 

vertex는 color정보도 가지고 있어 각각의 vertex마다 color를 다르게 설정할 수 있다.

 

vertex의 color를 개별로 설정하기 위해 0~1의 랜덤값이 담긴 color array를 생성하고, 이를 geometry의 vertex color attribute로 설정한다.

 

그리고 나서 material에서 vertexColors를 true로 세팅하면 vertex 각각에 다른 color가 적용되어 다양한 색의 파티클을 생성할 수 있다.