[1] Three.js의 이해 (정육면체 만들기)

 

1. 들어가면서...

나는 이제 갓 프론트엔드 개발자가 된지 11개월이 다 되어가는 초급 개발자이다.

여러가지 자바스크립트 중에서 어떤 스크립트를 공부해야 내가 재밌게 공부하면서 즐길 수 있을까 생각해보다가 three.js라는 언어를 알게 되었다.

 

평상 시에도 3D 구현에 관심이 많았던 나로서는 바로 티스토리 블로그에 개념 같은 것을 메모해가며 공부를 시작해야겠다는 생각을 하였으며 게임 하나를 완성하는 순간까지 꾸준하게 공부해보고자 마음 먹었다..!

 

그럼 three.js 공부를 시작해볼까?

---

[ THREE.JS ]

Three.js에서 3D를 구현하기 위해서는

• 공간 - Scene
• 피사체 : 부피, 질감 - Mesh : Geometry, Material
• 카메라 - Camera
• 빛 - Light

이렇게 4가지 요소들이 필요하다.

 

공간

가장 먼저 오브젝트를 놓을 공간이 필요한데 영어로 scene이라고 한다. 쉽게 말해 배경을 만들어주는 역할을 한다.

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  alpha: true, //투명한 배경을 가짐
  antialias: true //안티얼라이어싱이 적용
})

- alpha: true 투명한 배경을 가짐

- antialias: true 안티얼라이어싱이 적용

 

피사체

피사체는 공간(scene) 안에 출력되는 물체를 말한다.

// 정육면체 피사체
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({color: 0x44a88});

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

mesh = cube; // 정육면체가 계속 돌아가는 효과

- geometry : 뼈대

- material : 표면

-mesh(물체) : geometry(뼈대) + material(표면)

( scene.add 함수를 통해 공간에 추가한 물체는 (0, 0, 0) 위치에 놓인다 )

 

카메라

공간과 물체를 만들었으면 우리가 보는 시선을 조정할 수 있는 카메라 차례이다.

const camera = new THREE.PerspectiveCamera(
    75,
    width / height,
    0.1,
    100
);
camera.position.z = 2;
this._camera = camera;

 

---

3. 최종

 

<div id="webgl-container"></div>

import * as THREE from '../../build/three.module.js';

class App {
    constructor() {
        const divContainer = document.querySelector("#webgl-container");
        this._divContainer = divContainer;

        const renderer = new THREE.WebGLRenderer({ 
            alpha: true,
            antialias: true
         });
        renderer.setPixelRatio(window.devicePixelRatio);
        divContainer.appendChild(renderer.domElement);
        this._renderer = renderer;

        const scene = new THREE.Scene();
        this._scene = scene;

        this._setupCamera();
        this._setupLight();
        this._setupModel();

        window.onresize = this.resize.bind(this);
        this.resize();

        requestAnimationFrame(this.render.bind(this));
    }


    // _setupCamera
    _setupCamera() {
        const width = this._divContainer.clientWidth;
        const height = this._divContainer.clientHeight;
        const camera = new THREE.PerspectiveCamera(
            75,
            width / height,
            0.1,
            100
        );
        camera.position.z = 2;
        this._camera = camera;
    }

    // _setupLight
    _setupLight() {
        const color = 0xffffff;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(-1, 2, 4);
        this._scene.add(light);
    }

    // _setupModel
    _setupModel() {
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshPhongMaterial({color: 0x44a88});

        const cube = new THREE.Mesh(geometry, material);

        this._scene.add(cube);
        this._cube = cube;
    }

    // resize
    resize() {
        const width = this._divContainer.clientWidth;
        const height = this._divContainer.clientHeight;

        this._camera.aspect = width / height;
        this._camera.updateProjectionMatrix();

        this._renderer.setSize(width, height);
    }

    // render(time)
    render(time) {
        this._renderer.render(this._scene, this._camera);
        this.update(time);
        requestAnimationFrame(this.render.bind(this));
    }

    // render(time) -> update(time)
    update(time) {
        time *= 0.001; //second unit
        this._cube.rotation.x = time;
        this._cube.rotation.y = time;
    }
}

window.onload = function() {
    new App();
}

위 코드를 입력하시면 정육면체가 3d 형태로 계속 돌아가는 것을 확인할 수가 있을 것이다..!