Tweenjs axis jump and blender export

Questions
1

Hi there,
so here is my situation.

I export a GLTF Scene from Blende, this has some nodes where my camera is suppoed to move.
So naturally the nodes are exported with position and rotation.

Now I habe my scene camera in Three and move it with TweenJs like that:

      new TWEEN.Tween(camera.rotation)
      .to({y:scene.target_camera.rotation.y,x:scene.target_camera.rotation.x,z:scene.target_camera.rotation.z}, duration)
      .start()

It Kinda Works, for some of the Position. But for others it performs annyoing axis jumps.
As I understand, and want, it the tween always tales the shortest route.
However, When I go from 0° to 47° … it works like a charm.
Now when I go from the 47° to 112° it flips weirdly and takes the loung route.

So I know of course, that the system works with radians instead of degree and that all of that is converted by export. When I convert Dregree_to_Radians on the values I do not get the correct degrees I have set in Blender.

The Node that is supposed to have a 112° in Blender, now has a somewhat 68° something degree in Three …

What is the solution to that problem and what causes it?

I have indeed found hacky workaround and I am not satisfied.
So it works like that:
In Blender I have a script that exports the gltf and it takes the Degree values and stores it in a custom property.

Now in Threejs I can read that property and I Tween a custom attribute of the camera, instead of its rotation and than set the rotation from that custom attribute.
It works… but it is not excact. It is jiggly and wiggly and ugly… So it is not THE Solution…

Any Ideas, what I am on to here?

2

I hope someone may provide more detailed explanation (as I’m experiencing severe zeitnot right now). You are trying to make a transition between two rotations, represented as Euler angles. Tween.js does lerp (linear interpolation) … and rotations hate lerping of Euler angles. My suggestion is to use quaternions and to slerp (spherical linear interpolation) between them.

More info at Wiki: [slerp] and at Three.js: [slerp].

1 Like
3

Well The problem starts even before I Tween…

The Rotation in Blender for the Z Axis is :

112°

now everything exported and now Y is Z and everything is in radians now.

So Y´s Radians are now: 1.1868239597870514

I convert this value with a radians_to_degree function and
now instead of 112° what I get is : 68.00000392080217° which is, from what I can tell not 112°

So … it is messed up even before I Tween… :frowning:

this is my radians to degree function:

function radians_to_degrees(radians)
{
  // Store the value of pi.
  var pi = Math.PI;
  // Multiply radians by 180 divided by pi to convert to degrees.
  return radians * (180/pi);
}
4

Ok,
I think I found a solution by using a different approachof my workaround.

So The Workwround is:

  1. Blender: Export a custom propety that saves the Degree values (Swtitch z and y)
  2. Three: Add a Degree attribute to the scene camera
  3. Three: Tween the degree atribute and not the rotation to the targets degree property
  4. Three: Convert the degrees to radians and set the rotation of the camera. But do in .onUpdate() of the Tween and NOT in the animation loop.

I think the error was, that I set the rotation in the animation loop and not in the .onUpdate() function… not it seems to work!

5

An approach that I’ve used in the past is to animate a cube instead of the camera, exporting that animation, and then playing that animation back on the camera.

You’re doing a lot of work trying to sideload information from blender to threejs…

The gltf export already takes care of switching the Up axis from blender (Z up) to threejs (Y=up). (I suspect this is the source of your axis flipping issue, that the objects.up vector is not set to 0,0,1, but rather the default up vector of 0,1,0.
https://threejs.org/docs/#api/en/core/Object3D.up

But that all said… if you can do your animation purely via the normal animation mechanisms, you’lll end up writing less code (on both ends) and it will probably be much more robust.

1 Like