How to dynamically set the orientation of bones at run time?

Questions
1

I have a 3d model of a humanoid skeleton (in this case a c3b file, but I’m willing to try other formats) with lots of bones (feet, hands, upper arm, lower arm, spine, neck, fingers, toes etc…)

I would like to display the skeleton onscreen, and dynamically set the orientation of individual bones. For example, is there some kind of api like:

SkeletonObject.getBone(“upper-leg”).setQuaternion(5,12,2,24);

I would like to be able to set the orientation of an individual bone by passing it a quaternion. The impact of adjusting the parent bone should be felt on the child.

There are many examples about loading animations, but that is not what I want to do. I would like to be able to set the orientation of any bone dynamically at run time.

Can someone point me in the right direction ? I’ve posted on stack overflow, and tried to go through the documentation of Three.js , but haven’t been able to figure this out. Thanks.

2

The following live example shows how to animate the rotation of a single bone. This is done with Euler angles since Object3D.rotation is used. But can achieve the same result by working with Object3D.quaternion.

https://jsfiddle.net/1cv2p5aq/

As you can see in the code, the right arm of the model is selected like so after the loading process has finished:

rightArm = model.getObjectByName( 'mixamorigRightArm' );

In the animation loop, the rotation is then modulated:

if ( rightArm ) {
	
    rightArm.rotation.z += Math.sin( t ) * 0.005;

}
1 Like
3

Thanks so much! I really appreciate it. Can you tell me how you created this scene or model ? I can see it is from an example hosted on the site, but I was wondering if I can load any arbitrary model.

4

The soldier model is from: https://www.mixamo.com/

You should be able to use this approach for all types of skinned meshes.