Graphics Reference
In-Depth Information
var rotationMatrix = new THREE.Matrix4(
c, 0, s, 0,
0, 1, 0, 0, -s, 0, c, 0,
0, 0, 0, 1
);
cube.geometry.applyMatrix(rotationMatrix);
cube.geometry.verticesNeedUpdate = true;
}
In this recipe, we created the matrix transformations from scratch. Three.js, however,
also provides some helper functions in the
Three.Matrix4
class that you can use
to more easily create these kinds of matrices:
•
makeTranslation(x, y, z)
: This function returns a matrix, which when
applied to a geometry or a mesh, translates the object by the specified x, y,
and z values
•
makeRotationX(theta)
: This returns a matrix that can be used to rotate
a mesh or geometry by a certain amount of radians along the
x
axis
•
makeRotationY(theta)
: This is the same as the previous one—this time
around the
y
axis
•
makeRotationZ(theta)
: This is the same as the previous one—this time
around the
z
axis
•
makeRotationAxis(axis, angle)
: This returns a rotation matrix based
on the provided axis and angle
•
makeScale(x, y, z)
: This function returns a matrix that can be used to
scale an object along any of the three axes
See also
We've also used matrix transformations in other recipes in this chapter:
• In the first two recipes,
Rotating an object around its own axis
and
Rotating
an object around a point in space
, the actual rotation is applied using a matrix
transformation
• In the
Rotating an object around its own axis
recipe, we used the helper func-
tions from the
THREE.Matrix4
object to rotate an object around its axis
