오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.
바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지,
또한 중요하게 공부할 만한 포인트는 어떤 것이 있는지에 대해 간단히 알아보는 시간이 될 것이다.
초기 세팅
우선, 앞선 시리즈인 threejs 코드편 시리즈에서 배웠던 대로 초기 세팅을 해보자
원하는 디렉터리 위치로 이동 후, 터미널을 열고,
npm create vite [원하는 프로젝트 명] --template react-ts
라고 입력해주자.
프로젝트 초기 세팅은 앞의 시리즈에도 겹치는 내용이 많으니,
혹시라도 이해가 가지 않는다면 아래 링크를 클릭하여 읽고 오는 것을 추천한다.
(천천히 정독하면, 7분 정도 소요 예상)
앗! threejs 코드편 시리즈
자 그럼, 기초적인 세팅은 모두 할 줄 안다고 생각하고, 필요한 라이브러리를 모두 설치해보자.
npm i three @react-three/fiber @react-three/drei styled-components recoil
npm i @types/three @types/styled-components @types/recoil -D
모든 준비는 완료되었다.
이 프로젝트의 간략한 구조
자 이제, 이 프로젝트를 기본적으로 어떤 구조로 만들 것인지 간략하게 알아보자.
이번 프로젝트는 크게 세 가지 종류의 대주제로 구성될 것이다.
Canvas 하위 컴포넌트
- Floor 컴포넌트
- Light 컴포넌트
- 각종 Mesh 컴포넌트
비Canvas 하위 컴포넌트
- 미니맵 컴포넌트
- 하위에 생성되는 설명문 컴포넌트
- 그 외 Canvas 컴포넌트에 포함되지 않는 모든 컴포넌트
기타
- recoil state
- enum
- util
- etc...
Canvas 하위 컴포넌트
우리의 프로젝트의 주를 이루는 컴포넌트는 아마, canvas에 그려지는 3d 오브젝트일 것이다.
포트폴리오 페이지의 미리보기에 보이는 대부분의 컴포넌트가
아마 이 canvas 컴포넌트에 속할 것이다.
비Canvas 하위 컴포넌트
포트폴리오 페이지에서 마치 게임의 npc의 대사가 뜨는 듯한 UI와,
좌측 상단에 있는 미니맵 UI가 이 카테고리에 포함이 될 것이다.
기타
기타에는, 이번 프로젝트에서 깊게 알아볼 내용은 아니지만, react와, 대규모 프로젝트를 좀 더, 효율적으로 유지보수 할 수 있는 몇몇 라이브러리 혹은 습관이 포함 될 것이다.
공부할 핵심 요소들
프로젝트에서 공부할 핵심 요소가 어떤 것이 있는지에 대해 알아보자.
useThree hook의 적절한 사용
useFrame hook 사용과 주의점
state를 이용하지않고, dom을 직접 제어하기
간단한(?) 수학계산
useThree hook의 적절한 사용
react-three-fiber를 사용할 때,
scene 객체 등을 아주 계층이 낮은 하위 컴포넌트에서 사용할 때,
매번 props로 전달해주면 매우 비효율적일 것이다.
비단 scene 뿐 아니라 ,renderer 등 three에서 공통으로 사용하는 여러 객체를
다른 컴포넌트에서도 쉽게 사용할 수 있게 해주는 hook에 대해 공부할 예정이다.
useFrame hook 사용과 주의점
useFrame은 setAnimationLoop을, react화 하여 만든 hook이라고 생각하면 된다.
react의 특성 상, state가 바뀌게 되면, React.memo 등을 사용하지 않은 이상,
해당 state를 사용중인 컴포넌트가 리렌더된다.
매 frame마다 실행중인 useFrame에 state를 매번 바꾸는 로직등을 추가한다면,
매 frame마다 해당 컴포넌트에 리렌더가 일어날 것이다.
state를 이용하지않고, dom을 직접 제어하기
useFrame 내부에서 일어나는 처리로 인해 비 Canvas 컴포넌트에서 변화가 일어나야 할 때,
state를 이용한다면, 매번 rerender가 일어나게 될 것이다.
예를 들어, 미니맵에 현재 player의 위치가 빨간점으로 실시간으로 좌표가 바뀌는 것을 구현하고자 할 때, 매 frame마다 그 위치를 바꾸기위해 리렌더를 일으킨다면, 아주 비효율적일 것이다.
따라서 이럴 때는 기본기를 살려 javascript함수만을 이용해 dom 객체를 제어할 것이다.
간단한(?) 수학계산
중고등학교때의 추억을 되살리는 아주 뜻깊은(?) 항목이다.
cos, sin 함수를 이용해서, 중심점으로부터 일정 반지름 거리에 특정 각 범위 만큼의 위치에,
라바콘(도로 위에서 볼 수 있는 주황색 원뿔형 물체)를 배치해 보는 로직을 작성해 볼 것이다.
이것으로, 실전편 1탄은 끝이다.
무작정 코딩에 들어가기 보다, 대충이라도 어떤 구조로, 어떤 항목을 중점으로 공부할 것인지 정리해보는 시간을 갖는것이 중요하다고 생각하여 구성해 보았다.
다음 탄에서는 기본적인 컴포넌트의 구성과 함께, 위의 4가지 항목에 주안점을 두고, 블로그를 작성해 볼 예정이다.
