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/

null · Accepted Answer · 2020-08-24 02:38:38Z

5

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...

EDIT: Isner.com has long been offline, but I found the above tutorial on the Wayback Machine: https://web.archive.org/web/20120601095457/http://www.isner.com/tutorials/quatSpells/quaternion_spells_14.htm

edited Aug 24, 2020 at 2:38

answered Oct 19, 2012 at 4:07

null

1,2071 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Akers Over a year ago

Domain is down :(

null Over a year ago

@AlexsanderAkers - I found it on the Wayback Machine: web.archive.org/web/20120601095457/http://www.isner.com/…

B M · Accepted Answer · 2014-04-08 17:58:43Z

2

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

Three.js - Rotating a sphere around a certain axis

2 Comments

Tim S. Over a year ago

For Googlers: Object3D.rotateOnAxis( axis, angle );

B M Over a year ago

Yes, either that or: quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation ); object.rotation.setEulerFromQuaternion( quaternion );

Collectives™ on Stack Overflow

Three.js rotation over it's own axis

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related