Blog

WebGL 경량화 라이브러리 “three.js”

December 13, 2013

WebGL 경량화 라이브러리 “three.js”

three.js 는 기존의 webGL의 코드를 상당량 줄여줄 수 있는 라이브러리 입니다.

WebGL은 현재 크롬, 사파리, 파이어폭스, 오페라, 익스플로러11에서 동작합니다. (wiki 참고)
각 브라우져 중 크롬에서 가장 지원을 잘 해주고 있으니 크롬에서 하는걸 추천합니다.

three.js 는 오픈소스 프로젝트이고 아직 활발하게 활동하고 있어서 계속 기능들이 추가되고 있습니다. 아쉬운 점이 있다면 소스만큼 문서화가 따라가질 못한다는 점;; function이름에서 설명이 되긴 하지만 자세한 설명을 보려면 바로 소스를 봐야한다는;;

그럼 WebGL 로 만들어진 결과물을 봅시다.

http://gravitymovie.warnerbros.com/#/home

영화 그래비티 홈페이지인데 영화배경을 경험(?) 할 수 있는 곳이 webgl입니다. three.js 를 사용해서 만들어 졌는데 좀 아쉬운 면이 있지만 사용자한테 경험을 주기엔 가장 좋은 방법이지 않나 생각합니다.

Screen Shot 2013-12-13 at 1.14.40 PM

더 많은 샘플들과 작업물들은 http://threejs.org 를 통해 보실 수 있습니다.

 

이제 간단한 데모를 만들어봅시다.

그럼 시작전에 앞서 준비를 한다면 three.js파일을 준비합니다.
저는 three.js 파일은 cdnjs에서 링크를 가져왔습니다.

Screen Shot 2013-12-13 at 5.49.41 PM

파일 구조는 같은 레벨의 폴더에서
index.html파일과 script.js 파일에 나눠서 코딩했습니다.

먼저 index.html

<!DOCTYPE html>
<html>
	<head>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
		<script src="./script.js></script>
        </head>
	<body>
	</body>
</html>

 

그리고 script.js

var WIDTH, HEIGHT;
var scene, camera, renderer;

var mesh;

init();
animate();

function init() {
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;

	var VIEW_ANGLE = 45;
	var ASPECT = WIDTH / HEIGHT;
	var NEAR = 1;
	var FAR = 1000;

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(WIDTH, HEIGHT);

	document.body.appendChild(renderer.domElement);

	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR  );
	camera.position.z = 700;

	scene = new THREE.Scene();

	var geometry = new THREE.CubeGeometry( 200, 200, 200 );
	var material = new THREE.MeshBasicMaterial({color: 0xaa33ee});

	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
}

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

function animate() {
	requestAnimationFrame(animate);

	mesh.rotation.x += 0.005;
	mesh.rotation.y += 0.01;

	render();
}

 

아래와 같은 화면이 나오시면 제대로 하신겁니다 ;)

Screen Shot 2013-12-13 at 6.29.46 PM