# Dynamically add bones to skinned mesh

**URL:** <https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141>\
**Category:** Questions\
**Tags:** skinned-mesh\
**Created:** [January 15, 2020, 6:36pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141 "2020-01-15T18:36:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![likwifi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/likwifi/32/8275_2.png) [@likwifi](https://discourse.threejs.org/u/likwifi)\
**Post date:** [January 15, 2020, 6:36pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/1 "2020-01-15T18:36:50Z")

</div>

Hey,  
I was wondering if there is some way to update (add,remove) mesh bones after they’ve been added once with this code.

```auto
mesh.add(rootBone);
mesh.bind(skeleton);

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 15, 2020, 7:47pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/2 "2020-01-15T19:47:20Z")

</div>

You have to consider (at least) two things when updating a skeleton:

- You also have to update the geometry of the skinned mesh. To be more precise, the `skinIndex` and `skinWeight` attributes always have to reflect the amount and correct influence of bones.
- When you just add bones to a skeleton, the `boneMatrices` property of `Skeleton` does not automatically update. I guess it’s better to create a new `Skeleton` when the bone hierarchy changes and then perform a new `SkinnedMesh.bind()`.

---

<div class="post-metadata">

**Author:** ![likwifi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/likwifi/32/8275_2.png) [@likwifi](https://discourse.threejs.org/u/likwifi)\
**Post date:** [January 24, 2020, 2:09pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/3 "2020-01-24T14:09:58Z")

</div>

Hey Michael,  
can you please also clarify algorithm for skinIndices and skinWeights calculation from bones position and rotation?  
Assuming that my object is 2D I’m guessing it should be some distance calculation from bones position to vertex position, is it so?  
Also I’m not sure how to understand this code from examples source. Can’t see how this code is related to bones coordinates.

```
let geometry = this.geometry,
    position = geometry.attributes.position;
let vertex = new Vector3();
let skinIndices = [];
let skinWeights = [];
for (let i = 0; i < position.count; i++) {
    vertex.fromBufferAttribute(position, i);
    let y = (vertex.y + sizing.halfHeight);
    let skinIndex = Math.floor(y / sizing.segmentHeight);
    let skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;
    skinIndices.push(skinIndex, skinIndex + 1, 0, 0);
    skinWeights.push(1 - skinWeight, skinWeight, 0, 0);
}

```

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 24, 2020, 2:27pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/4 "2020-01-24T14:27:32Z")

</div>

Where does this code snippet come from?

---

<div class="post-metadata">

**Author:** ![likwifi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/likwifi/32/8275_2.png) [@likwifi](https://discourse.threejs.org/u/likwifi)\
**Post date:** [January 24, 2020, 2:29pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/5 "2020-01-24T14:29:40Z")

</div>

[https://threejs.org/docs/scenes/bones-browser.html](https://threejs.org/docs/scenes/bones-browser.html)  
Line 113

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 24, 2020, 2:42pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/6 "2020-01-24T14:42:45Z")

</div>

Well, this code is very specific for this cylinder geometry. It does not work with arbitrary geometries.

The best solution is to author the skinning data in a DCC tool if possible. But since you want to add bones dynamically, you can indeed try to compute the distance between bones and vertices. Based on the distance, you can figure out the four most closest bones for each vertex. This should allow you to derive the mentioned skinning data. However, I’m not sure how “good” the final animation will look like. TBH, apart from the code in the bones browser, I’ve never seen this done elsewhere.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 24, 2020, 4:10pm UTC](https://discourse.threejs.org/t/dynamically-add-bones-to-skinned-mesh/12141/7 "2020-01-24T16:10:40Z")

</div>

Some time ago I experimented with bones and skeleton. Perhaps there is a suggestion.  
Some comments in German - can surely be translated easily.  
A little lower on my side. [https://hofk.de/main/threejs/](https://hofk.de/main/threejs/)

![2020-01-24_16.59.46](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/760a926a33c541f64bf34dbe8a9b9342772dfaf2.png) ![2020-01-24_17.00.07](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3c8baee8a5b2e8ec094b99c15e03fac801dd25ac.png)

See also in the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

![2020-01-24_17.09.41](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/17b1b22c939a60041c524021cb17824f0a0abb62.png)  
[https://hofk.de/main/discourse.threejs/2018/Xindex2018.html](https://hofk.de/main/discourse.threejs/2018/Xindex2018.html)  
[https://codepen.io/hofk/pen/eWdZMb](https://codepen.io/hofk/pen/eWdZMb)