The THREE.js Animation System

4 minutes
Share the link to this page
Copied
  Completed
An overview of the THREE.js animation system

Transcript

3Ds animation systems very versatile, and echoes the animation system used by the Unreal Engine. The main controller is an animation mixer, you use an animation mixer to control the animation of a single object. If you're manipulating multiple objects, then you'll need multiple animation mixes. But a single skinned mesh is controlled by a single animation mixer. Before you can see any animations you'll need an animation action. an animation action is how you play an animation clip.

If you're using the FX loader class, which we'll see in the next video, then the object animations array will contain animation clips. That's a series of key friend tracks. Suppose the hierarchy of a skin mesh contains a hips object, which got a right and a left thigh attached, etc. And each part This skin mesh will have its own key friend track. You create an animation action using the clip action method of the mixer class. If you download the results for this video, and using web server for Chrome, run the index dot HTML page, you'll see this clicking play animation one shows a walking animation.

While clicking play animation two shows a pointed animation. Pressing the blend button shows a blend of these animations. If you slide the range, you can change the weight. So it shows just the walking just the points in or any weight in between. That's why the class is called a mixer. So to recap, you get your animation clips by loading in an FX file or using a gltf file.

If these clips are in different files, then it's useful to pulled them into an array to be more easily accessed. You can choose to create animation actions from the clips, they're always going to be handled by the same animation mixer, then create an array of actions. To see an action, you use action dot play. Often you'll want to blend the action in by using the action fading. passing a parameter of the seconds used to blend the weight of this action from zero to one. Playing a single action means stopping any other actions, which is easily done by using the stop all action method of the mixer.

You can also stop an individual action using an action dot stop. When you blend in animations, you lay them up in the mixer. By playing more than one you can easily set the weight of an action using the weight property. The mixer will Use this value to determine how much of an action is used in calculating the position, orientation and scale at any given time. If you want an action to always start from time zero, then also called reset, which ensures that the action is enabled, his time is set to zero, and his weight is set to one. When using animation mixes in your request animation frame event, you'll want to update the animation mixes based on the Delta time that's elapsed since the last frame was called.

The 3ds animation system is very versatile. And if you're creating your own animations, you could have an animation layer that controls the arms and perhaps another that controls the head and a main layer and then have individual control over different body parts by setting the weights. Okay, quick pause that and I'll see you in a minute.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.