React 프로젝트에 Three.js 적용 기 (1)

__〆(￣ー￣ ) ·2022년 5월 3일

들어가며

개인 프로젝트를 해야겠다라고 결심한 후 나의 첫 프로젝트는 포트폴리오였다. 그 중 About 페이지의 내용이 큰 고민이었는데, 간단한 자기소개 외에도 무언가 시선을 끌만한 요소가 필요했었기 때문이다. 나는 시선을 끌만한 요소로 Interactive한 3D 요소를 추가하기로 했다. 적합한 Canvas 데모를 찾기 어려워 직접 만들어보자라는 생각이 들었고, 웹 페이지에서 3D 작업을 하기 위한 여러 대안 중 Three.js를 이용하기로 했다.

Three.js

Three.js 는 3D 그래픽 구현을 위한 여러 primitives를 제공하는 JavaScript 라이브러리이다. 먼저 React 프로젝트에 적용하기 전 개념부터 살펴보자.

구성 요소

3D 그래픽의 구성요소는 공간, 물체, 카메라, 빛 등으로 이루어지는데 Three.js는 이 구성 요소와 대응하는 primitives들을 제공한다.

공간 (Scene)

가장 먼저, 3D 오브젝트를 놓을 공간 (Scene)이 필요한데, Scene을 Three.js에서는 아래와 같이 설명한다.

Scenes allow you to set up what and where is to be rendered by three.js. This
is where you place objects, lights and cameras.

Scene은 three.js를 이용해 무엇을 그리고 어디를 그려낼 지 설정할 수 있게 한다. 즉 어디에 물체와 빛 그리고 카메라를 둘 지 설정할 수 있다.

const scene = new THREE.Scene();

물체 (Mesh)

3D 그래픽에서 물체는 점, 선, 면으로 이루어진 뼈대(Geometry)와 색, 질감, 명암 등 물체의 표면(Material)로 표현된다. 그리고 기하학적인 구조와 표면이 입혀진 물체(오브젝트)를 Three.js에서는 Mesh라 부른다.

물체(Mesh) = 뼈대(Geometry) + 표면(Material)

간단한 정육면체를 구성하는 코드를 보면 아래와 같다.

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

가로, 세로, 높이를 통해 정육면체 형태의 뼈대(geometry)와 형광색(0x00ff00) 표면(meterial)로 표현되는 정육면체 (cube)를 생성한 것이다.
위 cube를 이제 공간에 배치해보자

scene.add( cube );

카메라 (Camera)

같은 공간을 바라보더라도 위치와 시선에 따라 보이는 풍경이 다르다. Three.js에서의 이를 설정하는 것이 카메라(Camera)이다. 가장 기본적으로 사용되는 카메라는 PerspectiveCamera로 사람이 보는 것과 같은 시점을 제공한다.

const camera = new THREE.PerspectiveCamera();

빛 (Light)

물체가 입체적으로 보이려면 빛에 따른 명암을 표현해주어야 한다. 광원의 형태에 따라 여러 종류의 빛이 있다. 아래는 점 형태의 빛을 추가하는 코드이다.

const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );

마찬가지로 빛도 공간에 배치하자

scene.add( light );

빛을 추가하는 경우 물체의 표면(Meterial)도 빛에 반응하는 표면으로 변경할 필요가 있다. 여기서는 람베르트 반사율을 갖는 물체 표면으로 변경했다.

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

그려내기 (Renderer)

빈 공간에 3D 그래픽을 그리는 도구가 필요한데 이를 Renderer라고 한다. Three.js 에서는 웹 3D 그래픽 표준 기술인 WebGL을 기반으로한 Renderer를 이용한다.

The WebGL renderer displays your beautifully crafted scenes using WebGL.

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );

움직임 (Animate)

Interactive한 요소를 만들기 위해서 물체를 움직일 필요가 있다. Three.js에서는 window API인 requestAnimationFrame을 통해 움직임을 만들 수 있다.

function animate() {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

animate();