react three fiber

0. Intro 프로젝트 계획 변동 원래 계획은 였습니다.  중앙에 Lottie 가 애니메이션으로 동작하고 주변에 3D 모델링된 별들이 고정된 위치에서 줌인 - 줌아웃 정도의 애니메이션만 동작할 예정이었죠.. 하지만 실제 React-Three-Fiber 로 개발하다보니, 별들만 3D모델링을 하는게 쉽지 않았습니다. 같은 Canvas 에 모델들을 넣기 위해서 지구도 3D 모델 즉, Gltf 포맷으로 넣기로 계획을 수정하였습니다. 1. 지구와 별들 리소스 구하기 및 프로젝트에 추가하기별 리소스 구하는 방법은 https://choi-hee-yeon.tistory.com/232 [Next.js] React-Three-fiber 을 사용하여 3D 모델 프로젝트에 추가 및 애니메이션 적용하기1. 3D 모델 구하기 ..

1. 3D 모델 구하기 (gltf)우선 3D 모델을 구하기 위해서 저는 https://lumalabs.ai/genie?view=preview Luma AI - GenieA 3d generative foundation modellumalabs.ai를 사용했습니다!  1-1. 원하는 모델을 입력하기1-2. 원하는 모델을 선택하여 다운로드하기  다운로드할때, gltf 형식으로 합니다. 웹에 제일 적절한 포맷입니다.   GLTF와 기타 포맷 비교포맷크기성능 최적화호환성 주요 특징GLTF작음매우 높음웹 표준 지원경량, 스트리밍 지원, PBR 렌더링 지원OBJ큼낮음제한적오래된 포맷, 텍스처 포함 불가FBX큼중간제한적애니메이션 지원, 폐쇄적 포맷COLLADA큼중간제한적XML 기반, 파일 크기 크고 느림  2. Nex..