Three.js 파티클2 - 이미지 사용해서 랜덤으로 파티클 생성하기

 

위와 같은 파티클을 생성하기 위해서 아래와 같은 순서로 파티클을 생성해보자!

1. 랜덤으로 파티클 생성하기

2. 별 파티클 이미지 사용하기

3. 여러가지 색상 랜덤으로 사용하기

 

 

1 . 랜덤으로 파티클 생성하기

const geometry = new THREE.BufferGeometry(1, 32);
  const count = 1000; // 랜덤으로 생성할 파티클 개수
  const positions = new Float32Array(count * 3); // 하나의 정점이 가지는 값은 x, y, z이므로 x3을 해줌
  for (let i = 0; i < positions.length; i++) {
    positions[i] = (Math.random() - 0.5) * 10; // -5 ~ 5
  }

  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); // 점 하나당 x, y, z 값이 3개이므로 x3을 해줌

  const material = new THREE.PointsMaterial({
    size: 0.03,
    color: 'plum',
  });

  const particles = new THREE.Points(geometry, material);
  scene.add(particles);

 

2. 별 파티클 이미지 사용하기

파티클로 사용할 별 이미지

 const geometry = new THREE.BufferGeometry(1, 32);
  const count = 1000; // 랜덤으로 생성할 파티클 개수
  const positions = new Float32Array(count * 3); // x, y, z
  for (let i = 0; i < positions.length; i++) {
    positions[i] = (Math.random() - 0.5) * 10; // -5 ~ 5
  }

  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); // 점 하나당 x, y, z 값이 3개이므로 x3을 해줌

  const textureLoader = new THREE.TextureLoader();
  const particleTexture = textureLoader.load('/images/star.png'); // 별 이미지 로드

  const material = new THREE.PointsMaterial({
    size: 0.3,
    color: 'plum',
    map: particleTexture, // 이미지 사용
    // 별 이미지의 배경을 투명하게 하기 위한 설정
    transparent: true,
    alphaMap: particleTexture, // 이미지의 알파값 사용
    depthWrite: false, // 깊이값을 쓰지 않음
  });

  const particles = new THREE.Points(geometry, material);
  scene.add(particles);

 

 

3. 여러가지 색상 랜덤으로 사용하기

 const geometry = new THREE.BufferGeometry(1, 32);
  const count = 1000; // 랜덤으로 생성할 파티클 개수
  const positions = new Float32Array(count * 3); // x, y, z
  const colors = new Float32Array(count * 3);
  for (let i = 0; i < positions.length; i++) {
    positions[i] = (Math.random() - 0.5) * 10; // -5 ~ 5
    colors[i] = Math.random(); // 컬러 랜덤값으로 설정
  }

  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); 
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); // 추가
  // console.log(geometry);

  const textureLoader = new THREE.TextureLoader();
  const particleTexture = textureLoader.load('/images/star.png');

  const material = new THREE.PointsMaterial({
    size: 0.3,
    color: 'plum',
    map: particleTexture, 
    transparent: true,
    alphaMap: particleTexture, 
    depthWrite: false, 
    //색상
    vertexColors: true, 색상 추가
  });

  const particles = new THREE.Points(geometry, material);
  scene.add(particles);