Animations

A feature that can make your models much more lively is animations. In our viewer, animations can be defined by using AnimationData. An AnimationData consists of one or multiple AnimationTracks. The 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.

Simple Example

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 interpolation as 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.

Advanced Example

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 2.5 to 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.

Additional Examples

Additional example can be found on the viewer examples page in the animations section.