AI 생성 모델 에셋과 three.js 엔진을 결합하여 스크롤 기반 인터랙티브 영화 같은 3D 랜딩 페이지를 만드는 오픈소스 프레임워크
요약
AI 생성 모델 에셋과 three.js 엔진을 결합해 스크롤 기반의 인터랙티브 3D 랜딩 페이지를 만드는 오픈소스 프레임워크가 소개되었습니다. 이 프레임워크는 AI 이미지-to-3D 과정을 거친 PBR 모델을 최적화하여 웹에 적용하는 방법을 제시합니다.
핵심 포인트
- AI 에셋과 three.js로 인터랙티브 3D 랜딩 페이지 제작 가능
- 이미지-to-3D(image-to-3D) 과정을 거쳐 PBR 모델 생성
- 모델 최적화 및 압축을 통해 웹 성능 개선 (25MB -> 3~8MB)
- MIT 라이선스 기반의 오픈소스 프레임워크 제공
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로 줄입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 X @qingq77 (검증됨)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0