Three.js 소스 구조 이해하기

아래의 소스는 보일러 플레이트를 활용하여 진행하였다.

참고 👉 https://github.com/aakatev/three-js-webpack

GitHub - aakatev/three-js-webpack: Boilerplate for Three JS project

Three.js의 기본적인 사용 방법은 아래와 같다.

import * as THREE from 'three'
import { WEBGL } from './webgl'

if (WEBGL.isWebGLAvailable()) {
  // 장면
  const scene = new THREE.Scene() // 장면 생성
  scene.background = new THREE.Color(0x004fff) // scene의 배경색 변경

  // 카메라
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  )
  camera.position.set(0, 1, 5); // 카메라 위치 조절

  // 렌더러
  const renderer = new THREE.WebGLRenderer(); // 렌더러 생성
  renderer.setSize(window.innerWidth, window.innerHeight) // renderer 사이즈를 윈도우 크기에 맞춰 조절

  document.body.appendChild(renderer.domElement) // document에 renderer추가

  // 애니메이션
  function render(time) {
    time *= 0.001
    도형.rotation.x = time
    도형.rotation.y = time
    renderer.render(scene, camera) // 화면에 장면과 카메라(scene, camera) 세팅값을 렌더링하기

    requestAnimationFrame(render)
  }
  requestAnimationFrame(render)
} else {
  var warning = WEBGL.getWebGLErrorMessage()
  document.body.appendChild(warning)
}

Three.js에서 제공하는 장면과 카메라, 렌더러 등등의 인스턴스 객체들을 생성하고, 각각의 옵션값들을 설정한 뒤 렌더러에 렌더링 하는 방식인 것 같다. 🤔

대략적인 감을 잡았으니 차근차근 파고들어 봐야겠다..! 💨💨