[Three.js] Geometry & Material

 

요즘 새로운 관심 분야가 생겼다. Three.js, WebGL을 통해 Canvas에 그래픽을 렌더링을 할 수 있어
인터랙티브한 웹을 만들 수 있도록 도와주는 기술이다.

 

국내보다는 해외에서 많이 WebGL 사용한 웹 사이트가 많은데 보면 굉장히 화려하다.

HTML,CSS로는 구현이 불가능할 것처럼 느껴질 정도로 화려한데, "도대체 어떻게 저런 웹을 만들지? 

나도 한번 해보고 싶다. "라는 생각이 들어 여유가 될 때 꼭 학습해봐야지 마음 다짐을 한 분야다. 

 

Three.js는 웹 페이지에 3D 객체를 쉽게 표현할 수 있도록 도와주는 자바스크립트 라이브러리다.

만약 Three.js 없이 WebGL로 3D를 개발해야 한다면 엄청나게 고생해야 하지 않나 싶다.

 

3D 객체는 점,선, 꼭지점 등을 이용하여 만들어지는데, Three.js를 사용하면 간단하게 구현이 가능하다.

Three.js에서는 Mesh라는 메서드를 이용해서 객체를 생성한다.  

이 Mesh는 Geometry와 Material을 받아서 만들어지는데, 이번 포스팅에서는 이 2개에 대해 기록해두려고 한다.

 

나는 Geometry는 형태, Material은 재질이라고 이해했다.

Mesh는 형태인 Geometry와, 재질인 Material을 합쳐서 하나의 형태를 만든다. 

 

나는 MeshBasicMaterial, MeshPhongMaterial 재질을 많이 사용했는데, 중요하게 기억하고 있는 점은 Basic은 빛을 받아도 반사되지 않고 명암도 생기지 않는다. 빛을 받게 되면 빛을 받는 부분이 강조되고, 명암이 생기거나 빛이 반사되는 등의 효과가 필요할 수 있는데 그럴 때는 Phong을 사용하면 된다.

 

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 );

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 );

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

 

scene과 camera, renderer 등은 이름만 봐도 어떤건지 알 수 있기 때문에 넘어간다.

Geometry는 Box를 사용했고, Material은 Basic을 사용했다.

 

BoxGeometry에 들어간 1,1,1은 순서대로 width, height, depth다. 예제는 여기서 확인해볼 수 있다.

MethBasicMaterial은 여러가지 값을 받는데, 우선 위 코드에서 사용된 color는 말 그대로 색상이다.

 

Geometry, Material 2개를 생성했고, 이 2개를 Mesh 메소드에 넘겨 cude를 생성하고,
cude는 생성한 scene에 add 해주면 화면에 00ff00 색상의 큐브가 생긴다. 

 

이런식으로 3D를 표현할 수 있고, Geometry에 3D 이미지를 매핑할 수도 있다.

동그란 형태의 3D를 생성하고 지구 이미지를 매핑하면, 지구도 만들 수 있다. 

 

오랜만에 재미를 느끼게 하는 기술인 것 같다.
다음 포스팅에는 Camera, Renderder, Light 등을 학습해서 기록할 예정이다.