Interpolate between different poses

Questions
,
1

Hi, I am making a interactive semaphore viewer. For this, I want to have different poses for the model. Does three.js already has a way to create different poses and then interpolate between them? Interpolating here means going from one pose to another. Doing it like this doesn’t look that good. I can make a hash map that stores rotations for different joints but it will again be messy in my opinion. Does threejs already has anything to tackle something like this?

var leftArm = model.getObjectByName( 'mixamorigLeftArm' );
var leftForeArm = model.getObjectByName( 'mixamorigLeftForeArm' );
var leftHand = model.getObjectByName( 'mixamorigLeftHand' );

var rightArm = model.getObjectByName( 'mixamorigRightArm' );
var rightForeArm = model.getObjectByName( 'mixamorigRightForeArm' );
var rightHand = model.getObjectByName( 'mixamorigRightHand' );

var degToRadian = Math.PI / 180;

leftArm.rotation.z = 80 * degToRadian;
leftArm.rotation.y = - 30 * degToRadian;
leftForeArm.rotation.z = 30 * degToRadian;
leftHand.rotation.y = 45 * degToRadian;

rightArm.rotation.z = 80 * degToRadian;
rightArm.rotation.y = 30 * degToRadian;
rightForeArm.rotation.z = 30 * degToRadian;
rightHand.rotation.y = - 45 * degToRadian;

Here are the poses I need to add: https://as1.ftcdn.net/jpg/00/86/68/48/1000_F_86684826_7o9n4OOWl6KwnFZglcIsfSB2DFgz6FL3.jpg

2

You normally want to use morph target animation for this use case. This is something three.js does support. Similar to this example you create one morph target for each pose. You can then use the respective influence value to determine how much the morph target influence the geometry.

Animating a skeleton (or its bones) automatically from on pose to another is not supported. You would have to manually create keyframes for this use case. Or animate the bones with another library like GSAP.

3

I like the idea of animating the skeleton. What will the workflow for animating using GSAP? Currently, I was creating a quaternion (using target rotation data) to slerp to the target rotation. Is this what I would have to do with GSAP too?

4

When rotating position or scale vectors, the following fiddle shows how to do this with GSAP:

Notice that you don’t want to animate rotation with GSAP. The slerp method of the quaternion class is the preferred option for this. Or even better Quaternion.rotateTowards().

1 Like
5

Okay thanks for demo, do you think it is possible to make the poses in blender and them lerp between them in threejs?

6

Well, this depends. Even if it’s technically possible it’s questionable how good the result will look like. I guess you have to try it out and see how it goes.

7

Okay, how can I make different poses in blender and then be able to interpolate between them?
My take on it would be to create keyframes for different poses and then it to interpolate from one pose to another? I am not sure if this will work.