Using the SkinnedMesh inside a .glb

I’m trying to place a basic rigged model of a human in my scene. I can do it by just adding the entire contents of gltf.scene but that doesn’t exactly do what I want. What I’m trying to do is to retrieve the SkinnedMesh and create a SkeletonHelper to add with it to the scene.

From the hierarchy, I’ve deduced that the SkinnedMesh is located at gltf.scene.children[0].children[3] and then its skeleton and geometry are simply .skeleton and geometry

I’ve tried adding that SkinnedMesh directly to the scene and I’ve also tried using its geometry to create a new SkinnedMesh, binding that to the skeleton and then adding that to the scene but neither has resulted in anything showing up

Here is the relevant code (mesh, skeleton, geometry and skeletonHelper are global)


  const loader = new THREE.GLTFLoader();

  loader.load(
      './assets/models/male.glb',
      function( gltf ) {

        console.log(gltf)

        mesh = gltf.scene.children[0].children[3]
        skeleton = mesh.skeleton
        geometry = mesh.geometry

        var material = new THREE.MeshPhongMaterial( {
            skinning : true,
            color: 0x156289,
            emissive: 0x072534,
            side: THREE.DoubleSide,
            flatShading: true,
            vertexColors: true
        } );
    
        var lineMaterial = new THREE.MeshBasicMaterial({
            skinning : true,
            wireframe: true
        });

        var new_mesh = new THREE.SkinnedMesh(geometry, [material, lineMaterial])

        new_mesh.bind(skeleton)

        skeletonHelper = new THREE.SkeletonHelper(new_mesh);
        skeletonHelper.material.linewidth = 5;
    
        scene.add(skeletonHelper);

        scene.add(new_mesh)

      },
      function( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
      },
      function( err ) {
        console.error( 'An error happened' );
      });

}

Any help or advice would be greatly appreciated.

The SkinnedMesh / Skeleton have THREE.Bone references, which are also part of that scene graph. You’ll need to use a common parent of all of those, not just the mesh.