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

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

 

1. Geometry: BufferGeometry

2. Material: PointsMaterial

3. Mesh: Points

4. TextureLoader 

 

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

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

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

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

// geometry 의 vertex 위치를 설정
 geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(positions, 3) // "x", "y", "z" 의 의미로, 위와 같음
 );
 
 // 이미지 로드를 위해
 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)

 

PointsMaterial 에 map 옵션에 이미지만 넣을 경우 왼쪽과 같이 이미지가 이미지를 덮는다. 그것을 방지하기 위해 transparent, alphaMap, depthWrite 옵션을 넣어주면 오른쪽과 같이 이미지가 투과되게 보이도록 만들 수 있다.