Animations
After your 3D model is loaded, the first animation of the model will automatically play if it exists.
If your 3D model has multiple animations, you can use View3D's animator to play other animations, or get information about the animations.
See ModelAnimator page for further informations.
Animation infos
The animations of the current 3D model is stored in clips as an array of THREE.AnimationClip.
import { View3D } from "@egjs/view3d";
const view3D = new View3D("#el", { src: "SOME_URL", autoInit: false });
// Wait 3D model to be loaded, you can also use "ready" event if you want.
await view3D.init();
// Retrieve the names of the animations
const animationNames = view3D.animator.clips.map(clip => clip.name);
// Retrieve the animation count
const animationCount = view3D.animator.animationCount; // same to animator.clips.length
Play / Pause / Stop
Playing different animation can change model's pose immediately.
// Play animation at index 1
view3D.animator.play(1);
// This will pause the current animation playing (index 1)
view3D.animator.pause();
// This will resume the current animation playing (index 1)
view3D.animator.resume();
// This will fully stops the current animation playing
view3D.animator.stop();
Animation Mixing (Crossfade) / Fadeout
You can mix animations by calling animator.crossFade.
When there's no active animation playing, it will fadein to the selected animation.
Otherwise, it will gradually mix two animations for a given time.
If you want to fadeout current animation playing and return the model to default pose, use animator.fadeOut.
crossFade and fadeOut both returns Promise that resolves when the fade is finished.
Resolved promise has a value indicating whether the fade was successful.
// true when crossfade is done without any interfere and successfully changed animation to index 1
// false when there were any interfere, like calling `stop` during crossfade.
const fadeSuccess = await view3D.animator.crossFade(1, 3000);
// Crossfade to animation at index 1 in 3000ms
// With synchronizing animations, which will start crossfade when current animation's loop ends
view3D.animator.crossFade(1, 3000, { synchronize: true });