프레임과 음악을 모두 코드로 생성해 영상을 만드는 Claude Code 스킬 모음으로, 시각 스타일마다 스킬 하나를 제공합니다.
JDhruv14/ascii-diorama
Three.js로 렌더링한 컬러 ASCII 문자로 틸트 시프트 미니어처 3D 장면을 만들도록 AI 에이전트를 안내하는 Claude Code 스킬입니다.
- 스타
- 92
- 포크
- 3
- 열린 이슈
- 0
- 마지막 커밋
- 5일 전
어떤 프로젝트인가요?
ascii-diorama는 틸트 시프트 ASCII 미니어처를 만드는 Claude Code 스킬입니다. 작은 3D 장면 전체를 컬러 모노스페이스 문자로 그려냅니다. 카메라는 Three.js 디오라마를 높은 각도에서 내려다보며 좌우로 오가고, 화면 위아래에 블러를 적용해 모형 같은 느낌을 줍니다. 풀, 물, 돌, 나무는 각각 전용 글리프 세트로 그리며, 각 글리프의 색은 3D 렌더 결과에서 가져옵니다.
저장소에는 스킬 지침, 새로고침 시 장면을 다시 빌드하는 라이브 미리보기 서버, 에셋 다운로드 스크립트, 지형과 바다 셰이더, 인스턴싱된 풀과 꽃, 소품, 걷는 여우, 흩날리는 꽃잎이 포함된 시작 장면이 들어 있습니다. 시작 장면은 새 장면에 필요한 주요 시스템을 갖추고 있으며, 장면 콘텐츠를 항구나 언덕 마을 같은 다른 설정으로 바꿀 수 있습니다.
WebGL 2와 Node.js 18 이상이 설치된 브라우저에서 실시간으로 실행되며, 결과물을 정적 페이지로 내보낼 수도 있습니다.
핵심 기능
- 01표면 유형별로 선택한 컬러 ASCII 글리프로 3D 장면을 렌더링합니다.
- 02새로고침할 때 장면을 다시 빌드하는 라이브 미리보기 서버를 제공합니다.
- 03지형, 물 셰이더, 풀, 꽃, 소품이 포함된 시작 장면을 제공합니다.
- 04화면 위아래에 틸트 시프트 블러를 적용합니다.
- 05제공된 스크립트로 텍스처와 모델을 다운로드합니다.
활용 사례
- Claude Code로 애니메이션 ASCII 스타일의 3D 미니어처를 제작합니다.
- 항구, 마을, 등대 같은 맞춤형 디오라마를 프로토타이핑합니다.
- 반복 재생되는 ASCII 아트 장면을 정적 웹 페이지로 내보냅니다.
빠른 시작
- 1
Claude Code의 skills 폴더에 스킬을 클론합니다
git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama - 2
scene 폴더에 Three.js와 esbuild 종속성을 설치합니다
npm i three esbuild - 3
시작 씬을 새 폴더에 복사하고 에셋을 가져옵니다
mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene - 4
라이브 미리보기를 시작하고 http://127.0.0.1:5173/ 을 엽니다
node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene
사용 전 알아둘 점
- WebGL 2를 지원하는 브라우저와 Node.js 18 이상이 필요합니다.
- 에셋 다운로드에는 여우가 표시될 때 출처를 표시해야 하는 CC BY 4.0 항목이 포함되어 있습니다.
포함된 컬렉션
토픽
자주 묻는 질문
- ascii-diorama은(는) 무엇인가요?
- Three.js로 렌더링한 컬러 ASCII 문자로 틸트 시프트 미니어처 3D 장면을 만들도록 AI 에이전트를 안내하는 Claude Code 스킬입니다. ascii-diorama는 틸트 시프트 ASCII 미니어처를 만드는 Claude Code 스킬입니다. 작은 3D 장면 전체를 컬러 모노스페이스 문자로 그려냅니다. 카메라는 Three.js 디오라마를 높은 각도에서 내려다보며 좌우로 오가고, 화면 위아래에 블러를 적용해 모형 같은 느낌을 줍니다. 풀, 물, 돌, 나무는 각각 전용 글리프 세트로 그리며, 각 글리프의 색은 3D 렌더 결과에서 가져옵니다.
- ascii-diorama은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- ascii-diorama은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- ascii-diorama은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. ascii-diorama의 마지막 커밋은 2026년 11월 2일입니다.
- ascii-diorama은(는) 어디에 사용할 수 있나요?
- Claude Code로 애니메이션 ASCII 스타일의 3D 미니어처를 제작합니다. 항구, 마을, 등대 같은 맞춤형 디오라마를 프로토타이핑합니다. 반복 재생되는 ASCII 아트 장면을 정적 웹 페이지로 내보냅니다.
- ascii-diorama는 어떻게 설치하나요?
- Claude Code의 skills 폴더에 스킬을 클론합니다: git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama scene 폴더에 Three.js와 esbuild 종속성을 설치합니다: npm i three esbuild 시작 씬을 새 폴더에 복사하고 에셋을 가져옵니다: mkdir -p my-scene && cp ~/.claude/skills/ascii-diorama/templates/scene/* my-scene/ && bash ~/.claude/skills/ascii-diorama/scripts/fetch-assets.sh my-scene 라이브 미리보기를 시작하고 http://127.0.0.1:5173/ 을 엽니다: node ~/.claude/skills/ascii-diorama/scripts/serve.mjs my-scene
- ascii-diorama은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/JDhruv14/ascii-diorama
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
고정 카메라, 팔레트 스냅, 디더링, 결정론적 프레임 QA를 적용해 작은 픽셀 아트 디오라마를 만드는 플레이북이자 Three.js 코드 키트입니다.
참조 이미지 한 장에서 메시 파일이 아닌 애니메이션 가능한 절차적 Three.js TypeScript 코드를 생성합니다.
Claude Code에 Three.js, GSAP 등 웹 3D 및 애니메이션 도구를 가르치는 스킬과 플러그인 모음
기계에 대한 한 줄 설명을 단일 파일로 된 물리 기반 인터랙티브 3D 시뮬레이션과 짧은 영상으로 바꿔 주는 Claude Code 스킬입니다.
three.js를 활용해 코딩 에이전트가 3D 및 스크롤 기반 웹사이트를 만들고 애니메이션을 적용하며 검증하도록 돕는 에이전트 스킬 8종입니다.