[solved] setFromEulerAngles is not setting rotation correctly


I have a camera that I want to toggle position and rotation on click of a button. The position toggles just fine, but the setRotation is way too confusing. When I do setRotation with angles (0,90,0) in initialization it works fine (I got this number from x,y,z of entity from editor).
But the same code on click of a button rotates to a completely weird angle. What am I missing ?

    this.app.root.findByName('fpCamera').setRotation(new pc.Quat().setFromEulerAngles(0, 90, 0));


I have a feeling these are not absolute values and something relative is going on, but it’s not very clear how.

I have also tried setLocalEulerAngles but doesn’t work on an absolute value basis.


The fly-camera.js is changing the rotation every frame with it’s own internal rotation values so it any external change to the rotation of the entity is going to get overwritten in the next update. Rather than trying to change the entity rotation directly, you be best off going through the fly-camera.js script properties.


var flyCameraScript = this.app.root.findByName('fpCamera').script.flyCamera;
flyCameraScript.ex = 0;
flyCameraScript.ey = 90;

(I also recommend that you keep with using the same ‘space’ for rotation and positional. In the update function of the fly-camera.js, it uses localRotation and localPosition but where you are attempting to set the rotation in other places in world space. In this project, it won’t matter but it’s something to consider if you do this with others).


Ah, gotcha. Damn this killed many hours of mine :frowning: !
Thank you soo much.

“I also recommend that you keep with using the same ‘space’ for rotation and positional”. Do you mean I should not use setLocalEulerAngles because it operates on parent and instead use setEulerAngles api, which operates in world space ?


The fly-camera is using local space and some of the code you have added is in world space. Neither affect the parent.

The issue could be that if the parent was being positioned/rotated, using local or world space on the child would make a difference in the result.


(while not creating a new post, i keep within same issue/problem)

When I write:

var posCam = new pc.Vec3(2.52, 0.266 , 1.598); var rotCam = new pc.Quat(4.81, 83.53,0);
this.cameraEntity.setLocalPosition(posCam.x, posCam.y, posCam.z);
console.log(this.cameraEntity.getLocalPosition()+’ - '+ this.cameraEntity.getLocalEulerAngles());

I get this output: [2.52, 0.266, 1.598] - [NaN, NaN, NaN]


You are creating a new Quaternion here but using it to set euler angles.

In the docs: https://developer.playcanvas.com/en/api/pc.Entity.html#setEulerAngles

setLocalEulerAngles takes a vec3 or 3 separate float values.