개요
Three.js는 웹에서 3D 그래픽을 쉽게 만들 수 있게 해주는 JavaScript 라이브러리입니다. 이를 통해 개발자들은 복잡한 3D 모델, 애니메이션, 가상 현실 체험을 웹 페이지에 쉽게 통합할 수 있습니다. 필요에 따라 정말 복잡한 모델도 구현이 가능하지만 이 글에선 아주 기본적인 내용과 간단한 예시로 알아보겠습니다.
기본요소
Three.js의 세계를 이해하기 위해 몇 가지 기본 구성 요소를 알아보겠습니다.
장면(Scene)
모든 3D 객체가 존재하는 공간입니다. 이는 우리가 만들고 싶은 3D 세계의 '무대'와 같습니다.
카메라(Camera)
장면을 보는 위치와 방향을 결정합니다. 마치 우리 눈이나 카메라 렌즈를 통해 세계를 보는 것과 같습니다.
조명(Lights)
장면에 빛을 추가하여, 객체가 실제처럼 보이게 합니다. 태양 빛이나 전등 같은 역할을 합니다.
메쉬(Mesh)
3D 객체입니다. 기본적으로 '형태(Geometry)'와 '재질(Material)'로 구성됩니다. 형태는 모양을 결정하고, 재질은 표면의 질감이나 색을 결정합니다.
Three.js로 무엇을 할 수 있나요?
인터랙티브한 3D 웹사이트 제작
사용자가 직접 상호작용할 수 있는 멋진 3D 웹사이트를 만들 수 있습니다.
데이터 시각화
복잡한 데이터를 3D 그래프나 차트로 시각화하여, 이해하기 쉽게 표현할 수 있습니다.
게임 개발
웹 기반의 간단한 3D 게임을 개발할 수 있습니다.
가상현실(VR)과 증강현실(AR)
웹에서 직접 VR이나 AR 체험을 제공할 수 있습니다.
예시
Three.js를 사용하여 3D 큐브를 만들고, 이를 웹 페이지에 표시해 보겠습니다. 이 과정은 다음과 같습니다
장면 설정: 우리의 3D 객체가 존재할 장면을 생성합니다.
카메라 추가: 장면을 어떤 시점에서 볼지 결정하는 카메라를 추가합니다.
조명 설정: 장면에 조명을 추가하여, 객체에 그림자나 광택 효과를 줍니다.
3D 객체 생성: 여기서는 간단한 큐브를 만들어 보겠습니다.
렌더러(Renderer): 장면을 실제로 그려주는 역할을 합니다. 이를 통해 3D 그래픽을 웹 페이지에 표시할 수 있습니다.
