[SOLVED] Unexpect eulerAngles after calling entity.lookAt

Help & Support
1

I create a demo project: https://playcanvas.com/project/486629/overview/camera-path-demo
Live demo: https://playcanv.as/p/DGGK6n8d/

What I want to do is moving the camera by a defined path. The user can stop it, and then look around. You can toggle the camera movement by clicking the button on top right. The user can only look around after the camera stop.

Here is the implementation of the “Look Around” feature:

MouseHandler.prototype.onMouseMove = function(e) {
    if (this.cameraPath.enabled) return;
    if (e.buttons[pc.input.MOUSEBUTTON_LEFT]) {     
        this.eulerAngles.x -= e.dy * 0.25;
        this.eulerAngles.y -= e.dx * 0.25;
    }
};

MouseHandler.prototype.update = function(dt) {
    if (this.cameraPath.enabled) return;
    this.entity.setEulerAngles(this.eulerAngles);
};

Here is the path I defined:

image.png568×570 46.2 KB

As you can see, there are green path and red path.
When the camera move to the green path, stop it by clicking the top right button, and click down to rotate the camera, the rotate orientation is expect.
However, when the camera move to the red path, stop it and click down to rotate the camera, the rotate orientation is unexpect.

I’ve check the camera’s eulerAngles, it is [0, x, 0] at the green path, but [180, x, 180] at the red path.

How can I solve this problem?

2

Your best option in this case is to use quaternions to rotate with the mouse instead of directly using euler angles. All the rotations of entities are represented internally as quaternions and they don’t always give very user friendly euler angles to work with.

1 Like
3

Do you mean I need to use quaternions to implement the “Look Around” feature?

4

Yes, there’s a related example here: https://developer.playcanvas.com/en/tutorials/rotating-objects-with-mouse/

Either that, or not use the lookAt function and making your own that uses euler angles.

1 Like
5

Thanks for your help, you save my day!
It works after I change the implementation of onMouseMove:

MouseHandler.horizontalQuat = new pc.Quat();
MouseHandler.verticalQuat = new pc.Quat();
MouseHandler.resultQuat = new pc.Quat();
MouseHandler.prototype.onMouseMove = function(e) {
    if (this.cameraPath.enabled) return;
    if (e.buttons[pc.input.MOUSEBUTTON_LEFT]) {
        var horzQuat = MouseHandler.horizontalQuat;
        var vertQuat = MouseHandler.verticalQuat;
        var resultQuat = MouseHandler.resultQuat;

        horzQuat.setFromAxisAngle(this.entity.up, e.dx * -0.3);
        vertQuat.setFromAxisAngle(this.entity.right, e.dy * -0.3);

        resultQuat.mul2(horzQuat, vertQuat);
        resultQuat.mul(this.entity.getRotation());

        this.entity.setRotation(resultQuat);
    }
};