티스토리 뷰

Frontend

Three.js

곰돌찌 2020. 8. 27. 18:40

 

 

React360 다음으로 3D렌더링을 좀더 복잡하고 정교하게 구현하기 위한 WebGL 라이브러리 중 가장 대표적인 

Three.js

 

Three.js는 자바스크립트 3D 라이브러리로 WebGL을 기반으로 하고 있다.

물론 WebGL을 가지고 3D를 만들 수 있지만.. Canvas나 SVG처럼 단순한 형식으로만 제공되기 때문에 코드량이

많아진다고 한다!

 

그래서 이걸 좀더 쉽게 도와주는 라이브러리가 바로 Three.js 다. (물론 쉽지는 않은거 같...)

 

아래는 Three.js 의 공식 홈페이지!

 

https://threejs.org/

 

three.js – JavaScript 3D library

 

threejs.org

 

한글문서로 매우 친절하게 설명을 해주는 페이지가 있다!(감사합니다..)

https://threejsfundamentals.org/threejs/lessons/kr/threejs-fundamentals.html

 

Three.js란?

Three.js의 기본 구조와 사용법을 익힙니다

threejsfundamentals.org

 

Three.js는 크게 Scene, Camera, Renderer로 나뉠 수 있다.

Camera로 Scene(장면)을 찍어서 Render한다고 생각하면된다.

그래서 이 세 요소는 필수로 있어야 무언가를 보여줄 수 있다!

 

Scene은 장면으로 어떤 물체들을 보여주는 공간으로 생각할 수 있다.

Scene안에는 다양한 객체와 빛으로 구성되어있다. 기본적으로 객체는 Mesh라고 하고, 빛은 Light로 보면된다.

Scene 내부의 객체들은 트리구조로 부모/자식관계를 맺고 있다. 부모/자식관계가 있기 떄문에

위치와 방향은 상위 객체(부모 객체)를 기준으로 잡을 수 있다.

부모객체의 방향이 틀어지면 자식객체의 방향도 같이 틀어지게 되는 형태로 볼 수 있다!

 

Mesh는 객체 또는 물체로 실제 나타내고자 하는 대상이다. Mesh는 물체의 형태(가로, 세로, 높이 등등의 비율)를 나타내는 Geometry와

물체의 색상이나 빛의 표현 등등의 재질을 표현할 수 있는 Material로 구성되어있다.

 

Texture라는 것도 있는데 이건 이미지나 다른데에서 로드된 이미지, 다른 Scene에서 렌더링된 결과를 보여준다!

Texture는 Material의 구성요소로 물체의 재질을 이미지로 표현할 수 있다

 

위의 threejs-fundamentals에서 간단하게 하나 만들어보자.

 

먼저 Three.js를 로드해야한다. 로드하는 방법은 여러가지인데 이번에는 다운을 받지 않고 인터넷의 힘을 빌려 로드할 수 있도록 했다.

import 구문을 쓰려면 script의 타입이 module이어야한다 

//html

<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js'
</script>

그리고 body에는 canvas를 하나 추가한다.

<body>
  <canvas id="c"></canvas>
</body>

 

렌더링을 할 때는 WebGLRenderer를 사용하면된다. Renderer종류는 다양하지만 WebGLRenderer를 사용했다! (종류에 맞게 사용하면될듯.. Renderer의 종류는 공식홈페이지를 참조!)

<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js'
    
  (() => {
    const canvas = document.querySelector("#c");
    const renderer = new THREE.WebGLRenderer({canvas});
  })()
</script>

다음으로 필요한 요소인 camera를 추가해보자

<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js'
    
  (() => {
    const canvas = document.querySelector("#c");
    const renderer = new THREE.WebGLRenderer({canvas});
    
    const fov = 75;
    const aspect = 2;
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  })()
</script>

fov는 시야각(Field of View)이다. 원래 대부분 각도는 라디안을 사용하는데 이 카메라만 도(degree)를 넣게 되어있다!

aspect는 canvas의 가로세로 비율

near와 far는 카메라 앞에 렌더링 되는 공간의 범위를 지정한다. 설정된 값보다 멀리있는 경우에는 그 부분이 보이지 않게 처리 된다.

 

카메라의 위치를 약간 뒤로 옮기기 위해서 z축의 위치를 옮기고, scene을 추가하고 box를 하나 추가해보자

<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.119.1/build/three.module.js'
    
  (() => {
    const canvas = document.querySelector("#c");
    const renderer = new THREE.WebGLRenderer({canvas});
    
    const fov = 75;
    const aspect = 2;
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;
    
    const scene = new THREE.Scene();
    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth); //형태 잡기
    const material = new THREE.MeshBasicMaterial({color:0x44aa88}); //재질 설정
    
    const cube = new THREE.Mesh(geometry, material); // 형태와 재질을 합쳐서 물체를 만든다
    scene.add(cube); //장면에 만든 물체를 추가한다.
    
    renderer.render(scene, camera); //화면에 출력한다.
  })()
</script>

 

이렇게 되면 까만 화면안에 에메랄드색? 네모가 하나 웹페이지에 나타나게 된다.

 

 

이제 이 평면의 네모처럼 생긴걸 돌려보고, 빛을 추가해보자.

돌리는 건 기본적으로 three.js는 canvas로 돌아가기 때문에 requestAnimationFrame을 사용해서 돌리면된다.

물체 자체를 돌리면되기 때문에 물체를 담았던 Mesh 객체의 cube 변수의 rotatoin을 변경해주면된다.

 

function render(time) {
  time *= 0.001;
  
  cube.rotation.x = time;
  cube.rotation.y = time;
    
  renderer.render(scene, camera);
    
  requestAnimationFrame(render);
}

render();

 

 

 

하지만 뭔가 이상하다.. 왜냐면 빛이 없어서 그림자 지지 않기 때문에 모두 같은 색으로 되어있어있기 떄문이다.

이럴때 필요한게 Light다.

일단 material의 MeshBasicMaterial은 Light의 영향을 받지 않기 때문에 MeshPhongMaterial로 바꿔야한다.

Light는 일단 DirectionalLight를 사용해서 아래와 같이 수정이 되면 빛을 받게 되면서 정말 3D같이 변하게 된다.

 

 

다른 색상으로 같은 도형을 만들고자하면 material은 공통으로 사용하고 mesh만 다르게 해서 설정이 가능하다. 

 

이렇게 정말 간단하게 Three.js에 대해서 소개했다.

기본적으로 제공하는 물체의 형태도 많고 다양하게 수정이 가능하다.

이런 부분은 Three.js의 문서를 확인하면서 만드는게 더 나을 수 있을 것 같다.

 

또한 기존에 만들어져있는 모델링 파일을 로드해서 보여줄 수도 있다. 이런부분은 공부하면서 정리할 필요가 있을거같다!

 

 

 

'Frontend' 카테고리의 다른 글

[Three.js] Sprite  (0) 2020.09.09
[Three.js] Raycaster를 사용해서 물체 hover시 빙글빙글 돌리기  (0) 2020.09.04
[Three.js] glb 파일 animation 동작하게 하기  (0) 2020.09.01
React-360  (0) 2020.08.26
react google login에서 scope 초기화 되는 현상 해결하기  (0) 2020.08.25
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함