Is there something wrong with setLocalEulerAngles ?!

Hey there! :wink:

It’s me again with a little annoying thing about the setLocalEulerAngles function. I don’t get why this is happening but if you use this code you should be able to click the left mouse button and just in this case you can look around in the scene. To see what the problem is you should have something like a coordinate system setting, where you can see the small strange behavior.
If the mouse is moved and you let the left button go (mouse up function) you should switch back to the origin position of the camera. Works so far BUT now we get to the point.

First of all the var res = -6; was to adjust the strange behavior at the start. But if I do this at the start, the behavior will end up permanently with every update of the scene. So i decided to change this for the update, to get a nice looking view at the relevant points of the script.

It looks like the camera perspective rotate a little on the x axis and that should not happen. I have no such settings in the scene. All is very static, clean settings I would say. The camera is pointed at the pEn entity, which has anything on 0 accept scales on one. The pEn and camera are both in a group called Player and the state of the Player entity is set on 1x, 2y, 7z with no rotation ore something else. The only rotation is on the camera itself and the settings for the cam are 0x, 1.8y, 3z. The rotation is -15x and that’s it. A straight view on our pEn dummy in the Player group.

But since i’ve added the EulerAngles its messy. What happen there?!
I switched by the way in the mouse move function the x and y axis to get the mouse directions in the right way. But there is no problem with atm.

Hope you can help me out. ^^

var CamFlight2 = pc.createScript('camFlight2');
var res = - 6; // small setting to adjust the cam at the start
var yOrg = 1.8; // original y at start
var zOrg = 3; // original z
var xRotOrg = -15; // original x rotation

// The player
CamFlight2.attributes.add("pEn", {type: "entity", title: "Player entity"});
// Cam distance to player
CamFlight2.attributes.add("distance", {type: "number", default: 4, title: "Cam distance to the player"});
// Script attributes to control the sensitivity of the camera look with mouse
CamFlight2.attributes.add("mLSen", {type: "number", default: 0, title: "Mouse look sensitivity"});

// initialize code called once per entity
CamFlight2.prototype.initialize = function() {
    
    this.startRotation = this.entity.getLocalRotation().clone();
    this.startPosition = this.entity.getLocalPosition().clone();
    
    this.eulers = new pc.Vec3();
    
    this.addEventCallbacks();
};

// update code called every frame
CamFlight2.prototype.update = function(dt) {
    
    if (!this.pEn) {
        return;
    }
    
    this.eulers.Nx = this.eulers.x + xRotOrg;
    this.eulers.Ny = this.eulers.y + res;
    this.eulers.Nz = this.eulers.z + zOrg;
    this.entity.setLocalEulerAngles(this.eulers.Nx, this.eulers.Ny, this.eulers.Nz);
    
};

CamFlight2.prototype.addEventCallbacks = function() {
    if (this.app.mouse) {
        // Listen for mouse move events
        this.app.mouse.on(pc.input.EVENT_MOUSEDOWN, this.onMouseDown, this);
        this.app.mouse.on(pc.input.EVENT_MOUSEUP, this.onMouseUp, this);
    }
};

CamFlight2.prototype.onMouseDown = function ( event ) {	
        var canvas = this.canvas;
        switch ( event.button ) {
             case pc.MOUSEBUTTON_LEFT:
                this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this); // works fine
                break;
             case pc.MOUSEBUTTON_MIDDLE:	 
                break;
             case pc.MOUSEBUTTON_RIGHT:
                break;
        }
	};

CamFlight2.prototype.onMouseUp = function ( event ) {
      switch (event.button) {
             case pc.MOUSEBUTTON_LEFT:
                this.eulers.x = this.startPosition.x;
                this.eulers.y = this.startPosition.y; 
                break;
             case pc.MOUSEBUTTON_MIDDLE: 
                break;
             case pc.MOUSEBUTTON_RIGHT:
                break;
                
       }  
        
    };
    

CamFlight2.prototype.onMouseMove = function (e) {
    if (this.onMouseDown && e.buttons[0]) {
        this.eulers.y -= this.mLSen * e.dx;  //this.eulers.x before
        this.eulers.x -= this.mLSen * e.dy;  //this.eulers.y before
    } else {
        return;
    }
};

We need a link to your project to have a look. Also it looks like in the onMouseDown method everytime the user presses the left mouse button you add another handler for the mouse move event which means you are constantly adding new handlers for moving the mouse. Might be the issue there…

Is it not how it should be done?! I mean, I want to move around later, then just look when I need to, not all the time while I move in the setting. Its just a part of the code from the Fps Movement Tutorial. I just used the startRotation and startPosition to get the point of view back to the “front” by letting the button go.
There also no errors in the code just strange violations. But they are also in the Tutorial. Could this affect the angles?!

I also used the 360 Tutorial version and it was the same, that’s why I then used the FPS Tutorial to test it with this code. But its the same there. When I now open the DevTools and look for the violations there are more than one in the fps and my version, but just one in the 360° Tutorial version. But that changes not the issue with the angle itself. There is something wrong I think but you cant see it if you don’t make the whole thing static.

https://playcanvas.com/project/467534/overview/positionercam

You should remove the listener for mousemove in onMouseUp, e.g.

this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);

So it seems to work in general - is the problem that when you release the mouse the camera snaps back to its initial rotation? If that’s the problem then removing these lines from onMouseUp should fix it:

this.eulers.x = this.startPosition.x;
this.eulers.y = this.startPosition.y; 

Sorry misread your question. So the problem is that the rotation is a bit off? Maybe set zOrg to 0?

Maaaan i got it! It was startPosition and not Rotation ive used… :joy:

                this.eulers.x = this.startPosition.x;
                this.eulers.y = this.startPosition.y;

has to be like this here

            this.eulers.x = this.startRotation.x;
            this.eulers.y = this.startRotation.y;

Hell im so blind sometimes! But thanks for looking at it.