[토이프로젝트] MyRoom (R3F + Blender + chatGPT)

0. 사용한 툴

코드 에디터 : Vscode

모델링 툴 : Blender

프레임워크 : React

라이브러리 : Three.js, R3F

영상 편집 :

1. HandBrake( 영상 포맷 변경, 영상 시간 조절, 용량 줄이는 용도 ),

2. ffmpeg ( 영상 배속 설정 -> OpenShotVideoEditor로 배속 설정 가능 )

3. OpenShotVideoEditor <- 이 툴로 1,2번의 역할을 수행 가능하다.

AI 서포터 : 뤼튼 ( 현재 ChatGPT4 무료 사용 가능 ) + chatGPT 3.5( 모르는 가벼운 개념 확인)

 

1. 프로젝트 작업 단계

1. 모델링 작업 - Blender

2. Three.js 에 모델링 배치, 조명 설정, Texture 작업 - R3F

3. 버튼 작업 - React Hook

4. 영상 녹화 작업 - 방안에 모니터, TV 영상

5. 배포 - Vercel

6. 도메인 구매 - 가비아

7. 도메인 연동

8. 최종 확인 (현재 데스크탑만 확인 가능)

 

1,2번 작업 블로그에 일부 포스팅 했다.

https://heehee-myblog.tistory.com/66

[React] Blender 모델링, Bake Texture + R3F 적용

 

3번의 경우 Three.js Canvas 내에서는 일반 html 버튼이 사용 불가능하기 때문에 Canvas 밖에서 버튼 작성 후 React Hook으로 이벤트 전달

 

4번의 경우 우분투에서 기본 녹화 프로그램으로 녹화한 후 OpenShotVideoEditor을 사용해서 가볍게 편집하고 export했다.

그림은 저작권이 없는 이미지를 가져와서 띄워 놓고 OpenShotVieoEditor 좌측 상단에 타이틀을 눌러서 글자를 넣으면 된다.

 

 

5,6번은 뤼튼에 vercel에 배포하는 방법과 가비아와 연동하는 방법을 물어보면 잘 알려준다.

 

배포한 사이트 : https://www.toryvic.site

(도메인은 가비아에서 1900원에 구매하여 변경했다)

Resume

2. My Room 기능

1. 초기 사이트 로딩화면

React Suspense 활용하여 static 파일들 로딩 시점을 기다린다.

 

로딩화면

2. 초기 방 화면

화면 조금 회전하면서 카메라가 방을 본다. Room 버튼과 같은 기능

 

Room버튼 클릭 or 초기 방 화면

 

3. Light 버튼 클릭 화면

방이 밝아진다.

 

Light 버튼

4. Monitor 버튼 클릭 화면

모니터 화면을 본다.

가운데 모니터는 [토이프로젝트] 중 객실 예약 사이트 작업하던 프로세스를 녹화했다.

좌측 맥북은 [토이프로젝트] MSA로 앨범 판매 사이트 docker compose 할때 화면을 녹화했다.

 

Monitor 버튼

 

5. TV 버튼 클릭 화면

TV로 카메라 시점을 옮긴다.

 

TV 버튼 클릭

6. About

이력서를 올리려고 했는데 아직 작성하지 않아서 깃허브 이미지와 노션 이미지만 추가했다.

3. 느낀점

이번 프로젝트를 진행하면서 ChatGPT4의 유용함을 알게된 것 같다.

거의 90% 이상을 뤼튼과의 질의를 통해서 프로젝트 트러블 슈팅을 했고 나머지 10%만 구글에 검색 해서 해결 방안을 찾았다.

구글에 검색해서 직접 찾는게 엄청난 에너지 소비로 느껴질정도로 chatGPT4가 개발에서 필수 요소로 자리 잡은 것 같다.

R3F에 대한 공부는 영상 5개 정도 참고해서 작성했는데 가벼운 프로젝트에서는 전혀 문제 없이 라이브러리를 사용 할 수 있었다.

한번에 알고싶은정보가 여러 개인 경우 뤼튼에서 중요한 정보를 물어보고( 대답하는데 시간이 필요하기 때문에)

추가 적으로 알고싶은 부분은 chatGPT3.5를 통해서 질문

 

4. 프로젝트 기간

프로젝트 완성까지 작업 시간은 20일 정도 걸린 것 같다.