Wireframe with SkinnedMesh

Questions
,
1

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

2

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.

1 Like
3

Oh okay. Thank you