MengTo/kage
HTML0 / 0
Three.js r149 단일 HTML로 만든 스크롤 기반 인터랙티브 장면 데모
TL;DR
Kage는 단일 index.html에서 Three.js r149을 사용해 스크롤 연동 카메라와 런타임으로 생성되는 절차적 요소를 조합한 인터랙티브 웹 데모입니다. 빌드 단계나 외부 런타임 의존성이 없고 로컬에서 python3 -m http.server로 바로 실행할 수 있어 포크 후 즉시 실험하거나 학습 자료로 활용하기에 적합합니다. 장면 플레이트는 GPT Image 2로 생성된 자산을 포함하므로 시각 요소의 재사용이나 상업적 이용을 고려할 때 생성물의 출처와 저작권 표기를 확인해야 합니다.
핵심 포인트
- 레포는 단일 정적 HTML 데모로, Three.js r149을 번들한 한 파일(index.html)에서 장면 구축, 스크롤 연출, 상호작용 로직을 모두 처리하는 standalone demo 성격입니다. 파일 구조와 README에 따르면 패키지 매니저나 빌드 단계가 없고 Python 로컬 서버(포트 4173 예시)로 바로 서빙할 수 있으므로 포크해 즉시 실행하거나 브라우저 기반으로 분석하기가 매우 수월합니다. 이런 단순성 때문에 프로젝트를 학습용 레퍼런스나 빠른 프로토타입으로 쓰기 적합합니다.
- 시각·상호작용 구현은 라이브 WebGL 카메라를 스크롤에 연동해 산사 내부를 이동시키고, 절차적 건축물, 랜턴 라이트, 안개, 비, 흩날리는 잎, 주련(vermillion) 달, 제한된 bloom 파이프라인을 조합하는 방식으로 구성되어 있습니다. 3D 씬은 런타임에 생성되고, 최적화된 WebP 장면 플레이트와 알파 보존 전경 요소를 HTML 레이어로 겹쳐 카메라 경로와 조명을 라이브로 유지하면서 콜라주 같은 깊이를 만들고 있습니다. 이러한 아키텍처는 Three.js 기반의 포스트프로세싱, 레이어 합성 패턴, 스크롤 기반 카메라 키프레임을 실습하거나 재사용하기에 유용합니다.
- 리믹스와 확장은 진입 장벽이 낮도록 설계되어 있습니다. README와 PROMPT.md에 따르면 장면 구조와 모션 언어, 품질 제약을 적은 구현 브리프가 포함되어 있어 동일한 연출을 재현하거나 요소만 교체해 재해석할 수 있습니다. 또한 외부 런타임 네트워크 의존성이 없고 assets/와 secret-pathways-assets/에 리소스가 정리되어 있어 에셋 교체·테마 치환이 편리합니다.
- 저작·출처 관련 메모는 주의 포인트입니다. README는 장면 플레이트와 전경 아트워크가 GPT Image 2로 생성되고 이후 아트 디렉션과 합성이 이루어졌음을 명시하고, 번들된 three.min.js(r149)가 MIT 저작권 고지를 유지한다고 언급합니다. 따라서 작품의 시각 요소를 상업적 용도로 사용할 때 생성 이미지의 출처와 라이선스 조건을 확인해야 하며, 문화적 영감 출처가 명확히 독립 연구임을 유의해야 합니다.
이미지 분석

769
Stars
135
Forks
+210
Trending
0
조회수
769 watchers0 open issues
관련 토론
아직 관련 토론이 없습니다.
댓글
댓글을 작성하려면 로그인이 필요합니다.