JDhruv14/ascii-diorama

これは何？

主な機能

• 01サーフェスの種類に応じて選んだ色付きASCIIグリフで3Dシーンを描画します。
• 02リロード時にシーンを再ビルドするライブプレビューサーバーを提供します。
• 03地形、水のシェーダー、草、花、小物を含むスターターシーンを同梱しています。
• 04画面の上端と下端にチルトシフトぼかしをかけます。
• 05付属のスクリプトでテクスチャとモデルをダウンロードできます。

ユースケース

• Claude Codeを使って、アニメーションするASCII風の3Dミニチュアを制作する。
• 港、村、灯台など、独自のジオラマを試作する。
• ループするASCIIアートのシーンを静的なWebページとしてエクスポートする。

クイックスタート

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アートのシーンを静的なWebページとしてエクスポートする。

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