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

Questions
, , , ,
1

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/

Illustration

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.

2

This is the only working example I found: 3d-animated-char-test

3

I also have been struggling with this issue, did you get any good solution to this?

4

The simplest way to achieve clothing is to create a single GLTF file containing all your meshes skinned to the same skeleton. Include all your animation too. Then hide/show what you need.

Three.js now contain a great feature to generate your animation clip using a keyframe range.
THREE.AnimationUtils.subclip()
Wich mean there is little reason now to split your files, using convoluted operations and multiplying potential risks of errors. I really recommend reducing the number of files when dealing with skinned meshs.

5

I am trying to make a character customization feature like readyplayerme. So including those many skinned meshes in a model would be very taxing. It is the reason why I want to replace the skinned meshes.
The temporary fix I have going on is that I bind the skinned mesh with the same skeleton structure to the existing skeleton. Which seems to give me what I want, but it will be very complicated to remove the mesh every time there is a change of clothes.

6

Hie, did you manage to get it working properly?