Codex, Claude Code, Cursor가 벽돌을 한 장씩 쌓아 올리는 Three.js 건축 장면을 만들도록 돕는 Agent Skill입니다.
billpwchan/sakura-fantasy
사계절과 하루 중 언제든 일본 계곡의 강을 따라가는 브라우저 기반 3D 보트 여정
- 스타
- 98
- 포크
- 6
- 열린 이슈
- 1
- 마지막 커밋
- 어제
어떤 프로젝트인가요?
Sakura Fantasy는 갈대 지붕을 얹은 배를 타고 일본 계곡을 따라 내려가는 실시간 인터랙티브 장면입니다. 벚꽃길, 주홍빛 북다리, 오층탑 아래 마을, 대나무 협곡, 도리이 터널과 호수를 지나갑니다. 식생은 실제 일본 식물을 포토그래메트리로 스캔해 만들었으며, 조명은 하루 동안 태양의 움직임을 따라 바뀝니다. 날씨는 맑음, 안개, 비, 폭풍, 눈의 다섯 가지 상태를 지원합니다.
여정을 따라갈수록 일본 음계에 맞춘 고토, 샤쿠하치, 쇼 연주를 사용해 음악이 생성됩니다. 사찰 종소리와 교토 정원의 현장 녹음도 위치, 계절, 시간대에 맞춰 배치됩니다. 코드베이스는 게임 엔진이나 프레임워크 없이 three.js를 사용하는 순수 JavaScript 약 10,000줄로 이루어져 있습니다. 방문자는 배의 방향을 조작하고 계절, 시간대, 날씨를 바꾸거나 카메라 모드를 전환하고 사진을 내보낼 수 있습니다. URL 매개변수를 사용하면 원하는 장면을 바로 열 수 있습니다.
프로젝트에는 정적 사이트를 출력하는 빌드 단계가 포함되어 있으며, 에셋도 저장소에 들어 있습니다.
핵심 기능
- 01포토그래메트리 기반 식물과 계절 변화가 적용된 절차적 계곡
- 02태양, 하늘, 안개와 다섯 가지 날씨 상태의 동적 표현
- 03실시간으로 렌더링되는 물 반사, 배가 지나간 자국, 거품과 꽃잎
- 04일본 악기와 위치별 현장 녹음을 활용하는 실시간 생성 음악
- 05키보드 조작, 여러 카메라 모드, PNG 사진 모드
- 06계절, 시간대, 날씨 또는 위치를 지정해 바로 이동할 수 있는 URL 매개변수
활용 사례
- three.js의 실시간 WebGL 렌더링 기법 학습
- 브라우저에서 절차적 월드 생성과 레벨 오브 디테일 스트리밍 살펴보기
- Web Audio API를 활용한 생성형 오디오의 참고 자료로 활용
- 독립형 경험으로 잔잔하고 인터랙티브한 3D 장면 감상
빠른 시작
- 1
저장소를 클론합니다
git clone https://github.com/billpwchan/sakura-fantasy.git - 2
프로젝트 폴더로 이동합니다
cd sakura-fantasy - 3
의존성을 설치합니다
npm install - 4
개발 서버를 시작하고 http://127.0.0.1:5190 을 엽니다
npm run dev
사용 전 알아둘 점
- 라이선스 필드에는 NOASSERTION이라고 표시되어 있습니다. README에 따르면 코드는 MIT 라이선스이며, 에셋의 라이선스는 CREDITS.md에 각각 명시되어 있으므로 재사용하기 전에 해당 조건을 확인하세요.
- 휴대폰과 태블릿에는 기능이 축소된 quick tier가 제공됩니다. README의 성능 수치는 고사양 Apple M4 Max에서 측정한 것입니다.
토픽
자주 묻는 질문
- sakura-fantasy은(는) 무엇인가요?
- 사계절과 하루 중 언제든 일본 계곡의 강을 따라가는 브라우저 기반 3D 보트 여정 Sakura Fantasy는 갈대 지붕을 얹은 배를 타고 일본 계곡을 따라 내려가는 실시간 인터랙티브 장면입니다. 벚꽃길, 주홍빛 북다리, 오층탑 아래 마을, 대나무 협곡, 도리이 터널과 호수를 지나갑니다. 식생은 실제 일본 식물을 포토그래메트리로 스캔해 만들었으며, 조명은 하루 동안 태양의 움직임을 따라 바뀝니다. 날씨는 맑음, 안개, 비, 폭풍, 눈의 다섯 가지 상태를 지원합니다.
- sakura-fantasy은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- sakura-fantasy은(는) Other 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- sakura-fantasy은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. sakura-fantasy의 마지막 커밋은 2026년 10월 19일입니다.
- sakura-fantasy은(는) 어디에 사용할 수 있나요?
- three.js의 실시간 WebGL 렌더링 기법 학습 브라우저에서 절차적 월드 생성과 레벨 오브 디테일 스트리밍 살펴보기 Web Audio API를 활용한 생성형 오디오의 참고 자료로 활용 독립형 경험으로 잔잔하고 인터랙티브한 3D 장면 감상
- sakura-fantasy는 어떻게 설치하나요?
- 저장소를 클론합니다: git clone https://github.com/billpwchan/sakura-fantasy.git 프로젝트 폴더로 이동합니다: cd sakura-fantasy 의존성을 설치합니다: npm install 개발 서버를 시작하고 http://127.0.0.1:5190 을 엽니다: npm run dev
- sakura-fantasy은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/billpwchan/sakura-fantasy
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
참조 이미지 한 장에서 메시 파일이 아닌 애니메이션 가능한 절차적 Three.js TypeScript 코드를 생성합니다.
브라우저에서 TypeScript와 Three.js로 63종의 곤충을 절차적으로 모델링한 인터랙티브 3D 도감으로, 모델 파일이 필요 없습니다.
react-three-fiber로 3D 씬을 만들 때 사용하는 바로 쓸 수 있는 React 헬퍼 컴포넌트와 훅 모음입니다.
로그인 없이 이용할 수 있는 Three.js/WebGL UI 컴포넌트 카탈로그로, 라이브 렌더러와 전체 React 소스를 제공합니다.
react-three-fiber 씬에서 JSX 컴포넌트로 후처리 효과를 선언적으로 적용할 수 있는 postprocessing 라이브러리용 React 래퍼입니다.