Three.js SkinnedMesh vs Mesh: What is the Difference?
In Three.js, rendering and animating 3D objects efficiently requires
understanding the distinction between different geometry containers.
This article provides a clear comparison between a standard
Mesh and a SkinnedMesh, explaining their
unique architectures, how they handle animations, and how to choose the
right one for your WebGL projects.
What is a Standard Mesh?
A standard THREE.Mesh is the most common object used to
render 3D models in Three.js. It represents a rigid 3D object and is
constructed using two primary components: * Geometry:
The shape of the object (defined by vertices, faces, and coordinates). *
Material: The appearance of the object (defined by
colors, textures, and how it responds to light).
When you transform a standard Mesh—such as moving,
rotating, or scaling it—the transformation applies uniformly to the
entire object. Individual vertices within the geometry cannot bend or
deform independently relative to one another unless you manually
manipulate the geometry attributes frame-by-frame, which is highly
inefficient.
What is a SkinnedMesh?
A THREE.SkinnedMesh is an extension of the standard
Mesh designed specifically for skeletal animations. It
allows a 3D model to bend, stretch, and deform organically, simulating
real-world physics like muscles, joints, and clothing.
A SkinnedMesh relies on a hierarchy of
THREE.Bone objects, collectively known as a
THREE.Skeleton. To determine how the shape deforms, the
vertices of the geometry are bound to these bones using two special
vertex attributes: * Skin Indices
(skinIndex): Defines which bone(s) influence a
specific vertex. * Skin Weights
(skinWeight): Defines the degree of influence
(from 0 to 1) each bone has on that vertex.
When a bone in the skeleton moves, it pulls the associated vertices along with it. Because a single vertex can be influenced by multiple bones (for example, a vertex at an elbow joint influenced by both the upper arm and forearm bones), the mesh deforms smoothly at the joints.
Key Differences
| Feature | Standard Mesh
(THREE.Mesh) |
Skinned Mesh
(THREE.SkinnedMesh) |
|---|---|---|
| Primary Use Case | Static or rigidly moving objects (e.g., buildings, furniture, cars). | Organic, bending characters and creatures (e.g., humans, animals, monsters). |
| Internal Structure | Geometry + Material. | Geometry + Material + Skeleton (Bones) + Bind Matrices. |
| Deformation | None. The entire shape moves as a single, rigid unit. | Dynamic. Vertices deform smoothly based on bone movements. |
| Performance Cost | Low. Requires minimal CPU/GPU calculations. | Higher. Requires vertex shading calculations on the GPU to process bone weights. |
| File Complexity | Simple. Smaller file sizes (e.g., standard
.obj or .gltf without animation data). |
Complex. Larger file sizes containing skeleton hierarchy and keyframe animations. |
When to Use Which
Choose a Standard Mesh if:
- You are rendering environmental assets, props, or obstacles like rocks, trees, crates, and buildings.
- You need to move an object rigidly, such as a spinning coin or a driving car.
- You want to maximize rendering performance and minimize memory overhead.
Choose a SkinnedMesh if:
- You are importing animated characters with running, jumping, or speaking animations.
- You need realistic joint bending, such as a character bending their knees or waving their hands.
- You are working with complex simulations that require flexible parts, like a waving flag or a bending whip.