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/
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.