Quaternion Camera Tween

Hey all. I know I’ve solved this issue before so it must be staring me right in the face. I am trying to tween the rotation of my camera. My workflow for doing this is doing what I want with the camera in the viewport, writing down the Euler Angle of that rotation, then resetting the camera back to its initial position and then putting the Euler rotation into this website: https://www.andre-gaschler.com/rotationconverter/

For some reason though, my camera does not settle to the correct rotation whenever I do this tween:

    this.entity.setLocalEulerAngles(-53.76, 90, 0);
    this.tween = this.entity.tween(this.entity.getLocalRotation())
        .to(new pc.Quat( 0.0764386, -0.9212338, 0.2334502, -0.3016396 ), 1.5, pc.QuadraticInOut)
        .delay(0)
        .loop(false)
        .yoyo(false)
        .start();

There is not another tween happening, and I have tried both radians and degrees. I think I am doing something wrong with attempting to plug in the correct quaternion. Let me know if anyone has any ideas or solutions. Thanks!

Hi @Jake_Johnson,

Try using .rotate() instead of .to() and instead of tweening getLocalRotation() use getLocalEulerAngles()

Here is the documentation from the Git Repo: https://github.com/playcanvas/playcanvas-tween#usage

1 Like

@eproasim, since the target tween object is a Quaternion, then using .to and reading .getLocalRotation() should be “correct”.

@Jake_Johnson the .rotate method should be used when using Euler angles as values between which the tween should interpolate. All other objects should use .to, which interpolates every property of the object to the new value. If you interpolate a Quaternion like that, though, it will only have a correct beginning and end state, while anything in between could be either skewed or, if you are lucky, correct. As @eproasim suggested, you should tween Euler angles (as target value) and use .rotate to interpolate between them.

If you want to operate on Quaternions, then you should do it manually, without Tween library. Example:
https://playcanvas.com/project/711986/overview/quaternion-rotation-example

1 Like

This seems like a useful feature acctually. I made a PR to allow the target to be a Quaternion too:

2 Likes