Graphics Reference
In-Depth Information
Applying matrix transformations
In the first couple of recipes in this chapter, we used the
rotation
property and ap-
plied translations to get the desired rotational effect. Behind the scenes, Three.js uses
matrix transformations to modify the shape and position of the mesh or the geometry.
Three.js also provides the functionality to apply custom matrix transformations directly
to a geometry or a mesh. In this recipe, we'll show you how you can apply your own
custom matrix transformations directly to a Three.js object.
Getting ready
To view this recipe in action and experiment with the various transformations, open
the
02.15-apply-matrix-transformations.html
example in your browser.
You'll be presented with the following simple Three.js scene:
In this scene, you can use the menu on the right-hand side to apply various trans-
formations directly to the spinning cube. In the next section, we'll show you the steps
you need to take to create this yourself.
How to do it...
Creating your own matrix transformation is very simple.
1. Firstly, let's look at the code that gets called when you click on the
doTransla-
tion
button:
