three.js 배워보기

expo three를 다루기 전에 우선 three.js를 배워봅시다.

expo three를 다룰 수 있게되면 여러가지 게임(앱)을 만들어 볼 수 있을 것이라고 생각해서 궁극적으로는 expo three로 간단한 게임을 만드는 튜토리얼을 "언젠가는" 올리고 싶습니다. 저도 배우고 싶은 거라 여러 가지 자료들을 찾고, 배우고 있는 중에 우선은 단계적으로 three.js에 대한 튜토리얼을 진행해보도록 하겠습니다.

함께 무엇을 만들어볼까요?

우선은 회전하는 정사각형을 같이 만들어보도록 하겠습니다.

회전하는 정사각형 예제

예제 보러가기

우선은 회전하는 사각형을 만들고 차차 이벤트들도 추가해보면서 three.js를 이해해보도록 하겠습니다.

three.js란?

위에 올린 이미지처럼 웹 브라우저에 3d 형태로 나타낼 수 있게 도와주는 것이 WebGL이라는 라이브러리입니다. three.js는 간편하고 쉽게 3d 형태의 오브젝트를 만들어서 이 WebGL이라는 라이브러리를 통해 우리에게 보여준다고 생각하시면 됩니다.

공식 홈페이지 바로가기  

홈페이지에 들어가보시면 three.js로 만든 여러가지 사이트들이 보입니다.

선풍기에 따라 고개를 돌리는 사자

우리가 만든 예제에 비해서 너무 거대한(?) 것들이지만 하나씩 배우다보면 우리도 저런 작품들을 만들 수 있을테니 걱정마세요!

필요한 것들 이해해보기

일단 너무 어렵게 생각하기 보다는 간단하게 이해해보도록 하겠습니다. 3d를 표현하기 위해서는 무엇이 필요할까요? 우선은 오브젝트들이 있어야할 장소, 오브젝트, 오브젝트를 비쳐주는 빛, 그리고 그 오브젝트를 보는 우리의 시선이 필요합니다.

예쁜 장미꽃이 보이는 사진입니다.

위의 사진에 앞에 말했던 요소들이 다 들어가 있나요? 오브젝트들이 있어야할 장소(장미꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선이자 카메라 등 말한 요소가 모두 들어가 있습니다. 우리 예제도 그렇고 three.js를 이용하는 방법도 그렇고 필요한 요소들을 모두 정의한 후에 렌더링하면 됩니다. 아주 간단하죠?

언급한 것들에 대한 용어들만 살짝 외우시면 됩니다.

장소는 scene, 오브젝트는 mesh, 빛은 light, 우리의 시선이자 카메라는 camera입니다. 다음 포스팅에서는 이것들에 대한 설명을 좀 더 해보고 코드를 정의해보도록 하겠습니다.