Particle 만들기 - Particle 랜덤 + 이미지 넣기 + 랜덤 색상

이전 "Particle 랜덤 만들기" 에서 이미지 로드를 위해 TextureLoader 을 추가하면 된다.

 

1. Geometry: BufferGeometry

2. Material: PointsMaterial

3. Mesh: Points

4. TextureLoader 

 

이번에는 Particle에 있는 png 이미지의 색상을 넣어보자.

핵심은 BufferGeometry 객체에서 제공하는 "setAttribute" 메서드로 color를 조절하면 된다.

이전에 Float32Array 객체로 vertex 의 좌표를 저장할 배열을 만들었다면, 이번에도 똑같이 색상이 들어갈 좌표를 만들어줘야 한다. (setAttribute 를 중복해서 사용할 수 있다.)

 

// geometry 생성
const geometry = new THREE. BufferGeometry();

// vetext 갯수 설정
const count = 1000; // 1000 개의 vetext를 만들기 위함.

// 좌표값이 들어갈 배열의 길이 설정
const positions = new Float32Array(count * 3); // 하나의 vertex는 3개의 좌표가 필요. 왼쪽 3은 그것을 의미함.
const colors = new Float32Array(count * 3);

// 생성된 배열에 좌표를 -5 에서 10 범위로 랜덤으로 생성
for(let i = 0; i < positions.length; i++){
    positions[i] = (Math.random() - 0.5) * 10 // -5 ~ 10의 범위
    colors[i] = Math.random(); // 정수로 색이 입혀진다!
}

// geometry 의 vertex 위치를 설정
 geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(positions, 3) // "x", "y", "z" 의 의미로, 위와 같음
 );
 
// geometry 의 vertex 의 색상 설정
 geometry.setAttribute(
    'color',
    new THREE.BufferAttribute(colors, 3)
 );
 
 // 이미지 로드를 위해
 const textureLoader = new THREE.TextureLoader();
 
 // 이미지 로드
 const particleTexture = textureLoader.load('/images/star.png');

// 본격적인 Particle 설정
 const material = new THREE.PointsMaterial({
    size: 0.1,
    // map: particleTexture,
    transparent: true, // 파티클 이미를 투명하게 세팅
    alphaMap: particleTexture, // 투명하게
    depthWrite: false // 부드럽게
 });
 
 // mesh 설정
 const particles = new THREE.Points(geometry, material);
 
 // scene, 무대위에 Particle 넣기
 scene.add(particles)