Repolode
JDhruv14

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. 1

    Claude Code의 skills 폴더에 스킬을 클론합니다

    git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama
  2. 2

    scene 폴더에 Three.js와 esbuild 종속성을 설치합니다

    npm i three esbuild
  3. 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. 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 통계는 매일 갱신됩니다.

관련 프로젝트