[3D] Three.js, 그것이 알고싶다

안녕하세요!

 

싸피 10기는 현재 특화 프로젝트를 마무리하고 있습니다.

특화 프로젝트에서는 다들 새로운 기술들을 많이 도입해서 프로젝트를 진행하는 것 같더라고요!

저희 조도 MSA, YOLO 등 다양한 기술을 새로 배우면서 진행 중입니다!

 

그중 저는 Three.js라는 것을 새로 접해서 사용해보고 있는데요,

왕기초지만! 함께 뭔지 알아볼까요?

 

 

 

---

🔎 Three.js 그게 뭔데?

Three.js는 웹페이지에 3D인 객체를 쉽게 랜더링 할 수 있도록 도와주는 자바스크립트 라이브러리입니다.

Three.js를 검색하다 보면 같이 나오는 WebGL이라는 것도 있는데,

Web Graphics Library의 약자로 점, 선, 삼각형 등을 그리는 단순한 시스템이기 때문에 WebGL만으로 원하는 모델을 만들기는 힘듭니다. 그래서 이걸 도와주는 것이 Three.js입니다.

 

Three.js를 사용하기 위해서는 꼭 이해해야 할 요소들이 있습니다.

Scene, Mesh, Camera, Renderer ⬅ 이 네 가지 요소입니다.

 

예를 들어, 유튜브에 영상을 올린다고 가정을 해봅시다. 

그러면 우선 촬영을 해야 할 텐데 촬영에 나올 (1)배경이 있어야 합니다.

또한 그 화면에 나올 (2)대상이 있어야 하고, 그 장면을 찍을 (3)카메라가 있어야 합니다.

마지막으로 영상을 다 찍으면 (4)업로드를 해야 합니다.

이때 각각 1~4번의 역할을 하는 것이 순서대로

(1) 배경 = Scene
(2) 대상 = Mesh
(3) 카메라 = Camera
(4) 업로드 = Renderer

라고 생각하면 이해하기에 수월합니다. 

 

설치는 공식문서에서 자신의 프로젝트에 맞는 방법으로 설치할 수 있습니다. 

 

🎞 Scene 

배경이 될 Scene을 정의하는 방법은 다음과 같습니다.

const scene = new THREE.Scene()

 

scene은 배경이기 때문에 다음부터 만드는 camera, mesh 등을 추가해줘야 합니다.

scene.add(추가하고 싶은 것)

이런 방식으로 scene에 원하는 것들을 추가해 줄 수 있습니다.

 

 

 

🎥 Camera

Three.js에서 제공하는 카메라의 종류는 다양합니다.

이 중에서 가장 많이 쓰이는 카메라는 PerspectiveCamera입니다.

PerspectiveCamera는 평소 생각하는 카메라로, 원근법이 적용되어 있습니다.

가장 일반적이라 이 카메라만 이용하게 되더라구요..

그 외에는 OrthographicCamera는 원근법이 적용되지 않는 카메라로, 가깝든 멀든 절대적인 크기로 보이는 것이 특징입니다.

 

카메라를 정의할 때에는 여러 인수를 같이 넣어주어야 합니다.

const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 10, 100)

 

여기서 각각의 인수가 의미하는 것은 순서대로

(1) 시야각(fov): 사람과 화면 사이의 각도

(2) 가로와 세로의 비율(aspect)

(3) 가장 앞면까지의 거리(near)

(4) 가장 먼 곳 까지의 거리(far)

카메라 요소들

 

또한 카메라는 위치를 옮기거나 돌릴 수 있습니다.

camera.position.z = 5

여기서의 축은 다음과 같이 사람 기준으로 생각할 수 있습니다.

카메라 축

 

 

⚽ Mesh(Geometry)

화면에 출력될 물체에 해당하는 mesh는 threee.js에서 제공하는 Geometry로 간단하게 출력할 수 있습니다.

공식문서를 참고해서 width, height, depth등을 조절하면서 원하는 형태를 찾아서 쓰면 됩니다.

 

만약 기본 박스를 쓰고 싶다면

const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color: 'white'})
const cube = new THREE.Mesh(geometry, material)

BoxGeomery를 이용해 박스를 하나 만들고,

material로 색을 정의해준 다음

둘을 합쳐서 하얀색 박스를 만들 수 있습니다.

 

그 이후, 만든 것을 화면에 넣고 싶다면

scene.add(cube)

scene에 추가해 주면 이후 Renderer를 이용해 화면에 띄울 수 있습니다.

 

 

🖨 Renderer

화면에 출력해주는 역할을 하는 renderer는 다음과 같이 쓸 수 있습니다.

const renderer = new THREE.WebRender()
renderer.setSize(window.innerWidth, window.innerHeight)

renderer을 정의하고, 사이즈를 화면 비율로 만드는 코드입니다. 

 

 

그리고 나서 화면에 보여주고 싶은 요소들을 render해주면 됩니다.

renderer.render(scene, camera)

 

 

 

---

오늘은 Three.js의 기본적인 요소들에 대해서 알아봤습니다.

Three.js는 공식문서가 잘 되어있어서 보고 따라해도 금방 따라할 수 있더라구요!

 

다들 한 번 씩 시도해서 나만의 3D 포트폴리오를 만들어봅시다..!