How to use Quaternions in Three.js?

Hello everybody. I know this is a broad question, and perhaps I shouldn’t have asked my first question, in this forum, like this. However, simple as it seems to most of you, I’m looking for a thorough tutorial on the usage of quaternions in three.js. I have read almost all the books about three.js, and none of them explained its true capabilities. Although there are some examples out there, I’m looking for a complete tutorial (written/video). It is the only subject in 3d graphics that really bogs me down.
So I’d appreciate sharing any good resources on the subject. If the resource in-question is not a free tutorial over the web, then a link to the paid book/document would also suffice.

This is one of the more popular explanations of Quaternions, I think: All of the same information applies to quaternions in three.js.


Because I was also very busy with this topic some time ago, I created my own visualization. Maybe it is a little help.

see Quaternion - Axis, Angle Visualization


The book 3D Math Primer for Graphics and Game Development provides a great chapter about quaternions and also explain the pros and cons compared to other representations of 3D orientation.

Understanding quaternions will allow you to use them in any 3D or game engine.


@donmccurdy, thanks a lot for the link. I had recently finished all the videos of their YouTube channel on linear algebra. However, your link contained some interactive web-apps which look nice. You know, the bad thing about quaternions is that they could not be visually perceived. Anyway, thanks for the great link.

Thank you very much @Mugen87. The good thing was that I got the book. I read its 8.5 section which is all about quaternions. I have to admit that Quaternions look like a Math abomination when first visited by a mortal mind like mine.
Nevertheless, as you’ve mentioned, the book’s explanation is excellent, and, at least, now, I have some solid understanding of the subject. In addition to the pure math-related part, I’m also looking for some examples which incorporate the quaternion rotations and any other of its applications in Three.js. Usually, when I encounter a new subject, I start with implementing the basics instead of jumping to the advanced code right off the bat. So, it’d be of great help, if there are some basic, intermediate and advance examples of quaternions in Three.js code. Could you please provide me with some educative examples?

Oh, that was great. I was fiddling with the colorful mannequin, and it was a great job in quaternion hinting. I will always refer to this when I\m in need.