javascript - Three.js rotation over it's own axis - Stack Overflow

admin管理员组

文章数量:1399823

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: /

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/

• javascript
• 3d
• three.js

Share Improve this question Follow asked Oct 18, 2012 at 18:32 Tim S.Tim S. 13.8k99 gold badges4848 silver badges7373 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 bee parallel, and you lose a degree of freedom. )

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

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

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

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!

本文标签： javascriptThreejs rotation over it39s own axisStack Overflow