Animating 3D Objects

In this tutorial you'll learn how to animate a 3D object, without using scripting.

First you'll learn how to play an animation that's included in a 3D object's file - this is known as a baked keyframe animation.

Then we’ll show you how to use the Patch Editor to animate an object's skeleton. This is known as procedural animation, and you can use this technique to animate all kinds of objects in Spark AR Studio.

You can download the sample content content to follow along. It includes the objects and assets you'll need to build the effect.

Setting Up

If you open the unfinished effect in the sample content folder, you'll see a 3D object in the Viewport that looks like a teddy springing out of a box:

AR Studio after opening the unfinished project.

This 3D object is a child of a plane-tracker , which means it will appear when someone points the back camera at a real-life surface, like a table or the floor.

In the Assets panel, this object is listed under 3D Objects, as teddy.

Creating an animation playback controller

Using an asset included in Spark AR Studio called an animation playback controller is an easy way to play a baked animation.

The animation playback controller allows you to control when an animation plays, pauses and stops. You can also use it to edit the speed of the animation.

To create an animation playback controller:

  1. Click Add Asset at the bottom of the Assets panel.
  2. Select Animation Playback Controller:
The animation playback controller being added to the Assets panel.

You'll see the animation playback controller listed in the Assets panel as animationPlaybackController0.

Next you'll need to connect the animation itself to the animation playback controller. You can see the animation listed in the Assets panel under 3D Animations - it's called Dance.

The Asset panel with Dance listed under the teddy group.

Select the animation playback controller in the Assets panel. You'll see its properties have opened in the Inspector.

Click the dropdown next to Animation Clip, and select Dance:

The dance animation being added to our Animation Playback Controller.

Finally, to show the animation in the scene, we need to go back to the 3D object:

  1. Select teddy in the Scene panel.
  2. In the Inspector, click the dropdown next to Animation.
  3. Select AnimationPlaybackController0.
Adding the Animation Playback Controller to our 3D object.

Editing the animation playback controller

If you make sure the animation playback controller is selected in Assets panel, you can play with its speed.

Over in the Inspector, use the slider to edit the speed:

The animation plays faster or slower depending on how the slider is set.

There are a couple of other options here too. You can:

  • Use the box next to Play on Start to control whether or not the animation plays as soon as the effect is opened.
  • Clear the box next to Loop, to make the animation play once, and then stop.

Using patches to animate an object

Before you start the next part this tutorial, delete the animation playback controller:

  1. Select it in the Assets panel.
  2. Press delete on your keyboard.
Removing the Animation Playback Controller from your project.

Instead of animating the teddy by playing the baked animation, you're going to use patches to set the exact movement of the objects that make up the teddy.

You'll do this by using the Loop Animation and Transition patches to control the movement of these objects through their position and rotation properties.

For this effect you're going to animate joint objects, but you could use the same technique to animate all kinds of objects in your scene.

If you expand the teddy object in the Scene panel, you'll see two objects nested underneath it. Model_group contains a series of mesh that define the shape of the object.

The second object, skel_root, contains the joints. You're going to animate four joints - to make the teddy wave and bounce up and down.

To find the joints you'll need, expand the skeleton in the Scene panel. The joints you'll need to make the teddy wave are called arm_r and wrist_r:

Joints can be found by expanding the teddy object in the Scene panel.

Select them both at the same time by holding down command on your keyboard.

Next create patches to represent their Rotation property. We're using the rotation property so we can rotate the joints slightly, which will make the teddy appear to wave.

To create these patches, click the arrow next to Rotation in the Inspector:

Patches that control the joint rotations are added to the Patch Editor.

The Loop Animation and Transition patches

Create the Loop Animation and Transition patches in the Patch Editor:

  1. Right-click in the Patch Editor.
  2. Select a Loop Animation patch, then right-click again and select a Transition patch.
A patch graph with two patches.

The Loop Animation patch and Transition patches are usually used together. This is because the Loop Animation patch controls the progress of an animation, and the Transition patch can be configured to control how and where the object moves.

To see this in practice, connect the Progress output in the Loop Animation patch to the Progress input in the Transition patch - when a patch is selected, you'll see a label to indicate which port is which.

Then connect the output of the transition patch to the 3D Rotation input in both arm_r and wrist_r.

Here's how the graph will look:

The finished patch graph, with four patches.

And if you look closely, you can see the arm is moving very slightly:

The teddy's arm moves very slightly in the Simulator and Viewport.

This is because the End values in the Transition patch are set to 1 by default. This means the arm is moving very slightly, from the Start values of 0, to the end values of 1.

Let's make this movement more dramatic. It's really a matter of testing different options when working out the best values here, but let's start by changing the three End values to 20.

As you can see, the arm is moving more dramatically:

The teddy's arm is now waving more enthusiastically.

Next change all three of the Start co-ordinates to -10.

So the teddy is clearly waving now - but obviously in real life the arm would move back and forth.

To achieve this effect, select the box next to Mirrored in the Loop Animation patch. Selecting this box will play the animation forward, then in reverse. While you're there, change the duration to 0.75. This will speed the animation up.

The finished graph, with all the correct values, will look like this:

The nearly-finished patch graph, containing four patches.

Next let's make the teddy move up and down. Again, we'll be using the Loop Animation and Transition patches.

In the Patch Editor, create another Loop Animation patch, and 2 Transition patches.

Next, return to the object in the Scene panel, to create patches to represent the joints in the middle of the skeleton. These joints are called spring_mid, and jack_base. So, select spring_mid and jack_base. Again, you can select them both at the same time by holding down command on your keyboard.

This time, click the arrows next to Position over in the Inspector.


  1. The Progress output in the Loop Animation patch to the Progress input in both Transition patches.
  2. The output of one Transition patch to the spring_mid patch.
  3. The output of the other Transition patch to the jack_base patch.

Ok, so the teddy is moving, but obviously you'll need to make some adjustments to the positions it's moving between!

The teddy bounces wildly out of its box.

Like before, you can do this in the Transition patches.

Start with the Transition patch connected to jack_base. So the joints move up and down - and not to the side - change the X and Z values to 0 next to both Start and Finish. Then:

  1. Next to Start, change Y to 0.1.
  2. Next to End, change Y to 0.15.

In the other Transition patch:

  1. Next to Start, change Y to 0.1.
  2. Next to End, change Y to 0.12.

Again, in the Loop Animation patch select the box next to Mirrored. Let's speed it up a bit too - set the Duration value to 0.25.

Here's how the final graph should look:

The finished patch graph, containing four patches.

Just one last tweak now. Let's take a look at the Curve value in the Transition patch. You can adjust this to set the pacing of the movement. It's worth experimenting with this option in your own effects.

For this tutorial, set the Curve to Sinusoidal In-Out in both Transition patches.

Was this tutorial helpful?