AI 생성 모델 에셋과 three.js 엔진을 결합하여 스크롤 기반 인터랙티브 영화 같은 3D 랜딩 페이지를 만드는 오픈소스 프레임워크

AI로 생성된 모델 에셋과 three.js 엔진을 조합하여, 스크롤에 의해 구동되고 상호작용이 가능한 영화 같은 3D 랜딩 페이지를 만들 수 있는 오픈소스 프레임워크입니다.

저장소에는 바로 실행할 수 있는 20개의 3D 웹사이트 예시가 포함되어 있으며, 비용을 청구하거나 계정 등록을 요구하지 않습니다. 코드는 MIT 라이선스이며, 생성된 모델과 이미지는 CC BY 4.0으로 배포됩니다.

작업 방식은 먼저 fal에서 Nano Banana 2를 사용하여 흰색 배경의 제품 이미지를 얻고, 이를 Meshy 7.1에 넣어 이미지-to-3D(image-to-3D) 작업을 거쳐 6만25만 삼각형 면을 가진 PBR 모델을 얻는 것입니다. 이후 scripts/optimize.mjs를 사용해 메시 결합 및 meshopt 압축, 텍스처를 WebP로 변환하여 용량을 25MB에서 38MB로 줄입니다.