회전하는 큐브 만들기 (three.js 기본)

장면 만들기

실제로 three.js를 사용하여 표시하려면 장면, 카메라, 렌더러 세 가지가 필요다. 이를 통해 카메라를 사용하여 장면을 렌더링할 수 있다.

main.js —

import * as THREE from 'three';

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

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

three.js에는 여러 카메라가 있는데, 현재 코드에서는 PerspectiveCamera을 사용하였다. 

첫 번째 속성은 field of view(FOV, 시야각)다. FOV는 디스플레이에 표시되는 장면의 범위다. 값은 도(degree) 다.

두 번째는 aspect ratio(종횡비)으로 요소의 너비를 높이로 나눈 값을 사용한다. 그렇지 않으면 이미지가 뭉개져 보일 수 있다.

다음 두 속성은 near 및 far 절단면이다. far 값보다 멀리 있는 요소나 near 값보다 가까이 있는 요소는 렌더링되지 않는다. 지금 시점에서 이것까지 고려할 필요는 없지만 더 나은 앱 성능을 얻고 싶을 때 사용한다.

다음은 렌더러다. 렌더러 인스턴스와 앱을 렌더링할 곳의 크기를 설정해야 한다. 브라우저 창의 너비와 높이로 설정하는 것을 권장한다. 성능이 중요한 앱의 경우 window.innerWidth/2window.innerHeight/2 및 와 setSize 같이 더 작은 값을 지정할 수도 있다. 이렇게 하면 앱이 1/4 크기로 렌더링된다.

앱의 크기를 유지하면서 더 낮은 해상도로 렌더링하려면 setSize의 updateStyle(세 번째 인수)를 false로 호출하면 된다.

마지막으로, renderer 요소를 추가한다. 이것은 <canvas> 요소로 렌더러가 장면을 나타내는 구역이다.

이제 초록색 큐브를 추가해보자.

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

camera.position.z = 5;

큐브를 만들려면 BoxGeometry가 필요하다. BoxGeometry에는 큐브 꼭짓점(vertices)과 면(faces)가 포함된다.

지오메트리 외에 색상을 적용해야 한다. Three.js에는 여러 방법이 있지만 현 코드에서는 MeshBasicMaterial 을 사용하겠다. 이 속성은 html의 class 처럼 해당 속성을 요소에 모두 적용된다. 색상 적용은 CSS나 Photoshop에서 색상이 작동하는 방식과 동일하게  hex colors를 사용한다.

세 번째로 필요한 것은 Mesh다. 메시를 통해 기하학을 장면 내부에 삽입하고, 자유롭게 움직인다.

기본적으로 scene.add()를 호출하면, 모든 요소들이 (0,0,0) 좌표에 추가되어 카메라와 큐브가 서로의 내부에 있게 된다. 이를 피하기 위해 카메라를 약간 밖으로 이동하였다.

 

장면 렌더링

위의 코드를 이전에 만든 main.js 파일에 복사했다면 아무것도 뜨지 않는다. 아직 아무것도 렌더링하지 않았기 때문이다. 이를 위해 렌더 또는 애니메이션 루프를 설정 할 필요가 있다.

function animate() {
	renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

이렇게 하면 렌더러가 새로 고침마다(일반적인 화면에서는 초당 60회) 장면을 그리도록 하는 루프가 생성된다. setInterval을 사용할 수도 있지만 다양한 이유로 requestAnimationFrame을 사용한다. 그 중 가장 큰 장점은 사용자가 브라우저 창에서 이탈하였을 때 루프를 멈추어 에너지 소비량을 아낄 수 있다는 점이다.

 

큐브 애니메이션 만들기

시작하기 전에 만든 파일에 위의 모든 코드를 삽입하면 녹색 상자가 보인다. 이를 회전시켜 보자. 

다음 코드를 animate 안의 renderer.render 바로 위에 추가한다.

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

이는 매 프레임마다 실행되는 회전 애니메이션이다.  이를 통해 회전하는 상자를 간단하게 만들어보았다.