WebGL 경량화 라이브러리 “three.js”
three.js 는 기존의 webGL의 코드를 상당량 줄여줄 수 있는 라이브러리 입니다.
WebGL은 현재 크롬, 사파리, 파이어폭스, 오페라, 익스플로러11에서 동작합니다. (wiki 참고)
각 브라우져 중 크롬에서 가장 지원을 잘 해주고 있으니 크롬에서 하는걸 추천합니다.
three.js 는 오픈소스 프로젝트이고 아직 활발하게 활동하고 있어서 계속 기능들이 추가되고 있습니다. 아쉬운 점이 있다면 소스만큼 문서화가 따라가질 못한다는 점;; function이름에서 설명이 되긴 하지만 자세한 설명을 보려면 바로 소스를 봐야한다는;;
그럼 WebGL 로 만들어진 결과물을 봅시다.
http://gravitymovie.warnerbros.com/#/home영화 그래비티 홈페이지인데 영화배경을 경험(?) 할 수 있는 곳이 webgl입니다. three.js 를 사용해서 만들어 졌는데 좀 아쉬운 면이 있지만 사용자한테 경험을 주기엔 가장 좋은 방법이지 않나 생각합니다.
더 많은 샘플들과 작업물들은 http://threejs.org 를 통해 보실 수 있습니다.
이제 간단한 데모를 만들어봅시다.
그럼 시작전에 앞서 준비를 한다면 three.js파일을 준비합니다.
저는 three.js 파일은 cdnjs에서 링크를 가져왔습니다.
파일 구조는 같은 레벨의 폴더에서
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();
}
아래와 같은 화면이 나오시면 제대로 하신겁니다 
Array
