Particle 만들기 - 랜덤

Geometry: BufferGeometry

** 원래 가지고 있는 형태가 없어 사용자가 원하는 것(vertex positions, face indices, normals, colors)을 만들고 싶을때 사용. (여기서 vertex position 을 사용함)

Material: PointsMaterial

Mesh: Points

 

 

---

 

■ BufferGeometry 세팅하기

1. 좌표가 들어갈 배열 만들기

x, y, z는 하나의 무언가를 위치시켜주기 위해 필요한 좌표이다. 만약 내가 100개의 파티클을 만들고 싶다면, 100 곱하기 3, 총 300개의 원소를 가진 배열이 필요하다. (여기서 3은 각각 x, y, z 를 의미한다.)

자바스크립트 객체 중 Float32Array 는 내가 원하는 길이를 설정하면 그 길이만큼 배열을 만들어준다.

 

const length = 10;
const array = new Float32Array(length);

// output: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

 

2. 좌표를 만들고 배열에 넣기

 BufferGeometry 로 만들 수 있는 것들 중 vertex 의 위치를 조절해서 파티클 효과를 만들 것이다.

 

const geometry = new THREE. BufferGeometry();
const positions = new Float32Array(count * 3); // 이 배열은 [x, y, z, x, y, z...] 3은 "x", "y", "z" 를 의미한다.

for(let i = 0; i < positions.length; i++){
    positions[i] = (Math.random() - 0.5) * 10 // -5 ~ 10의 범위
}

geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(positions, 3) // 3은 "x", "y", "z" 의 의미로, 위와 같음
);

 

이렇게 해서 오브젝트를 만들기 위한 geometry 는 만들어졌다.

 

■ mesh 를 scene 에 추가하기

나머지는 mesh 에 geometry 와 material 넣어 scene 에 추가해주면된다.

 

const material = new THREE.PointsMaterial({
    size: 0.03,
    color: 'plum',
});
const particles = new THREE.Points(geometry, material);
scene.add(particles)