A feature that can make your models much more lively is animations. In our viewer, animations can be defined by using
AnimationData consists of one or multiple
AnimationTracks define which object moves how. The
AnimationData is a wrapper around multiple
AnimationTracks to execute them together. In this tutorial, we’ll show you how to do that, and what is possible.
In our first, simple example, we just want to move our whole model to one side and back. We start with the simple example and now create an
AnimationTrack array and an
AnimationData item. The
AnimationData specifies keyframes (in seconds) at which a state is defined. In our example, we start at second
0 at the position
[0,0,0], and move in the next
2.5 seconds to position
[25,0,0], from second
2.5 to second
5 we move from that position back to the origin. As a
node the current session node is defined. As a
path the type of animation is used, in our case
translation. And finally, we define the
linear. The created data item has to be added to the scene now. Additionally, we want the animation to loop. Therefore, we set the according values.
Note: It does not matter where you add this
AnimationData. The nodes that are specified by the tracks will be animated. It does make sense to store this data in the corresponding session node, as customization calls will remove that node, and therefore invalid nodes in the tracks will not be used.
In the example below we can see the model moving the specified animation sequence in repeat.
In our next example, we want to move separate parts of the model. We also want to use the other types of animations and want to build them up consecutively. First, we want our door to move, then rotate, and then move back. In our first
AnimationTrack we create the translation. Note that we stay at the position
[14.5,0,0] for 5 seconds (from
7.5). In our second
AnimationTrack we rotate the object around the z-Axis for 180 degrees. This results in the animation below.
Additionally, we now also want to scale some of our geometry. We create new
AnimationTracks and specify different scaling for three of the horizontal boards. In the example below, you can see how both of these animations work at the same time.
Global Access & GLTF Animations
It is very easy to access all animations that are currently active. Just call
viewer.animations to get all current animations in array form. There you can start/pause/stop them and change if they should be repeated or not. Animations that are defined in a glTF v2 can be accessed exactly in the same way.
Simple translation animation.
Animation with multiple steps
The door of the model is first translated, than rotated.
The door of the model is first translated, than rotated. The scale of other outputs is adjusted.
Rotation around a point
A point is specified to rotate around.
Complex hierarchical animation
The joints of this animation are put into a hierarchy to receive the parents animation.