JDhruv14/ascii-diorama

这是什么？

核心功能

• 01将 3D 场景渲染为按表面类型选择字符的彩色 ASCII 图像。
• 02提供实时预览服务，刷新页面即可重建场景。
• 03附带起始场景，包含地形、海水着色器、草地、花朵和道具。
• 04对画面上下区域应用移轴模糊效果。
• 05通过脚本下载所需的纹理和模型。

适用场景

• 借助 Claude Code 制作带动画效果的 ASCII 风格 3D 微缩场景。
• 快速原型化港口、村庄或灯塔等自定义场景。
• 将循环播放的 ASCII 艺术场景导出为静态网页。

快速上手

1. 1

   将技能克隆到 Claude Code 技能目录

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

   在场景文件夹中安装 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 是什么？

一个 Claude Code 技能，指导 AI 用 Three.js 制作由彩色 ASCII 字符渲染的移轴微缩 3D 场景。 ascii-diorama 是一个 Claude Code 技能，用于制作移轴效果的 ASCII 微缩场景：整个 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 技能目录: git clone https://github.com/JDhruv14/ascii-diorama ~/.claude/skills/ascii-diorama 在场景文件夹中安装 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