프로젝트 스트레스에 하루하루 말라가고 있는 요즘...
스트레스만 받고 프로젝트는 제대로 안굴러가서 바쁘지는 않는데 마감일은 다가와서 거의 뭐 뇌정지 상태에 있는 요즘...
뭐라도 해야겠다 싶어서 udemy 강의를 구경하다 요런 강의를 발견했따
https://kmooc.udemy.com/course/react-three-fiber-configurator/learn/lecture/36719356#overview
얼마 전 판교에서 강의도 들었던 react-three-fiber 로 3D configurator 도 만들고, ui animation 도 추가해서 멋드러진 인트로 페이지를 만드는 강의였당
시간도 2시간정도로 짧고, 시간 대비 꽤나 괜찮은 결과물을 만들 수 있는 것 같아서 바로 듣기 시작했다!
INTRO - 프로젝트 구상 순서
강의 가장 처음에는, 3D 프로젝트를 구상하는 과정에 대해 간단하게 설명해준다!
아무래도 현업에서는 디자이너가 따로 있고, 그 디자이너가 만든 디자인에 따라 프로그래밍을 하는 절차이지만
혼자 3D 프로젝트를 하게된다면 기획부터 디자인까지 직접 해야하니까 이렇게 전반적인 절차를 설명해주는게 좋았다
간단하게 정리해보면 다음과 같은데,
- make a list
- Priority
- Show decal functionality (레벨의 메쉬에 투영되는 머티리얼)
- Use a given model (t-shirt)
- Change color
- Good to have
- Intro screen
- animations
- interface change color too
- Priority
- find references
- draw example
- creating
먼저 필수적으로 들어가야하는 리스트를 만든다. 이 프로젝트를 예시로 생각한다면 티셔츠 모양의 모델을 사용하고, 그 모델의 컬러를 변경할 수 있어야한다!
그 다음으로는, 필수는 아니지만 추가된다면 좋을만한 기능을 생각해본다. 역시나 이 프로젝트를 예시로 생각한다면 모델 위에 오버레이되는 인트로 화면과 애니메이션, 모델 뿐만 아니라 인터페이스의 컬러도 변경할 수 있는 기능이다. 이 단계까지가 기획!
그 다음으로는 디자인에 들어가기위한 레퍼런스를 찾는 과정이다. 이 강의에서는 강사님이 직접 BMW 라던가 다른 의류 브랜드의 페이지를 레퍼런스로 찾은 예시를 보여줬다
레퍼런스를 찾았으면 피그마나 xd 등의 툴을 이용해서 직접 만들 디자인을 만들어보고, 그 디자인을 기반으로 개발을 시작하면 된다!
내 포트폴리오 페이지를 취업 전에 만들 때도 그랬지만 혼자 기획부터 디자인, 개발까지 하는건 어려운 일이다,,
근데 이 강의 초반을 듣고 다시 생각해보니 너무 절차없이 막무가내로 하려고 해서 어려웠던건가 싶다ㅋㅋㅋㅋ
나도 제대로된 과정에 따라서 리스트업, 레퍼런스 찾기, 적당한 툴로 디자인, 그리고 개발 순서로 다음 개인 프로젝트를 진행해야겠다고 생각!
Optimising model
그 다음 바로 개발에 들어가지않고, 간단히 모델을 최적화하는 방법도 보여줬는데, 이 부분은 블렌더를 꽤나 전문적으로 다뤄야 잘 이해할 수 있는 부분인 것 같아서 이해하는데 조금 어려웠다...
일단 예시로 내려받은 모델 파일을 불러와서 크기를 스케일링하거나 texture, shadow 등을 추가하는 법을 보여주고 최종적으로 bake 하는 모습까지 보여줬는데, 기본 내려받은 파일로도 실습은 가능할 것 같아서 일단은 강의만 정리해두었따...!
- 모델 스케일링
- 실제 프로그래밍 시 필요한 사이즈로 스케일링
- 복잡한 메쉬에 대해 decimate, unsubdivision 으로 자연스럽게 만들 수 있음
- UV editing
- shading
- ambient occlusion
Start Coding
그리고 드디어 본격적인 개발로 들어가는데, 강의에서는 code sandbox 를 이용해서 개발하는 모습을 보여줬지만 난 깃헙에도 올려두고 확인하고싶어서 CRA 를 이용해서 프로젝트를 셋팅했다!
그 다음 과정은 이전의 R3F 강의와 똑같이 모델을 불러오고, 카메라 세팅, 조명 및 환경 등을 세팅해주면 된다
그리고 Overlay 컴포넌트를 만들어 모델 위에 덮어씌워서 인트로 페이지를 만드는게 가장 재밌었다!
앞으로 만들 새 포트폴리오 페이지에도 적용해서 만들어봐야겠다고 생각할 정도로 내 생각보다 결과물이 너무 괜찮게 나왔다!
- 프로젝트 세팅
- npm i three @react-three/fiber @react-three/drei
- Canvas 세팅
- 카메라, 조명 세팅
- 모델 불러오기
- gltf 바로 fiber 코드로 만들기
- environment, shadow, camera 세부 조정
- Intro 만들기
- Canvas 와 overlay 되도록 style 수정
요게 결과물!
메인 페이지와 컬러를 변경할 수 있는 페이지 두 가지를 만들었다
영상으로 보는게 더 맘에드는데, 유저 마우스 포지션에 따라 모델을 바라보는 카메라 위치가 움직이고,
인트로 페이지에서는 약간 우측에 빠져있다가 커스터마이즈 페이지로 넘어갈 때 중앙으로 오는 모델 애니메이션도 추가되었다
커스터마이즈 페이지에서 컬러를 변경했을 때 모델은 물론 전체적인 UI 의 컬러도 바뀌도록 했다!
사실 이렇게 금방, 완성도 높은 페이지를 완성할 수 있을거라고는 생각 못했는데, 개인적으로 너무 만족스러웠던 강의였다ㅎㅎㅎ
(직접 fly emirates 아이콘 다운받아서 대체했더니 더 그럴듯하다!)
히히 만족스러우니까 깃헙 레포 링크도 살포시 남겨두고 오늘도 마무리해본당
혹시 관심있다면 클론해서 실행시켜보시길!
https://github.com/hyeoz/r3f-configurator
GitHub - hyeoz/r3f-configurator
Contribute to hyeoz/r3f-configurator development by creating an account on GitHub.
github.com
그럼 오늘도 안녀어어엉
