본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

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 저작권 고지를 유지한다고 언급합니다. 따라서 작품의 시각 요소를 상업적 용도로 사용할 때 생성 이미지의 출처와 라이선스 조건을 확인해야 하며, 문화적 영감 출처가 명확히 독립 연구임을 유의해야 합니다.

이미지 분석

교토 산사 야간 풍경을 웹 페이지 프리뷰로 보여주는 장면 정지 이미지로, 전경의 텍스트 오버레이와 토리이(鳥居), 붉은 달, 흩날리는 단풍이 합성된 미리보기입니다.
이미지는 README에서 설명한 라이브 3D 씬에 HTML 레이어로 합성된 장면 플레이트와 foreground 컷아웃의 사용 방식을 시각적으로 확인시켜 줍니다. 장면 구성은 전경의 그래픽 요소와 배경의 3D 조명·안개 효과가 겹쳐져 콜라주처럼 보이는 구조를 보여주므로 소스 코드가 아닌 시각적 결과물을 빠르게 검토하려는 경우 유용합니다. 파일이 WebP 포맷임을 통해 프로젝트가 성능과 용량 최적화를 염두에 두고 에셋을 준비했음을 알 수 있습니다.

769

Stars

135

Forks

+210

Trending

0

조회수

769 watchers0 open issues

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.