Three.js rotation over it's own axis

Question

I've been trying to create a spaceship in a 3D space. It flies straight forward. You can change direction by rolling the spaceship and tip the nose up and down.

When I change the Z angle of the spaceship, it rolls as expected. When I change the X angle of the spaceship, the nose is tipped up and down. When I do both it doesn't work as expected.

It appears my spaceship is being rotated over the world's axis, rather than the axes of my spaceship. I mean, when an object gets rotated, so does it's axis' right? Well apparently not.

As usual, help is much appreciated.

Here is the demo that clearly doesn't work: http://www.timseverien.nl/random/ohnoez/

Answer 1

Check out Quaternions. In ThreeJS, the class you want to look at is THREE.Quaternion.

Quaternions are generally used in flight simulation style games, and allow you to rotate in the local space of the craft, without getting "gimbal lock". ( That's when two of your axes become parallel, and you lose a degree of freedom. )

This is a pretty good, and quite funny, explanation of quaternions: http://www.isner.com/tutorials/quatSpells/quaternion_spells_14.htm

I hope that puts you on the right track...

Answer 2

You don't have to understand quaternions for this - simply take a look here:

Three.js - Rotating a sphere around a certain axis

more than one simple solution!