Twisting vs rotating of bones

I am trying to animate an avatar based on input from a gyroscope. Something similar to a golf swing monitor. I have loaded an avatar from Avaturn that is in a T pose and am trying to position it into an initial pose. After that I will simply use the gyro data to move the arms and hands. After hours of effort with the assistance of ChatGPT4 and Claude.AI I have not even managed to get it into the initial pose.

In Blender when I rotate a bone around x y or z that is what happens. If I rotate an arm around Y from the initial T pose, the arm swings down until it is hanging down vertically and resting against the side of the avatar. When I open the model in THree.JS and try to rotate, x and z work fine but y doesn’t. Instead of rotating the arm down it twists the arm around its longitudinal axis, so the palm ends up facing backwards.

AI talks about local bone coordinates and global coordinates and tried unsuccessfully for hours to give me code that would rotate the arms around the y axis to bring them down by the models side.

It seems to me that there are really 4 axes for a bone movement, x, y, z rotation and twist. Threejs seems to drop the Y capability and substitute twist.

The added complication is the effect of moving other parts of the model. In Blender if I bend the model forwards from the waist, I can still rotate the arms around their x y and z axis as before. With threejs and javascript, once I have tilted the model forwards, the standard rotations of the arms no longer work. They produce all sorts of strange results. Am I missing something fundamental here?

Three.js uses a different coordinate system than Blender, so you’ll get different results if you try to use the same axis and values.

  • Three.js is Y up
  • Blender is Z up

The problem you’re trying to solve is Inverse Kinematics, this example should be handy.

And that’s the extent of my knowledge, good luck!

1 Like

I would suggest that instead of trying to hand animate bones.. simply animate the exact motion in blender the way you want it to work, exported as an animation.. then just use the gyro input to control the time of the animation in threejs. This way you can have way more complex and fluid motion, but still drive it simply with a single value. You CAN achieve this by hand rotating bones, but it’s a nightmare and very brittle. doing real Kinematics is Hard, and if you’ve never done it before, it’s even harder.. (I have the scars to prove it.)

That would work perfectly thanks. I only have to animate the backswing then play it in reverse for the forward swing. For a short swing that does not go back all the way I just reverse the animation sooner. I think this will be much easier.

1 Like