How to rotate euler angles smoothly

This is not a question that I’m going to ask but instead explain how to do it properly, because I struggled to do it for a long time, so I figured it’s the best share it how I did it.

First of all, you can’t rotate Euler angles, you need to do it with Quat, but if you want to rotate an object to an Euler angle smoothly, you need to convert it to the Quat first.

PlayCanvas has a function setFromEulerAngles for Quat. But this function’s first param doesn’t take a vector, so you need to set x, y, z one by one in args.

var nextEulerAngles = new pc.Vec3(59.85, 55.11, 64.53);

var rotation = this.entity.getRotation();
var quat = rotation.slerp(
    rotation,
    this.entity.getRotation().clone().setFromEulerAngles(
        nextEulerAngles.x,
        nextEulerAngles.y,
        nextEulerAngles.z
    ),
    0.1
);
    
this.entity.setLocalRotation(quat);

Here is the project link : PlayCanvas 3D HTML5 Game Engine

3 Likes

Nice, I am doing something similar quite often with smooth rotations. Quaternions can be difficult to understand in the beginning but as soon as you get the grasp of them being expanded vectors they are quite powerful.

Thanks for sharing Cem!

1 Like

Thanks for sharing i was doing it with tweening but this one is nicer

1 Like

Hi, mathematically speaking, Euler angles ain’t actually a good way to represent space directions (though intuitive to human). To accomplish your task, you’ll need something called SLERP. You can write a convertion function to convert Euler angles to quaternions or rotation matrices, then it’d be easy to create a continuous rotation by SLERPing between directions.