This example demonstrates how to play animations in a model in the Galacean editor. Through simple steps, you will learn how to load a 3D model with animations and control its animation playback. This guide is suitable for beginners to understand the animation system of the Galacean editor and lays the foundation for more complex animation applications.

0. Preparation

Before starting, we need a model with animations. If you don't have a model, you can download one from mixamo.

Download Model

1. Select a model in mixamo

2. Select an animation in the Animation Tab

3. Download the model

Import Model

There are three ways to import models:

1. Drag the model file into the Asset Panel of the editor

2. Right-click on the blank space in the Asset Panel and select Upload -> Model

3. Click the upload button and select Model

1. View Model

Click the expand button on the model asset

You can see that the model contains an AnimationClip (detailed introduction) asset (if the model contains multiple animations, there will be multiple AnimationClip assets here)

And an AnimatorController (detailed introduction) asset

2. Create AnimatorController Asset

To control the playback of animations, we need to edit the content of the AnimatorController. The AnimatorController in the model is read-only, so we need to create an AnimatorController ourselves.

There are two ways to create an AnimatorController:

1. Right-click on the blank space in the Asset Panel and select Create -> Animation Controller

2. Click the add asset button + and select Animation Controller

3. Edit AnimatorController

1. Double-click the AnimatorController asset to enter the AnimatorController editor (for an introduction to the functions of the editor, please refer to the AnimatorController Editor document)

2. Click the add AnimatorState button to add an AnimatorState

3. Click the AnimatorState (for an introduction to the properties of the Animation State, please refer to the AnimatorStateMachine document), and bind the AnimationClip.

4. Connect from entry to this AnimatorState and click the connection line to change the Duration to 0 (for a detailed introduction to Animation Transition, please refer to the AnimatorStateMachine document). This way, when this AnimatorController is applied, it will immediately play this AnimatorState.

4. Use AnimatorController and Preview

1. Drag the model into the scene

2. Find the Animator component (detailed introduction). The component is generally on the root entity of the model instance, which is the first child entity under the model entity in the editor.

3. Replace the AnimatorController property with the AnimatorController we just created

4. Click the play button, and you will see the model start playing the animation