Three.JS - Share skeleton between SkinnedMeshes using same bones structure

Question

I have been struggling to find a way to add/remove clothing pieces to an existing skeleton (Clothing meshes and body meshes should share skeleton) but I always end up getting funny/weird results.

All the clothing pieces that I'm looking forward to attach to the shared skeleton have been exported on Blender with the same skeleton, they all share same bone-names and structure, which I thought it would make it very straight forward.

I've used these same 3D files on Native iOS SceneKit, I literally just did something like clothing.skeleton = body.skeleton

But as I said, on Three.JS doesn't seem that straight forward.

I've tried stuff like

clothingMesh.bind(bodySkeleton,clothingMesh.worldMatrix);

Also tried:

clothingMesh.skeleton = bodySkeleton;
bodySkeleton.update();

But always ending up with weird results. I've seen some code that use "ratargeting" functions, but I believe these are used only when skeleton bone names don't match, which is not my case.

JSFiddle playground

I've been playing around with it thru JSFiddle https://jsfiddle.net/cabada/sxv4kbnm/ where there is a full code where I'm trying to build the concept.

Another of my goals with fixing how skeletons bind, is to be able to copy Skeleton animations from other sources, so I can download them on the fly and apply them to my characters dynamically. But again, getting weird results, animated skeleton also shares same bone names and structure than target skeleton to animate.

Resources & examples I have found online related to the topic

https://raw.githack.com/funwithtriangles/three.js/dev/examples/webgl_animation_sharedskeleton.html

https://rawcdn.githack.com/mrdoob/three.js/r105/examples/webgl_loader_sea3d_bvh_retarget.html

https://jsfiddle.net/satori99/pay0oqcd/

https://github.com/mrdoob/three.js/pull/16608

Goal is to be able to add/remove clothing pieces to body, making all meshes per character use one single skeleton (to achieve good performance) and as well to be able to add/remove animations coming from other sources.

Answer 1

Hi I have the same problem and I tried to solve your problem with the function I wrote below but without success. Were you able to solve the problem?

I try to use bakeSkeleton(MyCharacterName) after changing a geometry skinnedMesh of my character. The function doesn't give me console error but show the character deformed as exploded?

    function bakeSkeleton ( target ) {
      var v1 = new THREE.Vector3();

      target.traverse( function ( object ) {
            if ( !object.isSkinnedMesh ) return;
            if ( object.geometry.isBufferGeometry !== true ) throw new Error( 'Only BufferGeometry supported.' );

            var positionAttribute = object.geometry.getAttribute( 'position' );
            var normalAttribute = object.geometry.getAttribute( 'normal' );

            for ( var j = 0; j < positionAttribute.count; j ++ ) {
                  object.boneTransform( j, v1 );
                  positionAttribute.setXYZ( j, v1.x, v1.y, v1.z);

                  getBoneNormalTransform.call( object, j, v1 );
                  normalAttribute.setXYZ( j, v1.x, v1.y, v1.z );
            }

            positionAttribute.needsUpdate = true;
            normalAttribute.needsUpdate = true;

            object.skeleton.bones.forEach(bone => bone.rotation.set(0,0,0));
      } );
}

const getBoneNormalTransform = (function () {

      var baseNormal = new THREE.Vector3();

      var skinIndex = new THREE.Vector4();
      var skinWeight = new THREE.Vector4();

      var vector = new THREE.Vector3();
      var matrix = new THREE.Matrix4();
      var matrix3 = new THREE.Matrix3();

      return function ( index, target ) {

            var skeleton = this.skeleton;
            var geometry = this.geometry;

            skinIndex.fromBufferAttribute( geometry.attributes.skinIndex, index );
            skinWeight.fromBufferAttribute( geometry.attributes.skinWeight, index );

            baseNormal.fromBufferAttribute( geometry.attributes.normal, index ).applyNormalMatrix( matrix3.getNormalMatrix(this.bindMatrix) );

            target.set( 0, 0, 0 );

            for ( var i = 0; i < 4; i ++ ) {

                  var weight = skinWeight.getComponent( i );

                  if ( weight !== 0 ) {

                        var boneIndex = skinIndex.getComponent( i );

                        matrix.multiplyMatrices( skeleton.bones[ boneIndex ].matrixWorld, skeleton.boneInverses[ boneIndex ] );

                        target.addScaledVector( vector.copy( baseNormal ).applyNormalMatrix( matrix3.getNormalMatrix(matrix) ), weight );

                  }

            }
            
            matrix3.getNormalMatrix(this.bindMatrixInverse);
            
            return target.applyNormalMatrix( matrix3 );

      }; 
      
}());