Zur Nutzungsanleitung springen
Three.js Animationvon CloudAI-X

Three.js Animation Skill.

Gib einem geladenen Charakter- oder Produktmodell eine definierte Strategie für Wiedergabe und Überblendung.

  • 3D
  • Three.js
Quellenprüfung · Three.js AnimationSKILL.md
Aufgabe 3D Ergebnis • Ein geprüftes Clip-Inventar und ein Wiedergabeplan • Mixer- und Action-Logik für Übergänge • Prozedurale oder Morph-Target-Bewegung, gekoppelt an die Szenenzeit Vor dem Start Ein funktionierendes Three.js-Projekt mit Renderer; Quellbeispiele sind gegen die installierte Version zu prüfen. Weitere Steuerungen und Loader hängen vom gewählten Weg ab.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Three.js Animation: Clips und prozedurale Bewegung überblenden

Clip-, Mixer-, Action-, Skelett- und Morph-Animation mit Mustern für Überblendung und prozedurale Bewegung.

Workflow auf Basis der QuelleKein Ausführungs-Benchmark

Die Arbeitsweise

Three.js Animation konzentriert sich auf Bewegung innerhalb einer Szene: prozedurale Bewegung, Keyframe-Tracks, Skelettposen und Morph Targets. Es trennt den gespeicherten Animationsclip vom Mixer, der ihn fortschreibt, und von der Action, die seine Wiedergabe steuert.

Überblendung ist ein zentraler Anwendungsfall. Gewichtete Actions und Crossfades sorgen für einen kontrollierten Übergang zwischen Zuständen wie Idle und Gehen. Diese Implementierungsmuster erfordern eine echte Prüfung des Modells; ein Skill kann nicht garantieren, dass ein importiertes Asset das erwartete Rig, Target oder den erwarteten Clip enthält.

Erwartete Ergebnisse

  • Ein geprüftes Clip-Inventar und ein Wiedergabeplan
  • Mixer- und Action-Logik für Übergänge
  • Prozedurale oder Morph-Target-Bewegung, gekoppelt an die Szenenzeit
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Modell untersuchen

    Clipnamen, Bones und Morph Targets auflisten, bevor ein Bewegungsweg gewählt wird.

  2. 02
    Wiedergaberegeln festlegen

    Geschwindigkeit, Looping, Action-Gewichte festlegen und bestimmen, ob ein beendeter Clip seine letzte Pose halten soll.

  3. 03
    Überblenden und prüfen

    Den Mixer mit dem Frame-Delta in Sekunden fortschreiben, nicht mit der gesamten verstrichenen Zeit, und Übergänge dann auf Sprünge und unnötige aktive Updates prüfen.

02 Einsatzbereiche

Wann man es einsetzt

Ein funktionierendes Three.js-Projekt mit Renderer; Quellbeispiele sind gegen die installierte Version zu prüfen. Weitere Steuerungen und Loader hängen vom gewählten Weg ab.

Gut geeignet

  • Animierte GLTF-AssetsEinsetzbar, wenn ein vorhandenes Modell Clips enthält, die ausgewählt und in der Wiedergabe gesteuert werden müssen.
  • Geschichtete BewegungEine Grundbewegung mit einer additiven Action oder einer separaten prozeduralen Anpassung kombinieren.

Grenzen, die zu prüfen sind

  • Keine Rig-ErstellungDie Skelettbeispiele arbeiten mit vorhandenen Skinned Meshes; sie erstellen kein fehlendes Charakter-Rig.
  • Typisierte Tracks müssen geprüft werdenBeispiel-Tracks und Zielpfade an den tatsächlichen Eigenschaftstyp und die installierte Version anpassen.

Diese Eingaben mitbringen

  • ModelldatenDas Asset sowie bekannte Clips oder Morph Targets bereitstellen.
  • ZustandswechselErklären, welche Nutzeraktionen zwischen Bewegungszuständen wechseln.
  • Wiedergabe-VorgabenErwartungen an Unterbrechung, Looping und Geschwindigkeit festlegen.

03 Wichtige Entscheidungen

Entscheidende Punkte

  1. Drei getrennte Rollen

    Die Trennung von Clip, Mixer und Action hilft zu erklären, warum gültige Bewegungsdaten möglicherweise nicht sichtbar abgespielt werden.

  2. Gestaltete Übergänge

    Crossfades und Gewichte geben Zustandswechseln eine durchdachte visuelle Übergabe.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Verwende das passende threejs-skills-Verzeichnis als Agenten-Anleitung. Es ist nicht die Three.js-Laufzeit und installiert keine Szenen-Assets.

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

Ein funktionierendes Three.js-Projekt mit Renderer; Quellbeispiele sind gegen die installierte Version zu prüfen. Weitere Steuerungen und Loader hängen vom gewählten Weg ab.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen dieses Briefings an, bevor du den Skill ausführst.

Beispiel-Briefing
Nutze threejs-animation, um die Clips in meiner bereitgestellten GLB-Datei zu untersuchen und einen Übergang von Idle zu Gehen zu implementieren. Nimm keine Clipnamen an. Erkläre das Mixer-Update und die Loop-Einstellungen und teste anschließend die Rückkehr zu Idle ohne Posensprung.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Clipnamen werden vor der Verwendung verifiziert.
  • Der Mixer wird fortgeschrieben, und die Übergänge bleiben kontinuierlich.
  • Inaktive Animationen behalten keine unnötigen Updates.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quelleninhaber
CloudAI-X
Lizenz
Nicht bestätigt – prüfe die Upstream-Bedingungen vor einer Wiederverwendung.
Geprüfter Stand
2026-10-07 · b1c623076c66
Redaktionelle Zusammenfassung der Quelle
Clip-, Mixer-, Action-, Skelett- und Morph-Animation mit Mustern für Überblendung und prozedurale Bewegung.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Erstellt es ein Skelett?

Nein. Die Quelle arbeitet mit einem vorhandenen Skinned Mesh und dessen Bones.

Kann es ohne importierte Clips animieren?

Ja. Es enthält prozedurale Bewegung und selbst erstellte Keyframe-Tracks.

Was steuert eine Action?

Wiedergabe, Geschwindigkeit, Looping, Gewicht und Überblendung eines Clips über seinen Mixer.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die Einrichtung des Skills selbst, bevor du ihn in deinen Workflow aufnimmst.

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