Diorama — скилл
Скилл строит вращаемые Three.js-диорамы в трех стилях и перед началом спрашивает про стиль и источник моделей.
- 418 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент скачивает репозиторий и внешние модели, запускает QA-скрипты и пишет файлы сцены.
- Лицензии скачанных моделей придется подтверждать самостоятельно.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/dioramaОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент скачивает репозиторий и внешние модели, запускает QA-скрипты и пишет файлы сцены.
- Лицензии скачанных моделей придется подтверждать самостоятельно.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Diorama — справочник и набор кода для небольших сцен на Three.js: плоская вырезная композиция на белом фоне, камера в три четверти со свободным вращением, палитра из 64 цветов с дизерингом и обводкой, фигурки с настоящей анимацией суставов. Сцена целиком зависит от времени `t`, поэтому любой кадр можно заморозить и сравнить. Перед первой сеткой агент задает два вопроса. Первый: стиль, на выбор `pixel` по умолчанию, `stroked-toon` или `pixel-stroke`. Второй: откуда берутся модели, из библиотек с проверкой лицензии, смешанно (по умолчанию) или полностью авторские. Дальше идет исследование темы, сборка по конвейеру и проверка кадров скриптами QA.
Для кого. Креативным разработчикам и дизайнерам, которые делают игровые и обучающие сцены на Three.js с помощью Claude Code, Codex или Cursor.
Подходит, если
- Нужна диорама бассейна, ночного рынка или арены в пиксельном стиле с вращением камеры.
- Сцену надо собрать из лицензированных моделей с записью источников в `SOURCES.md` и `CREDITS.md`.
- Объясняющая сцена о том, как устроен механизм, требует отдельной обучающей панели.
- Кадры анимации должны проходить проверку скриптами, а не на глаз.
Не подходит, если
- Нужна полноценная 3D-игра с физикой и уровнями.
- Проект не использует Three.js.
- Подойдут готовые модели без ограничений на лицензию, а их проверка не нужна.
Пример запроса к агенту
Построй диораму ночного рынка в стиле stroked-toon, модели возьми гибридно и сохрани источники в `SOURCES.md`.Ограничения
Сцены строятся на Three.js, в README указана версия r170. Лицензии внешних моделей должны допускать коммерческое использование и распространение, источники записывают в `refs/SOURCES.md`. Объем справочников большой, поэтому перед работой агент читает `SKILL.md` и индекс целиком, что занимает много времени и токенов. Стиль без ответа не выбирается: вопрос остается открытым. Из-за размера руководства небольшие правки сцены лучше вести по профильному файлу из `references/`. Видео-примеры в репозитории показывают результат, но не заменяют проверки скриптами.
Как отключить. Удалите папку скилла `diorama` из каталога скиллов или рабочей папки. Созданные сцены остаются отдельными файлами проекта.
Частые вопросы
Какие стили поддерживает Diorama?
Три: классический `pixel`, `stroked-toon` и `pixel-stroke`. Ответ «как в старых играх» или молчание дают `pixel`, а вращение камеры работает во всех стилях.
Откуда берутся модели?
Три режима: `internet-full`, `hybrid` (по умолчанию) и `authored-only`. В первых двух нужны лицензии для коммерческого использования с записью в `refs/SOURCES.md`.
Добавляет ли скилл обучающую панель?
Только для сцен-объяснений. Обычная диорама остается чистой: без панели Explore, шагов урока и плавающих подписей.
Как обновить установленный Diorama?
В README есть приглашение для обновления: агент сохраняет локальный патч, подтягивает новую ветку `main` и сообщает, что изменилось, до работы над проектом.
Что такое детерминированная сцена?
Сцена зависит только от времени `t`, поэтому любой кадр можно заморозить, снять скриншот и сравнить. Скриншот служит доказательством, а не случайным кадром.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыДесять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка
Восемь скиллов для 3D и анимированных сайтов: сцены three.js из кода, скролл-фильмы, прозрачное видео, разбор машин на детали
Three.js Architecture Effects
threejs-architecture-effects
Скилл собирает на Three.js облетаемое здание, которое строится само: кирпич, каркас, процедурные материалы. Результат — рабочий сайт на Vite и React
Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы
Скилл собирает компоненты Framer на Three.js, WebGL и GSAP: 3D, шейдеры и анимация по прокрутке в одном TSX-файле.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Diorama (эта карточка) | нет | 418 | |
| Three.js Skills | нет | 4 168 | дает справочник по API и приемам Three.js; Diorama ведет сборку готовой сцены со стилем, источниками моделей и QA |
| Pixel Art Studio | нет | 113 | рисует пиксельную графику; Diorama собирает трехмерную сцену в пиксельном стиле с вращением камеры |
Коротко о README
Репозиторий содержит `SKILL.md` с полным руководством, папку `references/` с тематическими файлами, шаблоны, QA-скрипты и разобранные примеры. Установка идет приглашением агенту, которое скачивает репозиторий целиком и читает его перед работой.
Бейдж для README
Исходный SKILL.md
--- name: diorama description: "Full long-form guide for detailed rotatable Three.js dioramas. Narrative scenes are scene-first with no educational UI unless requested. Classic pixel, stroked-toon and pixel+stroke are rendering choices, not educational modes. Explanatory commissions use the separate educational contract. Includes composition, cast, animation, craft, sourcing and construction." version: 5.7.0 author: Nehal Kanak (sloemo) license: MIT platforms: [linux, macos, windows] --- # Diorama ## Current intake contract (5.7.0 — authoritative) For a new commission, ask **look first, model sourcing second**, using the two gates below. These gates override older three-preset lists, automatic internet-first instructions and one-prompt assumptions elsewhere in this long guide and its references. Do not ask setup questions when merely editing the skill. Explicit answers in the brief skip the corresponding question; existing-project repairs retain recorded choices. An unanswered question is pending, not consent. Rendering and sourcing are independent of narrative/educational purpose. Three looks are available: `pixel` (Classic Pixel Art; recommended), `stroked-toon`, `pixel-stroke`. Generic “pixel art”, “classic”, “old pixel style” and explicit delegation (“you choose”) resolve to `pixel`. All looks preserve free orbit. An unanswered style gate waits. Three sourcing modes are available: `internet-full`, `hybrid` (recommended), `authored-only`. Generic “use internet models” resolves to `hybrid` unless the user requests downloaded models throughout. Older `internet-first` records map to `hybrid` on repairs. Sourcing requirements below apply only to modes that acquire external assets; authored-only skips model acquisition, not subject research, quality or geometry/contact checks.