CODEWITHSUNDEEP
graphics3dthree.js
Danie Clawson
Danie Clawson

Reputation: 183

How can I assemble a (skinned) model from component meshes?

I need to enable visible item swapping on 3d characters for my game, but for the life of me I can't work out how to do this in Three.js. Any information about how bones and skinning work in Three.js will be helpful, to start with.

Beyond that, what I would like to do is basically have each segment of a character be a segment from another mesh. For example, the lower legs might be from the base/nude character model, upper legs from the shorts model, the torso and upper arms from the shirt model, etc etc. Once every bone has been filled, then have them all stitched together and animated as one.

How can I determine which areas to copy or remove, and how can I stitch the faces back together? How will doing this affect the animation, and what steps will I need to take to ensure everything is in sync?

I would assume that, given that the base models all share the same bone structure, I could just look up vertices (and their skin properties) per bone and remove or copy them that way to start with. However, I can't seem to figure out how bones' vertex associations are stored.

Upvotes: 0

Views: 697

Answers (1)

WacławJasper
WacławJasper

Reputation: 3384

Go to your skinnedMeshInstance.geometry and you should see .skinIndices and .skinWeights. Those are your bone indices and bone weights. Under skinnedMeshInstance.skeleton you have the .bones which are the individual bone data. If you are using an exporter then https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 may help as well.

Unfortunately I dont know how to do what you asked in ThreeJS but in general how it is done is to decouple the skeletal bone structure with the individual mesh attachments; one skeleton can have multiple mesh attachments. At model initialization time, set the model bone/skin weights and indices to the correct corresponding values of the skeleton it belongs to, then at draw time, the skeleton calculate the bone matrices and upload to the GPU and you simply draw the desired mesh attachments.

What you are after, I think, is how to make multiple skinnedMesh share the same skeleton. There is skinnedMesh.bind which "Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property and the .bindMatrixInverse gets calculated." (http://threejs.org/docs/#Reference/Objects/SkinnedMesh) but I dont know if this will just work. Perhaps go through the ThreeJS docs to see if sharing skeleton is possible or perhaps start another question asking directly that?

Upvotes: 1

Related Questions