Agent Skill, с помощью которого Codex, Claude Code или Cursor создаёт вращаемую сцену здания на Three.js, собирающегося кирпич за кирпичом.
sloemo01/diorama
Плейбук и набор готового кода на Three.js для небольших диорам в пиксель-арт стиле с фиксированной камерой, ограниченной палитрой, дизерингом и детерминированной проверкой кадров.
- Звёзды
- 339
- Форки
- 22
- Открытые issues
- 0
- Последний коммит
- 7 дней назад
Что это?
Diorama — это плейбук и набор кода, который можно скопировать в проект, чтобы создавать небольшие постановочные сцены в пиксель-арт стиле на Three.js. Диорама здесь — миниатюрная сцена на подставке, снятая фиксированной камерой в ракурсе три четверти: с палитрой из 64 цветов, упорядоченным дизерингом, контурной обводкой и анимированными фигурками игрушечного масштаба. В центре репозитория — SKILL.md, единый автономный файл с описанием рабочего процесса, который начинается с исследования, визуальных и анимационных стандартов, пайплайна и процесса QA.
Сцена — чистая функция времени, поэтому любой кадр можно зафиксировать, сохранить и сравнить. В шаблонах есть модули для палитры, постобработки, камеры, освещения, геометрии, ригов, движения транспорта, путей, боевых сцен, воды и эффектов, а также лист DESIGN.md и журналы исходных материалов и лицензий для импортированных ассетов.
В папке verify/ находятся готовые примеры, а в templates/qa/ — восемь скриптов на базе Playwright для проверки зафиксированных кадров, полос движения и серий кадров для отдельных сущностей. Для скриптов QA нужны Node, three, esbuild и playwright-core.
Ключевые возможности
- 01Фиксированная камера в ракурсе три четверти, подогнанная под границы сцены; без управления вращением.
- 02Ограничение палитры до 64 цветов, упорядоченный дизеринг и контурная обводка в фиксированном проходе постобработки.
- 03Детерминированные сцены, в которых можно зафиксировать и сравнить любой кадр.
- 04Готовые к копированию модули для камеры, освещения, ригов, транспорта, воды, боевых сцен и эффектов.
- 05Скрипты QA на базе Playwright для проверки зафиксированных кадров, полос движения и результатов проверки кадров для отдельных сущностей.
Сценарии использования
- Создание небольших анимированных диорам в пиксель-арт стиле или игровых сцен на Three.js.
- Подготовка детерминированных рендеров для сравнения кадров при регрессионном тестировании.
- Использование AI-агента для написания кода по структурированному процессу создания 3D-сцен — от исследования до сборки.
Быстрый старт
- 1
Клонируйте репозиторий
git clone https://github.com/sloemo01/diorama.git "<target>" - 2
Перед сборкой прочитайте SKILL.md — полное руководство
- 3
Скопируйте нужные модули из templates/ в свой проект
Что важно знать
- Для QA-скриптов нужен Node с установленными three, esbuild и playwright-core.
- Процесс установки рассчитан на ИИ-агента, который может выполнять команды оболочки.
Темы
Частые вопросы
- Что такое diorama?
- Плейбук и набор готового кода на Three.js для небольших диорам в пиксель-арт стиле с фиксированной камерой, ограниченной палитрой, дизерингом и детерминированной проверкой кадров. Diorama — это плейбук и набор кода, который можно скопировать в проект, чтобы создавать небольшие постановочные сцены в пиксель-арт стиле на Three.js. Диорама здесь — миниатюрная сцена на подставке, снятая фиксированной камерой в ракурсе три четверти: с палитрой из 64 цветов, упорядоченным дизерингом, контурной обводкой и анимированными фигурками игрушечного масштаба. В центре репозитория — SKILL.md, единый автономный файл с описанием рабочего процесса, который начинается с исследования, визуальных и анимационных стандартов, пайплайна и процесса QA.
- diorama можно использовать бесплатно? Какая у него лицензия?
- diorama распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- diorama всё ещё поддерживается?
- Активно поддерживается. Последний коммит в diorama — 30 окт. 2026 г..
- Для чего можно использовать diorama?
- Создание небольших анимированных диорам в пиксель-арт стиле или игровых сцен на Three.js. Подготовка детерминированных рендеров для сравнения кадров при регрессионном тестировании. Использование AI-агента для написания кода по структурированному процессу создания 3D-сцен — от исследования до сборки.
- Как установить diorama?
- Клонируйте репозиторий: git clone https://github.com/sloemo01/diorama.git "<target>" Перед сборкой прочитайте SKILL.md — полное руководство Скопируйте нужные модули из templates/ в свой проект
- Где скачать diorama?
- Исходный код и инструкции по установке — на GitHub: https://github.com/sloemo01/diorama
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Браузерное 3D-путешествие на лодке по долине японской реки: сцена на three.js рендерится в реальном времени в любое время суток и во все четыре сезона.
Интерактивный 3D-справочник по 63 видам насекомых: модели создаются процедурно в браузере с помощью TypeScript и Three.js, без файлов моделей.
Браузерная студия превизуализации для расстановки объектов в сцене, позирования персонажей и монтажа движений камеры с последующей передачей кадров AI-моделям для генерации видео.
Навык Claude Code помогает ИИ-агенту создавать миниатюрные 3D-сцены с tilt-shift-эффектом, отрисованные цветными ASCII-символами с помощью Three.js.
Открытый каталог интерактивных UI-компонентов на Three.js/WebGL без входа в систему, с интерактивными превью и полным исходным кодом на React.