# react-three-drei

designc

오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다. 바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤 것이 있는지에 대해 간단히 알아보는 시간이 될 것이다. 초기 세팅 우선, 앞선 시리즈인 threejs 코드편 시리즈에서 배웠던 대로 초기 세팅을 해보자 원하는 디렉터리 위치로 이동 후, 터미널을 열고, 라고 입력해주자. 프로젝트 초기 세팅은 앞의 시리즈에도 겹치는 내용이 많으니, 혹시라도 이해가 가지 않는다면 아래 링크를 클릭하여 읽고 오는 것을 추천한다. (천천히 정독하면, 7분 정도 소요 예상) <a href="https

designc

오늘은 카카오에서 얼마 전(좀 오래 전)선보였던 '춘식이 관찰일기'와 비슷한 각도에서 내려다보는 Orthogonal Camera를 이용한 간단한 포트폴리오 페이지를 만들어보려 한다. 필자도 현재 개발중이나, 완성된 페이지는 대략 아래와 같은 모습이 될 것이다. 포트폴리오 페이지 구현에 필요한 최소 기술 스택 >- #### Vite >- #### HTML >- #### CSS >- #### Javascript >- #### Typescript >- #### React >- #### Threejs >- #### React-Three-Fiber >- #### (기술 스택은 아니지만)Netlify를 비롯한 배