Three.js 파티클 1 - 기본 지오메트리 파티클&랜덤 파티클로 별 표현하기

즉 파티클 이란?

입자이며, 별,연기, 비, 먼지, 불 등 다양한 효과를 얻는 데 사용할 수 있다.

파티클은 Mesh가 아닌 Points를 사용해서 만들어야 한다.

 

MeshStandardMaterial에 wireframe 속성을 true로 주면 아래와 같이 노드로 이루어진 Geometry를 확인할 수 있는데,

이러한 노드들을 매우 작은 입자로 표현한 것이 파티클이다.

파티클

 

MeshStandardMaterial의 wireframe 설정

 

 

기본 지오메트리 파티클 생성하기

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// ----- 주제: 기본 Geometry 파티클

export default function example() {
  // Renderer
  const canvas = document.querySelector('#three-canvas');
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

  // Scene
  const scene = new THREE.Scene();

  // Camera
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 1.5;
  camera.position.z = 4;
  scene.add(camera);

  // Light
  const ambientLight = new THREE.AmbientLight('white', 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight('white', 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);

  // Controls
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // Mesh
  const geometry = new THREE.SphereGeometry(1, 32, 32);
  const material = new THREE.PointsMaterial({
    color: 'red',
    size: 0.02,
    // sizeAttenuation : false  // 원근에 상관없이 균일한 크기로 설정
  });
  const points = new THREE.Points(geometry, material); // mesh가 아닌 points 사용
  scene.add(points);
  


  // 그리기
  const clock = new THREE.Clock();

  function draw() {
    const delta = clock.getDelta();

    controls.update();

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }

  // 이벤트
  window.addEventListener('resize', setSize);

  draw();
}

 

 

랜덤 파티클로 별 표현하기

// Points
  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 material = new THREE.PointsMaterial({
    size: 0.03,
    color: 'plum',
  });

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