[Three.js] 구성 요소

https://threejs.org/

https://github.com/mrdoob/three.js/

 

Three.js는 WebGL를 이용한 3D 그래픽 라이브러리이다. 주요 구성요소는 아래와 같다.

 

1. Mesh (Object)

Mesh 객체는 3D 화면을 구성하는 물체(Object)로서, Mesh 객체를 만들기 위해서는 형상정보(Geometry)와 재료정보(Material)를 정의해야한다. Mesh 객체가 만들어지면 설정값을 통해서 3D 공간상의 위치와 자세를 결정할 수 있다.

let cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
let cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(1, 2, 0);

 

2. Light

주변광(AmbientLight)이나 집중광(SpotLight)등 다양한 광원을 통해서 물체들을 3D공간상에서 볼 수 있다.

let ambienLight = new THREE.AmbientLight(0x555555);

 

3. Scene

Scene 객체는 화면을 구성하는 물체(Object)와 광원(Light)를 저정하고 관리하는 역할을 한다. 물체와 광원을 생성한 뒤, 해당 객체를 Scene 객체에 포함시켜야 화면에 나타난다.

let scene = new THREE.Scene();
scene.add(cube);
scene.add(ambienLight);

 

4. Camera

Camera 객체는 이름에서도 알 수 있듯이, Scene 객체를 촬영하여 어떻게 보여줄 것인가를 결정한다. 같은 Scene이라고 하더라도, 카메라의 위치 및 기타 설정값들을 통해서 다른 화면을 보여줄 수 있다.

let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(10, 20, 30);
camera.lookAt(scene.position);

 

5. Renderer

카메라 설정값을 기반으로 Scene에서 보여줄 화면을 계산하고, 브라우저에 해당 화면을 출력하는 역할을 담당한다.

let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(innerWidth, innerHeight);
renderer.render(scene, camera);

 

 

http://threejs.org/editor/

https://github.com/josdirksen/learning-threejs-third

https://github.com/mrdoob/stats.js

https://github.com/dataarts/dat.gui