threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
How to use
Zaimportuj Three.js i umiejętność threejs-animation do swojego projektu. Upewnij się, że masz dostęp do obiektu sceny, kamery i renderera Three.js.
Utwórz AnimationClip definiując ścieżki klatek kluczowych. Dla każdej właściwości, którą chcesz animować (pozycja, rotacja, skala, kolor), utwórz odpowiednią ścieżkę — NumberKeyframeTrack dla wartości pojedynczych, VectorKeyframeTrack dla pozycji i skali, QuaternionKeyframeTrack dla rotacji, ColorKeyframeTrack dla kolorów. Określ czasy klatek w sekundach i wartości dla każdego momentu.
Stwórz AnimationClip przekazując nazwę animacji, czas trwania i tablicę ścieżek klatek. Clip będzie przechowywać wszystkie dane animacji.
Utwórz AnimationMixer przypisując go do obiektu, który chcesz animować. Mixer będzie zarządzać odtwarzaniem wszystkich animacji dla tego obiektu.
Utwórz AnimationAction wywołując mixer.clipAction() z utworzonym clipem. Action kontroluje odtwarzanie — możesz ustawić prędkość, pętle, czas początkowy i wywołać play() aby rozpocząć animację.
W pętli animacji (requestAnimationFrame) aktualizuj mixer wywołując mixer.update(delta), gdzie delta to czas od ostatniej klatki. Renderuj scenę po każdej aktualizacji.