Slerp rotation direction

Hi, can we control the rotation of slerp? I want to rotate the box using slerp by clicking the box, the issue is it was rotating in the other direction. PlayCanvas | HTML5 Game Engine

It may be a bit complicated for slerp to control the rotation of the box through quaternions. Perhaps you can try using lerp to rotate the box.Vec3 | PlayCanvas API Reference .
You can fill in your current rotation value and final rotation value in LERP,if you want to rotate in a controllable time, you can add tweet.js outside of the lerp.Using the Tween library | Learn PlayCanvas

Slerp is an rotation interpolation between two rotations. So if it’s rotating incorrectly, it’s likely that the start/end rotation is incorrect

(Project is private)

Yes, you can control the rotation of slerp in PlayCanvas. To rotate the box using slerp, you can add an event listener to the box that listens for a click event. When the box is clicked, you can calculate the quaternion rotation between the box’s current rotation and a target rotation using pc.Quat.slerp.

To make sure the box rotates in the desired direction, you can calculate the shortest path between the two rotations by negating the target rotation if the dot product between the current and target rotations is negative. Here is some sample code that demonstrates this approach:
Here is the code (template example)

var box = // Get a reference to the box entity

box.element.on('click', function () {
    // Define the target rotation
    var targetRotation = new pc.Quat().setFromEulerAngles(0, 90, 0);
    
    // Calculate the quaternion rotation between the current and target rotations
    var currentRotation = box.getRotation();
    var dot = currentRotation.dot(targetRotation);
    if (dot < 0) {
        targetRotation = targetRotation.clone().mulScalar(-1);
    }
    var rotation = new pc.Quat().slerp(currentRotation, targetRotation, 0.1);
    
    // Set the new rotation on the box
    box.setRotation(rotation);
});

In this code, you first get a reference to the box entity and add an event listener to its element property that listens for a click event. When the box is clicked, you define the target rotation that you want the box to rotate to. You then calculate the quaternion rotation between the current and target rotations using pc.Quat.slerp.

To ensure that the box rotates in the shortest direction, you calculate the dot product between the current and target rotations. If the dot product is negative, you negate the target rotation before passing it to pc.Quat.slerp.

Finally, you set the new rotation on the box entity using box.setRotation. You can adjust the slerp factor (0.1 in this example) to control the speed of the rotation.

1 Like

https://playcanvas.com/editor/project/1056857

How do I repro the issue and what are you expecting compared to what you are seeing?

I’ve simplified the project to show how it can be done: https://playcanvas.com/project/1058006/overview/f-rotate-test

TLDR, getRotation() returns a global reference to a temp variable in the engine that contains the result. You will need to clone() it or copy it to keep the current values over the application lifetime. Eg storing the start and end rotation of entity.

I just want the cube to rotate in the same direction when slerp is triggered, I mean the cube is now rotation clockwise, we want to go to specific rotation in clockwise motion as well, thanks

You can adapt my forked project to suit your needs of the specific rotation you need. What I posted is how to use the slerp function correctly with starting and end rotation.