Quaternion premultiply method in threejs
The premultiply method of the quaternion class in threejs comes in handy when I find myself in a situation in which I need to preform not one but two rotations. Say that I have a sphere and I want to rotate the sphere on an axis that is say 45 degrees so that the top and bottom of the sphere geometry is aligned with the sphere, and on top of that I want to rotate the sphere on this axis. So in a way I actually have two axis vectors and two angles. One set of axis and angle is aligned with the geometry to begin with, and the other is to adjust the geometry to an additional orientation that I want. In this post then I will be going over a number of code examples that make use of this method as this is a major part of working with quaternion objects for setting the orientation of objects.
The premultiply quaternion method and what to know first
Start out with Object3d.lookAt if you are new to rotations
If you have zero experience when it comes to rotations of objects in threejs, it might be best to start out with using the object3d look at method. This is a very easy to use tool for setting rotation, and also in many cases it will work just fine when it comes to setting the orientation of an object. I think it is best to always start out with the most basic tool, and only bother getting into complex solutions such as quaternion objects when I find myself in a situation in which I have to.
There is also Object3d.rotation and the Euler class
If the look at method is not cutting it there is then looking into the rotation property of the object3d class, and with that the Euler class that is the value of the rotation property. Euler angles are must easier to work with that quaternions, but in some situations they might prove to be an oversimplification of the situation which would lead one to get into quaternion objects.
There is my main blog post on quaternion objects
There is checking out my main blog post on quaternion objects to get a general overview of the quaternion class as a whole. There are a whole lot of other methods in the class as well of course, so this post would be better for starting out with quaternion in threejs. The post is also just simply the post that has received the most time and attention with this subject as well, and it might be a while until I get around to editing this post.
Source code examples are up on Github.
The source code examples that I am writing about in this post, as well as the examples for my many other posts on threejs, can be found in my test threejs repository on Github. It might be best to clone down that repo and start the server as a way to get things up and ruining on your end as well. I do try my best to keep these examples copy and paste friendly, but there are a lot or reasons why that will not always work out, it part because threejs moves so fast in terms of development.
Version Numbers matter
When I first wrote this post I was using r146 of threejs and the examples here where working just fine on my end with that revision number. However code breaking changes are made to the library all the time.
1 - Basic examples of the premultiply method in the quaternion class
For this section I will be starting off with a few basic examples of the premultiply method of the quaternion class in threejs. I will be doing what I can to stay clear of doing anything to complex then, and for the most part these will be examples that focus mainly on just the premultiply alone. However I will still of course need to make use of many other threejs features of the quaternion class such as the set from axis angle method, as well as various other threejs features outside of the class.
1.1 - Basic example of premultipy
The general idea here is that I have not one, but two quaternion objects when it comes to a very basic getting started example at least. I can then use the copy method of the quaternion class to copy one quaternion object to the quaternion object of an object3d class based object such as a mesh object to set the first rotation. Then I can call the premultiply method and pass the next quaternion object as well to get the final rotation that I want.
I could also just directly call the set from axis angle method off of the quaternion of the mesh object, and then just have one stand along quaternion object. In any case the deal here is to think in terms of what needs to happen in the form of two or more rotations to get to the desired end result.
1.2 - The order of the rotations does very much matter
The order of the rotations does very much matter when using the premultiply method. If I have two quaternion objects, one of which I use for the copy method, and another for a premultiply method call after, the order in which the objects are passed will result in two differing orientations depending on which one I use first.
In some cases I might want to do things in one order, but then in other cases I might want to do the other. There is making use of other quaternion methods such as the clone and slerp method to create another set of qunaterions that can be impacted by an alpha value to switch between the two. However getting into that is a more advanced topic that I will be getting into later in this post with one of my animation loop examples.
1.3 - It is possible to preform many rotations by calling premultiply over and over again
For this example I am preforming a whole bunch of rotations one after another. Well maybe not that many just three for started but the general idea is there. I can preform as many rotations as I need over and over again to get an object to face any direction that I want or need which is great.
2 - Animation examples
For this section I will be going over at least a few if not more animation examples that will help to really gain a sense of what the deal is with the premultiply method. The main focus with these examples should be on how the premultiply method can be used to preform not one but many rotations on an object. However I am also doing a whole lot more here when it comes to other things that come up when making these kinds of examples. There is making examples where I am thinking in terms of making a video in which case they do not have to respond to user input, however there is also making examples that do respond to user input as well. At this time I am combining both of these kinds of examples together into one section.
2.1 - Rotate sphere on axis, with premutiply and slerp
For this animation loop example I wanted to have a nice little project that really helps me get a good feel for what the premultilly method is all about. While I am at it also gain a better sense of what the slerp method can do also. You see there is of course the order in which I use the quaternion objects, so it would be nice to slerp between these two so I can switch back and forth between these two different orders. As such I can switch between having the sphere rotate on an axis, and rotating around the axis.
2.2 - Animation loop of three spheres
For this animation loop example I wanted to make something that involves three sphere objects two of which are of a single state of a quaternion object, while the final one is the result of a premultiply call involving the other two.
3 - Conclusion
The premultiply method is one or the core set of quaternion methods that I will want to work with in order to use these kinds of objects to set orientation of object3d class based objects in threejs. There is knowing how to set the state of just one of these quaternion objects first and foremost though and for that there is the set from axis angle method. There is also knowing how to just directly mutate the public values of one of these objects but doing that is not as easy as what one might be used to with Euler objects. Anyway once one knows how to set the orientation of one quaternion object, there is doing so with another, and then using both of those to set an orientation of yet another and one way to do so is with premultiply.