SkinnedMesh - Verge3D User Manual - Soft8Soft
Description: Learn how to use SkinnedMesh in your interactive 3D apps made with Verge3D

Object3D → Mesh →

# SkinnedMesh

A mesh that has a Skeleton with bones that can then be used to animate the vertices of the geometry.

SkinnedMesh requires WebGL 2.0 features. With WebGL 1.0 `OES_texture_float` extension and vertex textures support is required.

## Code Example

`const geometry = new v3d.CylinderGeometry(5, 5, 5, 5, 15, 5, 30); // create the skin indices and skin weights manually // (typically a loader would read this data from a 3D model for you) const position = geometry.attributes.position; const vertex = new v3d.Vector3(); const skinIndices = []; const skinWeights = []; for (let i = 0; i < position.count; i++) { vertex.fromBufferAttribute(position, i); // compute skinIndex and skinWeight based on some configuration data const y = (vertex.y + sizing.halfHeight); const skinIndex = Math.floor(y / sizing.segmentHeight); const skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight; skinIndices.push(skinIndex, skinIndex + 1, 0, 0); skinWeights.push(1 - skinWeight, skinWeight, 0, 0); } geometry.setAttribute('skinIndex', new v3d.Uint16BufferAttribute(skinIndices, 4)); geometry.setAttribute('skinWeight', new v3d.Float32BufferAttribute(skinWeights, 4)); // create skinned mesh and skeleton const mesh = new v3d.SkinnedMesh(geometry, material); const skeleton = new v3d.Skeleton(bones); // see example from v3d.Skeleton const rootBone = skeleton.bones[0]; mesh.add(rootBone); // bind the skeleton to the mesh mesh.bind(skeleton); // move the bones and manipulate the model skeleton.bones[0].rotation.x = -0.1; skeleton.bones[1].rotation.x = 0.2;`

## Constructor

### SkinnedMesh(geometry : BufferGeometry, material : Material)

- geometry — an instance of BufferGeometry.
- material — (optional) an instance of Material. Default is a new MeshBasicMaterial.

## Properties

See the base Mesh class for inherited properties.

### # .bindMode : String

Either `"attached"` or `"detached"`. `"attached"` uses the SkinnedMesh.matrixWorld property for the base transform matrix of the bones. `"detached"` uses the SkinnedMesh.bindMatrix. Default is `"attached"`.

### # .bindMatrix : Matrix4

The base matrix that is used for the bound bone transforms.

### # .bindMatrixInverse : Matrix4

The base matrix that is used for resetting the bound bone transforms.

### # .isSkinnedMesh : Boolean

Read-only flag to check if a given object is of type SkinnedMesh.

### # .skeleton : Skeleton

Skeleton representing the bone hierarchy of the skinned mesh.

## Methods

See the base Mesh class for inherited methods.

### # .bind(skeleton : Skeleton, bindMatrix : Matrix4)

- skeleton — Skeleton created from a Bones tree.
- bindMatrix — Matrix4 that represents the base transform of the skeleton.

Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property and the .bindMatrixInverse gets calculated.

### # .clone() → SkinnedMesh

Returns a clone of this SkinnedMesh object.

### # .normalizeSkinWeights()

Normalizes the skin weights.

### # .pose()

This method sets the skinned mesh in the rest pose (resets the pose).

### # .boneTransform(index : Integer, target : Vector3) → Vector3

Calculates the position of the vertex at the given index relative to the current bone transformations. Target vector must be initialized with the vetrex coordinates prior to the transformation:

`const target = new v3d.Vector3(); target.fromBufferAttribute(mesh.geometry.attributes.position, index); mesh.boneTransform(index, target);`

## Source

For more info on how to obtain the source code of this module see this page.