Three.js 사용해보기

Hyeon·2022년 7월 27일

WebGL 기반 기술을 사용하면 웹 페이지에 3차원 물체를 렌더링 하고, 다양한 인터렉션을 추가할 수 있다. 3D는 유니티나 언리얼과 같은 엔진으로만 개발 가능하다고 생각했는데 웹에 이러한 구현이 가능하다는 것이 신선했다.

Three.js에서는 '물체', '빛', '눈'으로 '본다'라는 행위를 정의한다. 이것을 각각 Mesh, Light, Camera라고 부른다.

Mesh

Mesh 객체는 형상정보(Geometry)와 재료정보(Material)로 구성되어 있으며, 3D 화면을 구성하는 물체이다. Mesh 객체가 만들어지면 설정값을 통해서 3D 공간상의 위치를 정할 수 있다.

const geometry = new THREE.BoxGeometry(1, 1, 1);//가로,세로,높이
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0,0,0)//x,y,z 위치

Light

Light 객체는 빛이다. 전체를 은은하게 비추는 AmbientLight, 한 방향으로 뻗어나가는 DirectionalLight, 특정 부분을 강조할 수 있는 SpotLight 등 다양한 옵션이 있다.

const ambientLight = new THREE.AmbientLight("white", 1);//색상, 강도

Camera

Camera 객체는 눈에 해당한다. Scene 객체를 촬영하여 어떻게 보여줄 것인가를 결정한다. 같은 Scene이라고 하더라도, 카메라의 위치 및 기타 설정값들을 통해서 다른 화면을 보여줄 수 있다.

const camera = new THREE.PerspectiveCamera(
  75, //시야각
  window.innerWidth / window.innerHeight,//종횡비
  0.1, //near
  1000 //far
);
camera.position.set(1, 1, 5);//x,y,z 위치

Scene

Scene 객체는 무대를 나타낸다. 생성한 물체(Mesh)와 빛(Light) 그리고 카메라(Camera)를 추가 해준다.

const scene = new THREE.Scene();
scene.add(cube);
scene.add(ambientLight);
scene.add(camera);

Renderer

<body>
	<canvas></canvas>
</body>

Renderer는 카메라 설정값을 기반으로 Scene에서 보여줄 화면을 계산하고, 브라우저에 해당 화면을 출력해준다.

const canvas = document.querySelector("canvas");
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(window.innerWidth, window.innerHeight);//윈도우 전체
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);