There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Animating Objects with Skeletons

Something Went Wrong
We're having trouble playing this video.

Previously you learned how to use 3D objects in your scenes. In this tutorial, you'll learn how to use skeletons to pose and animate objects in Spark AR Studio.

Please download the sample content to follow along.

If you open the finished version of the effect, you'll see that we're going to build a star antenna effect. These antennas track your face and sway in a realistic way as you move.

Creating a Model in a 3D Modeling Package

You can create an object with a skeleton in a 3D modeling package, like Maya or Blender, but for this tutorial, we've provided one for you.

Like human skeletons, 3D skeletons are made up of a series of bones and joints. When you create a skeleton yourself, you'll place joints at the points where you want your model to bend or move. These are known as the points of articulation.

Between the joints on your model, you'll see bones. While they don't have any impact on your model, they help you to see how each joint interacts with the others. Once you've created the skeleton, you can bind it to your model using a process called skinning.

Inserting Face Trackers

To get started, open Spark AR Studio and click Create New Project. Then, click Insert, select Face Tracker and then click Insert. You should now see the axes in the scene.

Importing and Manipulating 3D Objects

Right-click on the face tracker in the Scene tab, select Insert and then 3D Object. Open the DAE file in the sample content folder.

You should now see the object listed in the Scene tab and in the Assets panel, and tracking the face in your scene.

Creating Materials

You'll need to create the 2 color materials you saw in the finished effect.

Go to Assets, click + and select Create New Material. The new material's properties should now be open in the Inspector panel.

In the Inspector panel, go to Shader Properties. Go to Diffuse, click in the box next to Color and then select a new color. This will be the color for the stars. We have colors in mind for this effect, but you can choose the color you like.

Next, create another new material and choose another color. This will be the color for the springs.

Apply the materials to the object in your scene. To do this:

  1. Go to the Scene tab and click the arrow next to stars_antenna_grp and its child, skeleton, to expand them.
  2. Select right_star_geo and go to Materials in the Inspector panel.
  3. Click the arrow next to No material selected and choose the material you created for the stars from the menu.
  4. Do the same for left_star_geo.

Repeat these steps for the springs, using the second material you created.

Your object is complete - now all you need to do is animate it.

Adding Scripts

We've given you the script you need for this effect:

  1. Open antennas_script.js in the sample content folder.
  2. Go to Assets and click +.
  3. Select Create New Script and then double-click script.
  4. Copy and paste the sample script into script, then save and close it.

To test the script and preview the effect, click Run and move your head.