Search⌘ K
AI Features

Animation with Skeleton

Explore how to create skeletal animations in Three.js by manipulating bones and skinning on 3D models exported from Blender. Learn to load glTF models, set up animation mixers, and control bone rotations to animate characters realistically within your 3D scenes.

Animation using bones and skinning

Creating morph animations with a mixer and morph targets are very straightforward. Three.js knows all the target vertex positions and only needs to transition each vertex from one position to the next. For bones and skinning, it becomes a bit more complex. When we use bones for animation, we move the bone, and Three.js has to determine how to translate the attached skin (a set of vertices) accordingly. For this example, we will use a model that was exported from Blender into Three.js format (lpp-rigging.gltf in the models/blender-skeleton folder in the playground below). This is a model ...