Three.js는 웹 브라우저에서 3D 그래픽을 렌더링하기 위한 JavaScript 라이브러리입니다. 이 글에서는 Three.js를 이용한 3D 작업의 기본적인 흐름과 워크 플로우에 대해 알아보겠습니다.

1. Three.js 설치

Three.js를 사용하기 위해서는 우선 해당 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

위 코드는 Three.js의 최신 버전을 CDN을 통해 가져오는 방법입니다. 필요에 따라 다른 버전을 사용할 수도 있습니다.

2. Scene과 Camera 생성

Three.js에서는 3D 공간을 구성하기 위해 Scene과 Camera를 생성해야 합니다. Scene은 모든 객체와 랜더링될 내용을 담고 있는 컨테이너 역할을 하며, Camera는 사용자에게 보여지는 시점을 설정합니다.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

위의 코드는 새로운 Scene과 PerspectiveCamera를 생성하는 예시입니다. PerspectiveCamera는 원근 투영을 사용하는 카메라입니다.

3. Renderer 생성과 설정

렌더링을 위한 Renderer를 생성하고 원하는 설정을 적용해야 합니다.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

위의 코드는 WebGLRenderer를 생성하고 렌더링 사이즈를 설정한 후, 생성한 렌더러 요소를 웹 문서에 추가하는 예시입니다.

4. 객체 생성과 추가

Scene에 추가할 객체를 생성하고 Scene에 추가해야 합니다.

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

위의 코드는 큐브 형태의 객체를 생성하고 Scene에 추가하는 예시입니다. BoxGeometry는 큐브 형태, MeshBasicMaterial는 간단한 배경색을 가진 재질을 지정합니다.

5. 애니메이션 루프 생성

애니메이션을 제공하기 위해 루프를 생성해야 합니다.

function animate() {
  requestAnimationFrame(animate);

  // 애니메이션을 위한 로직 작성

  renderer.render(scene, camera);
}

animate();

위의 코드는 requestAnimationFrame 함수를 이용하여 애니메이션 루프를 생성하고, renderer.render를 통해 Scene과 Camera를 이용해 렌더링합니다.

6. 이벤트 처리

사용자 입력 등의 이벤트를 처리하기 위해 필요한 코드를 작성합니다.

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

window.addEventListener('resize', onWindowResize);

위의 코드는 윈도우 크기 변경 시 카메라의 비율을 조정하고, 렌더링 사이즈를 업데이트하는 예시입니다.

7. 테스트 및 디버깅

작업을 마치고 생성한 3D 장면이 예상대로 동작하는지 테스트를 진행하고, 필요한 경우 디버깅 작업을 진행합니다.

결론

위에서 설명한 내용은 Three.js를 사용하여 웹에서 3D 작업을 진행하는 기본적인 흐름과 워크 플로우에 대한 내용입니다. Three.js를 사용하여 더 나은 3D 장면을 구현해보세요!