How can I rotate my plane correctly?

[ferat]

Hey guys,

I'm trying to make a simple flight simulation, but I have some issues trying to rotate my plane. Currently, I have this code:

EDIT: I created a playground to exemplify better my problem: https://www.babylonjs-playground.com/indexStable.html#HT1PHY#5

var elapsed = engine.getDeltaTime() / 1000;

// handle keys
if(keysDown[87]) {
	// W, rotate in the negative direction about the x axis
	pitch += elapsed * turnSpeed;
}

if(keysDown[83]) {
	// S, rotate in the positive direction about the x axis
	pitch -= elapsed * turnSpeed;
}

if(keysDown[65]) {
	// A, rotate left
	yaw -= elapsed * turnSpeed;
	roll += elapsed * turnSpeed;
}

if(keysDown[68]) {
	// D, rotate right
	yaw += elapsed * turnSpeed;
	roll -= elapsed * turnSpeed;
}

var translationVector = new BABYLON.Vector3(0, 0, 1).normalize();
var rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(yaw, pitch, roll);

// Apllying translation and rotation to the plane
controlCraft.rotationQuaternion = rotationQuaternion;
controlCraft.translate(translationVector, elapsed + airSpeed, BABYLON.Space.LOCAL);

I want to rotate the plane ever considering its "Forward Axis", but when I rotate it to the left or right and press W/S, the pitch doesn't work correctly and the plane yaws, instead of pitching. How can I fix it? I'm trying to make it with Quaternions, but I don't know the correct path.

Thanks very much for the help!!

Edited November 8, 2018 by ferat
Adding a playground example

[ferat]

Flight movement solved in this playground: https://www.babylonjs-playground.com/#P394JW#3

Now quaternions make more sense for me ? I found that the problem I was facing is called "Gimbal Lock" using Euler Angles.

But I still have a small problem: when rotating the X axis using quaternions, the rotation breaks on 90 degress/radians and -90 degress/radians. To "solve" it, I limited the X axis rotation to a max of 85 degrees/radians.

Is there another way to avoid this issue? I noticed that this only occurs in X axis. Rotating on Y anz Z axis has no limitations and I can make full 360 degress rotations.

To reproduce the problem, please modify the line 73 to more than 90 degrees, Eg:

var maxPitchAngle = (120 * (Math.PI / 180));

Thanks for attention!!