Applying matrix transformations

In the first couple of recipes in this chapter, we used the rotation property and applied 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 transformations 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...