Three.js Animationdi CloudAI-X

Three.js Animation Skill.

Definisci una strategia di riproduzione e blending per un modello di personaggio o prodotto già caricato.

3D
Three.js

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Three.js AnimationSKILL.md

Attività 3D Produce • Un inventario delle clip verificato e un piano di riproduzione • Logica di mixer e action per le transizioni • Movimento procedurale o con morph target legato al tempo della scena Prima di iniziare Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Three.js Animation: clip in blending e movimento procedurale

Animazione con clip, mixer, action, scheletro e morph, con pattern di blending e di movimento procedurale.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Come si lavora

Three.js Animation si concentra sul movimento all'interno di una scena: movimento procedurale, keyframe track, pose scheletriche e morph target. Separa la clip di animazione memorizzata dal mixer che la fa avanzare e dall'action che ne controlla la riproduzione.

Il blending è un caso d'uso centrale. Action pesate e crossfade offrono una transizione controllata tra stati come fermo e camminata. Questi pattern di implementazione richiedono un'ispezione reale del modello: una skill non può garantire che un asset importato contenga il rig, il target o la clip previsti.

Risultati attesi

Un inventario delle clip verificato e un piano di riproduzione
Logica di mixer e action per le transizioni
Movimento procedurale o con morph target legato al tempo della scena

Vedi il brief di esempio

Dal brief alla revisione

01
Ispeziona il modello
Elenca nomi delle clip, ossa e morph target prima di scegliere il percorso di movimento.
02
Imposta le regole di riproduzione
Definisci velocità, loop, pesi delle action e se una clip terminata debba mantenere l'ultima posa.
03
Esegui il blending e verifica
Fai avanzare il mixer con il delta del frame in secondi, non con il tempo totale trascorso, poi controlla che le transizioni non abbiano salti e che non restino aggiornamenti attivi inutili.

02 Quando usarlo

Quando usarla

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Adatta quando

Asset GLTF animatiUsala quando un modello esistente contiene clip di cui servono selezione e controllo della riproduzione.
Movimento a livelliCombina un movimento di base con un'action additiva o con una regolazione procedurale separata.

Limiti da verificare

Nessuna creazione di rigGli esempi sullo scheletro operano su skinned mesh esistenti; non creano il rig di un personaggio mancante.
I track tipizzati vanno verificatiAdatta i track di esempio e i percorsi dei target al tipo effettivo di proprietà e alla versione installata.

Cosa portare

Dati del modelloFornisci l'asset e le clip o i morph target noti.
Cambi di statoSpiega quali azioni dell'utente fanno passare da uno stato di movimento all'altro.
Vincoli di riproduzioneIndica le aspettative su interruzioni, loop e velocità.

03 Decisioni importanti

Decisioni che contano

Tre ruoli distinti
Separare clip, mixer e action aiuta a capire perché dati di movimento validi possono non essere visibili in riproduzione.
Transizioni progettate
Crossfade e pesi danno ai cambi di stato un passaggio visivo curato.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Verifica la configurazione

Usa la directory threejs-skills pertinente come guida per l'agente. Non è il runtime di Three.js e non installa asset di scena.

File sorgente upstream

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

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa threejs-animation per ispezionare le clip nel mio GLB fornito e implementare una transizione da fermo a camminata. Non dare per scontati i nomi delle clip. Spiega l'aggiornamento del mixer e le impostazioni di loop, poi testa il ritorno allo stato di fermo senza salti di posa.

Controlla il risultato

Verifica l'output reale in base a questi criteri osservabili.

I nomi delle clip vengono verificati prima dell'uso.
Il mixer avanza e le transizioni restano continue.
Le animazioni inattive non mantengono aggiornamenti inutili.

OpenDesign offre uno spazio di lavoro di design locale per agenti di coding. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte: CloudAI-X
Repository: CloudAI-X/threejs-skills
File della skill: skills/threejs-animation/SKILL.md
Licenza: Non confermata: controlla i termini upstream prima del riutilizzo.
Snapshot esaminato: 2026-10-07 · b1c623076c66

Sintesi editoriale della fonte

Animazione con clip, mixer, action, scheletro e morph, con pattern di blending e di movimento procedurale.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le star del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Crea uno scheletro?

No. La fonte opera su una skinned mesh esistente e sulle sue ossa.

Può animare senza clip importate?

Sì. Include movimento procedurale e keyframe track definiti manualmente.

Cosa controlla una action?

Riproduzione, velocità, loop, peso e blending di una clip tramite il suo mixer.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni insieme brief, materiale di partenza e lavoro di design in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design