Three.js Animationавтор CloudAI-X

Three.js Animation Skill.

Задайте для загруженной модели персонажа или продукта чёткую стратегию воспроизведения и смешивания анимаций.

3D
Three.js

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Three.js AnimationSKILL.md

Задача 3D Результат • Проверенный список клипов и план воспроизведения • Логика миксера и действий для переходов • Процедурное движение или движение на морф-таргетах, привязанное ко времени сцены Перед началом Рабочий проект Three.js и рендерер; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

Редакторское резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

01 Возможности

Three.js Animation: смешивание клипов и процедурное движение

Клипы, миксер, действия, скелетная и морфологическая анимация (morph), а также шаблоны смешивания и процедурного движения.

Рабочий процесс на основе источникаНе тест производительности выполнения

Принцип работы

Three.js Animation сосредоточен на движении внутри сцены: процедурном движении, треках ключевых кадров, позах скелета и морф-таргетах. Он разделяет сохранённый анимационный клип, миксер, который его продвигает, и действие, которое управляет воспроизведением.

Смешивание — один из главных сценариев. Взвешенные действия и плавные переходы (crossfade) обеспечивают управляемую смену состояний, например между покоем и ходьбой. Эти шаблоны реализации требуют реальной проверки модели: навык не может гарантировать, что импортированный ассет содержит ожидаемые риг, таргет или клип.

Ожидаемые результаты

Проверенный список клипов и план воспроизведения
Логика миксера и действий для переходов
Процедурное движение или движение на морф-таргетах, привязанное ко времени сцены

Смотреть пример задания

От задания до проверки

01
Изучите модель
Перед выбором способа анимации перечислите названия клипов, кости и морф-таргеты.
02
Задайте правила воспроизведения
Определите скорость, зацикливание, веса действий и то, должен ли завершённый клип удерживать последнюю позу.
03
Смешайте и проверьте
Продвигайте миксер на дельту кадра в секундах, а не на общее прошедшее время, затем проверьте переходы на рывки и лишние обновления активных анимаций.

02 Когда использовать

Когда использовать

Рабочий проект Three.js и рендерер; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

Хорошо подходит

Анимированные ассеты GLTFИспользуйте, когда в готовой модели есть клипы, которые нужно выбирать и контролировать при воспроизведении.
Многослойное движениеСовмещайте базовое движение с аддитивным действием или отдельной процедурной корректировкой.

Ограничения, которые нужно учесть

Риг не создаётсяПримеры со скелетом работают с уже существующими skinned mesh; отсутствующий риг персонажа они не создают.
Типизированные треки нужно проверятьАдаптируйте примеры треков и пути к целевым свойствам под реальный тип свойства и установленную версию.

Что подготовить

Данные моделиПредоставьте ассет и известные клипы или морф-таргеты.
Смена состоянийОбъясните, какие действия пользователя переключают состояния движения.
Ограничения воспроизведенияЗадайте ожидания по прерыванию, зацикливанию и скорости.

03 Важные решения

Важные решения

Три отдельные роли
Разделение на клип, миксер и действие помогает понять, почему корректные данные движения могут не воспроизводиться визуально.
Продуманные переходы
Плавные переходы и веса делают смену состояний визуально обдуманной.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте нужный каталог threejs-skills как руководство для агента. Это не среда выполнения Three.js, и он не устанавливает ассеты сцены.

Исходный файл в репозитории

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используй threejs-animation, чтобы изучить клипы в моём GLB и реализовать переход из покоя в ходьбу. Не предполагай названия клипов. Объясни обновление миксера и настройки зацикливания, затем проверь возврат в покой без скачка позы.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Названия клипов проверены до использования.
Миксер продвигается, переходы остаются непрерывными.
Неактивные анимации не сохраняют лишних обновлений.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Эта запись не означает, что навык поставляется в комплекте или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника по ссылке ниже. Поведение и требования upstream могут измениться.

Владелец источника: CloudAI-X
Репозиторий: CloudAI-X/threejs-skills
Файл навыка: skills/threejs-animation/SKILL.md
Лицензия: Не подтверждена — перед повторным использованием изучите условия upstream.
Просмотренная версия: 2026-10-07 · b1c623076c66

Редакторское резюме источника

Клипы, миксер, действия, скелетная и морфологическая анимация (morph), а также шаблоны смешивания и процедурного движения.

Авторское резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Создаёт ли он скелет?

Нет. Источник работает с существующим skinned mesh и его костями.

Можно ли анимировать без импортированных клипов?

Да. Он включает процедурное движение и авторские треки ключевых кадров.

Чем управляет действие?

Воспроизведением, скоростью, зацикливанием, весом и смешиванием клипа через его миксер.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Просмотреть навыки дизайна