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

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:


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.

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.

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

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.

The soldier model is from:

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