# Wireframe with SkinnedMesh

**URL:** <https://discourse.threejs.org/t/wireframe-with-skinnedmesh/3447>\
**Category:** Questions\
**Tags:** skinned-mesh, wireframe\
**Created:** [July 16, 2018, 6:17am UTC](https://discourse.threejs.org/t/wireframe-with-skinnedmesh/3447 "2018-07-16T06:17:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shanaya](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@Shanaya](https://discourse.threejs.org/u/Shanaya)\
**Post date:** [July 16, 2018, 6:17am UTC](https://discourse.threejs.org/t/wireframe-with-skinnedmesh/3447/1 "2018-07-16T06:17:35Z")

</div>

I have a model of a hand whose movement of fingers can be controlled  
I’ve added a wireframe ontop of the hand. However, when I move the fingers, the wireframe does not move along.

```
  var loader = new THREE.JSONLoader();
  loader.load('hand-1.js', function (geometry, mat) {
         var mat = new THREE.MeshLambertMaterial({color: 0xF0C8C9,skinning: true});
    
         mesh = new THREE.SkinnedMesh(geometry, mat);

         // rotate the complete hand
         mesh.rotation.y = -0.5 * Math.PI;
         mesh.rotation.z = 0.5 * Math.PI;

         //wireframe
         var wireframeGeomtry = new THREE.WireframeGeometry( mesh.geometry );
         var wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
         wireframe = new THREE.LineSegments( wireframeGeomtry, wireframeMaterial );
         wireframe.visible = false;
         mesh.add(wireframe);

         // add the mesh
         scene.add(mesh);
         mesh.scale.set(0.9,0.9,0.9);

         // set defaults for control object
         control.finger1a_rot = mesh.skeleton.bones[6].rotation.z;
         control.finger1b_rot = mesh.skeleton.bones[5].rotation.z;
         control.finger1c_rot = mesh.skeleton.bones[4].rotation.z;
        
         control.finger2a_rot = mesh.skeleton.bones[9].rotation.z;
         control.finger2b_rot = mesh.skeleton.bones[10].rotation.z;
         control.finger2c_rot = mesh.skeleton.bones[11].rotation.z;

         control.finger3a_rot = mesh.skeleton.bones[14].rotation.z;
         control.finger3b_rot = mesh.skeleton.bones[15].rotation.z;
         control.finger3c_rot = mesh.skeleton.bones[16].rotation.z;
         
         control.finger4a_rot = mesh.skeleton.bones[19].rotation.z;
         control.finger4b_rot = mesh.skeleton.bones[20].rotation.z;
         control.finger4c_rot = mesh.skeleton.bones[21].rotation.z;

         control.wrist_sideways_rot = mesh.skeleton.bones[1].rotation.x;
         control.wrist_updown_rot = mesh.skeleton.bones[1].rotation.z;

        //helper
         helper = new THREE.SkeletonHelper(mesh);
         helper.visible = false;
         scene.add(helper);

        render()
    });

```

I have also tried adding mesh.verticesNeedUpdate = true in render(), but to no avail

---

<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:** [July 16, 2018, 10:11am UTC](https://discourse.threejs.org/t/wireframe-with-skinnedmesh/3447/2 "2018-07-16T10:11:59Z")

</div>

What you are trying to achieve is currently not possible without writing custom code. Skeletal animation only affects the vertices of the skinned mesh but not the vertices of child objects. You would need a solution similar to `SkeletonHelper.updateMatrixWorld()` in order to animate the `LineSegments` (wireframe) object.

If possible, just set `material.wireframe` to `true` for the `SkinnedMesh`'s material. But in this way, you get a pure wireframe and no overlay.

---

<div class="post-metadata">

**Author:** ![Shanaya](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@Shanaya](https://discourse.threejs.org/u/Shanaya)\
**Post date:** [July 16, 2018, 10:18am UTC](https://discourse.threejs.org/t/wireframe-with-skinnedmesh/3447/3 "2018-07-16T10:18:51Z")

</div>

Oh okay. Thank you