Three.js Animationpar CloudAI-X

Three.js Animation Skill.

Donnez à un modèle de personnage ou de produit chargé une stratégie définie de lecture et de mélange.

3D
Three.js

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · Three.js AnimationSKILL.md

Tâche 3D Produit • Un inventaire vérifié des clips et un plan de lecture • Une logique de mixer et d’actions pour les transitions • Un mouvement procédural ou par morph targets lié au temps de la scène Avant de commencer Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et loaders supplémentaires dépendent de la voie choisie.

Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Three.js Animation : mélanger clips et mouvement procédural

Animation par clips, mixers, actions, squelettes et morph targets, avec des modèles de mélange et de mouvement procédural.

Workflow fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Three.js Animation se concentre sur le mouvement dans une scène : mouvement procédural, pistes de keyframes, poses squelettiques et morph targets. Il distingue le clip d’animation stocké, le mixer qui le fait avancer et l’action qui contrôle sa lecture.

Le mélange est un cas d’usage central. Des actions pondérées et des fondus enchaînés assurent une transition maîtrisée entre des états comme l’immobilité et la marche. Ces modèles d’implémentation exigent une vraie inspection du modèle ; un skill ne peut pas garantir qu’un asset importé contienne le rig, la cible ou le clip attendus.

Livrables attendus

Un inventaire vérifié des clips et un plan de lecture
Une logique de mixer et d’actions pour les transitions
Un mouvement procédural ou par morph targets lié au temps de la scène

Voir le brief d’exemple

Du brief à la revue

01
Inspecter le modèle
Listez les noms de clips, les os et les morph targets avant de choisir une voie de mouvement.
02
Définir les règles de lecture
Définissez la vitesse, la boucle, les poids des actions et si un clip terminé doit conserver sa dernière pose.
03
Mélanger et vérifier
Faites avancer le mixer avec le delta de la frame en secondes, et non le temps total écoulé, puis examinez les transitions pour détecter les sauts et les mises à jour actives inutiles.

02 Cas d’usage

Quand l’utiliser

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et loaders supplémentaires dépendent de la voie choisie.

Un bon choix

Assets GLTF animésUtilisez-le lorsqu’un modèle existant contient des clips dont la sélection et la lecture doivent être contrôlées.
Mouvement en couchesCombinez un mouvement de base avec une action additive ou un ajustement procédural distinct.

Limites à vérifier

Pas de création de rigLes exemples squelettiques s’appliquent à des skinned meshes existants ; ils ne créent pas un rig de personnage manquant.
Les pistes typées doivent être vérifiéesAdaptez les pistes et chemins de cible des exemples au type réel de propriété et à la version installée.

Apportez ces éléments

Données du modèleFournissez l’asset ainsi que les clips ou morph targets connus.
Changements d’étatExpliquez quelles actions de l’utilisateur font passer d’un état de mouvement à un autre.
Contraintes de lectureDéfinissez les attentes en matière d’interruption, de boucle et de vitesse.

03 Décisions importantes

Les décisions qui comptent

Trois rôles distincts
La séparation entre clip, mixer et action aide à comprendre pourquoi des données de mouvement valides peuvent ne pas se lire visiblement.
Transitions pensées
Les fondus enchaînés et les poids donnent aux changements d’état un passage visuel réfléchi.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez le répertoire threejs-skills pertinent comme guide pour l’agent. Ce n’est pas le runtime Three.js et il n’installe pas d’assets de scène.

Fichier source amont

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

Un projet Three.js fonctionnel et un renderer ; vérifiez les exemples de la source par rapport à la version installée. Les contrôles et loaders supplémentaires dépendent de la voie choisie.

Commencer par un seul livrable

Adaptez la portée, le matériel source et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple

Utilise threejs-animation pour inspecter les clips de mon GLB fourni et implémenter une transition de l’immobilité à la marche. Ne suppose pas les noms de clips. Explique la mise à jour du mixer et les réglages de boucle, puis teste le retour à l’immobilité sans saut de pose.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Les noms de clips sont vérifiés avant utilisation.
Le mixer avance et les transitions restent continues.
Les animations inactives ne conservent pas de mises à jour inutiles.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec le produit, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: CloudAI-X
Dépôt: CloudAI-X/threejs-skills
Fichier du skill: skills/threejs-animation/SKILL.md
Licence: Non confirmée — consultez les conditions en amont avant toute réutilisation.
Instantané examiné: 2026-10-07 · b1c623076c66

Résumé éditorial de la source

Animation par clips, mixers, actions, squelettes et morph targets, avec des modèles de mélange et de mouvement procédural.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Crée-t-il un squelette ?

Non. La source s’appuie sur un skinned mesh existant et ses os.

Peut-il animer sans clips importés ?

Oui. Il inclut du mouvement procédural et des pistes de keyframes créées manuellement.

Que contrôle une action ?

La lecture, la vitesse, la boucle, le poids et le mélange d’un clip via son mixer.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design