CODEWITHSUNDEEP
javascriptmath3dthree.js
ducsuus
ducsuus

Reputation: 185

Three.js - When the camera is rotated at a 90 degree angle, why does rotating on the x axis and z axis have the same effect?

I am building the bare bones of a first-person-shooter game so I can understand how everything works, mostly the 3D math.

I have encountered a problem which I can only replicate using Three.js.

When the camera is rotated along the y axis by 90 degrees (looking left), rotating on the x axis and z axis has the same effect, it appears to "roll" the camera...

Why is this happening? Why wouldn't rotating by the x axis cause the camera to "roll" and rotating by the z axis cause the camera to look up and down?

I have an example of this happening, the "problem" is not specific to this example (use the up and down arrow keys to rotate):

Rotating by the x axis: http://duct.tk/gl/minimal/x.html Source: http://duct.tk/gl/minimal/js/code-x.js

Rotating by the z axis: http://duct.tk/gl/minimal/z.html Source: http://duct.tk/gl/minimal/js/code-z.js

The only line changed in both examples:

When rotating by the x axis:

camera.rotation.x += degToRad(upRot);

When rotating by the z axis:

camera.rotation.z += degToRad(upRot);

Upvotes: 0

Views: 1992

Answers (1)

ducsuus
ducsuus

Reputation: 185

So it turns out there is a very simple fix to the problem.

Adding the following line of code after creating the camera:

camera.eulerOrder = "YXZ";

The problem is caused because of the way Three.js rotates the camera, or any other object. Three.js rotation is relevant to the other axes of the object, meaning that the z axis (by default) will be dependent on the y axis, which will be dependent on the x axis.

The default eulerOrder is "XYZ". This meant that rotating the x axis instead of the z axis when the y axis hadn't been changed had no different effect.

By changing the eulerOrder to "YXZ", first we rotate side-to-side, then we rotate up and down and finally we roll giving the desired effect for a first person shooter.

Thanks to WestLangley and dust_ in the Three.js IRC.

Upvotes: 1

Related Questions