도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

Three.js 시작하기

요새 만드려고 하는 WebVR 작업물을 구현시키는데 어떤 라이브러리가 좋을까 하고 찾아봤더니

우선 Three.js 라이브러리를 사용해서 구현하는게 가장 많이들 추천하더라.

물론 Three.js를 사용하는 친구들 작업을 봐왔고, 관심이 있어서 종종 홈페이지가서 구현된거 구경하고는 했지만, 한번도 사용 해 본적이 없었다.

우선 홈페이지에 있는 Download 링크를 눌러서 다운받아서 압축을 풀어보았다.

나는 간단하게 필요한 라이브러리 파일만 나오겠지 하고 기대하며 보았는데..

이게 왠걸...


@.@

그냥 깃헙페이지에서 마스터를 다운받는거였다…

이중에 내가 필요로 하는 핵심 라이브러리는


build 폴더에 들어있었다.

이중에 용량이 적은 three.min.js을 써도 되겠지만 우선은 공부도 할겸, 무슨 문제가 생겨서 디버깅할 때 알아볼 수 있도록 three.js파일을 쓰려고 한다.

이제 라이브러리도 다운받았으니 본격적으로 시작해 보려고, 튜토리얼부터 찾아봤다.

우선 Lynda.com에서 먼저 찾아봤다.(개인적으로 Lynda.com을 좋아하고 1년구독을 하고 있는중이므로..)

하지만,

.

.

.

없더라…(나중에 더 찾아보니 Udacity에 무료 동영상 강의가 있더라. 아직 인트로덕션까지만해서 잘 모르겠지만 좋은듯!! 계속 해보고 업뎃하겠슴! )

아무튼 그래서 검색하며 찾아보니 자체 도큐멘테이션에 처음 시작하기가 너무 잘 되어있어서, 처음 시작하기에 있는 Scene만들기부터 따라해보았다.



1. Scene 만들기!!

이 ThreeJS에 있는 도큐멘트중에 젤 처음 시작하기의 Creating a Scene을 보면서 차근차근 따라해보았다.

1. 셋팅하기.

첫 셋팅하기에 보면 코드가 있다.


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src=”js/three.js”></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>

보면 한 html파일에 몽땅 다 넣었는데 아마도 코드가 그리 길지 않아서 그렇게 만든 듯 하다. 하지만 그래도 나는 따로 보는게 좋기때문에 js파일을 따로 뽑아서 넣으려고 한다. 그게 나중에 이것저것 바꿔가면서 가지고 놀기 편하기도 할꺼같기 때문이다.

그래서,

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src=”libraries/three.js”></script>
<script src=”script.js”> </script>
</body>
</html>

일단 css는 그냥 놔뒀고, 처음에 다운받아놓은 three.js라이브러리는 ‘libraries’폴더를 만들어서 그안에 넣어놨고, 이제 컨텐츠를 만들어 나갈 스크립트는 script.js라는 파일명으로 js파일을 만들어서 따로 빼서 만들어놨다.

2. Creating the scene!!

자! 이제 튜토리얼에 나온대로 Javascript 코드을 아까 만들어 놓은 script.js에 넣어보자.

그 코드는 아래와 같다.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

설명하길,

three.js에서 뭔가를 구현하기 위해서는 최소 세가지가 필요하다.

* Scene

* Camera

* Renderer

우선 Scene은 그냥 별 다른 옵션없이 만들었다. 아마도 나중에 여러가지 씬을 따로 만들어서 씬 간에 이동이 가능하게 만들 수 있게되지 않을까 싶다. 아무튼 지금은 그냥 declare만 해줬다.

두번째로, Camera가 있다. 설명에 보면 몇가지 종류의 카메라가 있는데 우선은 PerspectiveCamera를 쓴다고 한다.

카메라에는 총 4가지 Attribution이 있는데, 첫번째는 FOV, 즉 얼마나 Wide하게 또는 Narrow하게 보느냐 이다. 참고로, 고프로의 와이드FOV가 대충 130도 정도 된다. 두번째는 Aspect Ratio이다. 보통 16:9, 4:3같은 비율인데, 소수점으로 표시한다. 한마디로 16:9 비율로 하고싶다면 16/9 = 1.7777 뭐 이렇게 쓰면 되겠다. 하지만 우리는 웹에서 보여주고, 웹 윈도우의 비율을 따라가도록 만들고 싶을꺼니까 윈도우의 가로 / 세로 로 하면 되겠다. 세번째와 네번째는 각각 near와 far clipping plane을 정하는것이다. 즉, 카메라로부터 얼마나 가까운거부터 얼마나 먼것까지 랜더링하게(보여주게) 할것이냐이다.

마지막으로 가장 중요하고 핵심인 Renderer가 있다. Three.js에서 보통 랜더엔진으로는 WebGLRenderer를 쓴다. 렌더러는 사이즈를 정하게 되는데 브라우저의 풀사이즈를 이용하려면 그대로 윈도우의 사이즈를, 만약 좀 랜더링이 버거울 것 같은 컨텐츠를 만들었다면 이렇게, renderer.setSize( window.innerWidth/2, window.innerHeight/2 ); 로 바꿔서 1/2사이즈로 줄여서 랜더링에 사용하면 퍼포먼스에 많은 도움이 되겠다.

만약, 랜더사이즈는 1/2사이즈로 하지만 전체 크기는 그대로 두고싶다면, updateStyle(세번째 항)을 false를 주면 된다고 한다. 나도 updateStyle이 뭐하는지 모르겠고 왜 false로 둬야하는지 자세히는 모르겠지만 다음과 같이 하면 된다.

renderer.setSize(window.innerWidth/2, window.innerHeight/2, false)

마지막줄은 <canvas>엘레멘트를 HTML의 body에 넣어서 그 캔버스 안에서 이미지를 보여주게 된다.

3. 큐브를 만들어보자!

지금까지는 기본적인 Scene셋팅을 했고, 이제 그 씬에 보여줄 무언가를 만들어 보자.

이 튜토리얼에서는 기본적인 큐브를 만들어 보여주는데 그 코드는 다음과 같다.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

첫번째 줄에서, 우선 BoxGeometry란걸 만들어준다. 한마디로 3D모델을 만들때처럼 vertices들과 Faces들을 만들어주는거라는데 추후에 자세히 설명한다고 한다. (근데 추후에 언제?)

두번째 줄은 Meterial을 만들어주는데, Three.js에는 여러가지 매터리얼들을 쓰는데 일단은 베이직 메터리얼인 MeshBasicMaterial부터 써보겠다고 한다. 우선 아주 심플하게 컬러만 쓴다. CSS에서 주로 쓰는 ‘HEX color’코드를 쓰는데 위에쓰인 0x00ff00은 초록색이다.

세번째 줄에서 Mesh를 만들어주는데 위에서 만들어준 Geometry를 받아서 Material을 입혀주는 역활을 한다.

네번째 줄에서 이제 만든걸 아까 만들어 놓은 Scene에 넣어준다.

디폴트값으로 scene.add()을 호출할때 x,y,z의 위치가 0,0,0인곳에 넣어주게 된다. 물론 씬에서 만든 카메라의 위치도 디폴트값으로 되어있으므로 큐브를 만들면 큐브 속으로 들어가게 되는 상황이 되므로 그 상황을 피하기 위해 마지막 줄에서 카메라의 위치를 뒤로 조금 빼주게 한다.

4. 랜더링 하기

지금까지 쓴 코드를 실행해서 봐봤자 아무것도 안나올꺼다. 왜냐면 아직 랜더링을 안했기 때문이다.

다음 코드를 삽입하여 랜더링을 시키자.

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

우선 render라는 function을 만든다. 그리고 그 function 안에 위와 같이 넣어주고, 드디어! 만들어진 큐브를 보도록 하자!


5.큐브에 에니메이션 주기

아래의 코드를 render()펑션안에 requestAnimationFrame( render )와 renderer.render ( scene, camera )사이에 넣는다.

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

위의 코드는 매 프레임마다 ( three.js의 디폴트는 60FPS로 되어있는 듯 하다. 그러니까 1초에 60번 ) x축으로 0.1씩, y축으로 0.1씩 돌아가게 만들어준다.

이제 다시 봐보자!


이제 좀 뭔가 3D같고 뭔가 움직이고 맘에 든다.

아래는 지금까지 쓴 javascript 최종버전이다.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh( geometry, material);
scene.add(cube);
camera.position.z = 5;
function render(){
requestAnimationFrame( render );
renderer.render(scene, camera);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
render(); 

Github Page에서도 볼 수 있다.

리뷰