ThreeJS 2. Rendering and Viewing a 3D Object

이번 포스트에서는 첫번째 Scene을 만들어보고 몇개의 Objects와 Camera를 추가 해볼 것 입니다.

첫 예제에 들어갈 Objects들은 5가지입니다.
Plane, Cube, Sphere, Camera, Axes
평면, 큐브, 구, 카메라, 축
우리가 알만한 직관적인 객체들입니다. 카메라 객체는 우리가 무엇을 보는지 나타내는 객체입니다.
Axes 축은 x, y and z 축이 있습니다. 이것은 objects가 어디에 위치하는지 도와줄 디버깅용 입니다. x축은 red, y축은 green, z축은 blue 색입니다.

설명

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setClearColor(new THREE.Color(0x000000)); 
renderer.setSize(window.innerWidth, window.innerHeight); 

맨 처음 우리는 TREE 모듈에 있는 Scene, camera, renderer를 만들겠습니다.
scene objecct 는 하나의 container 우리가 render하기 원하는 모든 Objects들과 모든 lights들을 추적(keep track)하고 저장하기 위해 사용됩니다. THREE.Scene 없이는 Three.js 는 어떠한 것도 렌더링할 수 없습니다. Scene에 대한 자세한 내용은 다음 포스트에서 소개하겠습니다.

sphere와 cube는 조금 있다가 이 예제에 추가될 예정입니다.

위 코드 조각에서 camera라는 객체를 정의합니다.우리가 무엇을 볼지를 정의하는 객체입니다.
이 객체도 다음 포스트에서(들어가는 인자에 대해서) 더 자세히 소개하겠습니다.

다음으로 renderer를 정의합니다.renderer 객체는 camera객체가 무엇을 보는지에 따라 scene object가 브라우저상에서 어떻게 보여져야하는지를 계산하는 역할을 합니다.

이번 예제에서는 scene을 렌더링하기 위해 그래픽카드를 사용하는 THREE.WebGLRenderer를 사용할 것입니다. ( threejs.org 홈페이지에 있는 예제들에서는 WebGLRenderer 외에도 다른 Renderer를 사용하는 예제들이 존재합니다. canvas-based renderer, CSS-based renderer, SVG-based one
하지만 이러한 renderer들은 사용하지않는 것을 추천합니다 더이상 확발히 개발되지않고 매우 CPU지향적이기 때문입니다. )

setClearColor를 이용해서 rederer의 바탕색을 검은색(new THREE.Color(0x000000))으로 설정했습니다. 그리고 이어서 scene이 렌더링될 사이즈를 setSize 함수를 통해 renderer에게 요청합니다. window.innerWidth, window.innerHeight를 통해 이용할 수 있는 화면을 전체 다 이용합니다.

이렇게해서 저희는 비어있는 Scene과 renderer, camera를 생성했습니다. 그러나 아직 렌더링되는 것은 아직 아무것도 없습니다.

var axes = new THREE.AxesHelper(20); 
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(60, 20); 
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xAAAAAA }); 
var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
plane.rotation.x = -0.5 * Math.PI; 
plane.position.set(15, 0, 0); 
scene.add(plane);

보시다시피 이제 축(axes)을 만들고 scene에 cene.add를 통해 그 축을 추가해줍니다. THREE.AxesHelper(20)에서 들어간 인자는 x,y,z축에 나타날 line의 size입니다. Helper 라는 네이밍이 들어간 것을 보아 확실히 디버깅용이라는 의미가 있는 것같습니다.

그리고 plane(평면)을 만들겠습니다. 두 단계를 해야합니다.
처음, 우리는 THREE.PlaneGeometry(60, 20) 코드를 통해서 평면이 어떻게 생겨야하는지를 정의합니다. (width: 60, height: 20) 이어서 우리는 물론 Three.js에게 이 어떤 색깔, 투명도를 가지고 있는지를 정의해야합니다. Three.js에서는 material object를 생성함으로써 이것을 수행할 수 있습니다. 저희는 이번 예에서는 기본적인 0xAAAAAA색을 가진 material(THREE.MeshBasicMeterial)을 만들겠습니다.

다음으로 우리는 평면의 모양을 정의한 THREE.PlaneGeometry 와 색깔, 투명도를 정의한 THREE.MeshBasicMeterial를 THREE.Mesh Object에 넣고 plane 변수에 할당하겠습니다.
마지막으로 plane을 scene에 추가하기전에, 우리는 해당 평면이 Scene의 정확이 어느 위치에 있을지 correct position을 설정해야합니다.
x축방향으로 90도 회전하고 position property를 사용해서 scene에서의 위치를 지정합니다.
그리고 마지막으로 axes를 추가한 것처럼 scene에 추가해주면 됩니다.

cube와 sphere objects 도 같은 방식으로 추가될 것입니다. 대신 Material설정 중 wireframe이라는 property를 true로 설정합니니다. ( Three.js 에게 solid object가 아니라 wireframe을 보여주라는 의미 입니다. wireframe은 vertex 와 Edge로만 이루어진 형태를 말합니다.)

camera.position.set(-30, 40, 30); 
camera.lookAt(scene.position);
document.getElementById("webgl-output").appendChild(renderer.domElement); renderer.render(scene, camera); 

이제 예제코드의 마지막 부분입니다. 여기까지 한 일을 보면 우리가 렌더링하기 원하는 모든 요소를 Scene에 정확한 위치를 가지고 추가 했습니다.
camera는 무엇을 렌더링해야할지를 정의합니다. 위 코드에서 우리는 set function을 이용해서 camera를 위치시킵니다.물론 position.x, position.y, position.z 로 조절할 수 도 있습니다.

camera가 우리의 objects를 보는것을 확실히하기위해 우리는 lookAt 이라는 함수로 우리의 scene 중앙을 향해 보게합니다. ~default로 (0, 0, 0)를 향하고 있습니다.~ ~default 값은 정확하지 않은 것 같습니다.~

이제 남은것은 renderer를 div DOM element에 추가하는 것입니다.
우리는 output element를 선택하고 우리의 div 요소를 추가하기위해 표준 자바스크립트를 사용합니다. 마지막으로 renderer에게 camera객체를 이용해서 scence 를 렌더링하라고 말하면 됩니다.

전체 코드

function init() {
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);

    // show axes in the screen
    var axes = new THREE.AxesHelper(20);
    scene.add(axes);

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({
        color: 0xAAAAAA
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(15, 0, 0);

    // add the plane to the scene
    scene.add(plane);

    // create a cube
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xFF0000,
        wireframe: true
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    // position the cube
    cube.position.set(-4, 3, 0);

    // add the cube to the scene
    scene.add(cube);

    // create a sphere
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial({
        color: 0x7777FF,
        wireframe: true
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    // position the sphere
    sphere.position.set(20, 4, 2);

    // add the sphere to the scene
    scene.add(sphere);

    // position and point the camera to the center of the scene
    camera.position.set(-30, 40, 30);
    camera.lookAt(scene.position);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // render the scene
    renderer.render(scene, camera);
}

정리

우리의 object들을 포함시키고 있는 Container인 Scence를 renderer를 통해서 렌더링하는 것입니다. 또 렌더링될 때 어느각도에서 보여질지를 결정하는 카메라를 통해 방향까지 결정해줍니다.