Graphics Reference
In-Depth Information
this.doTranslation = function() {
// you have two options, either use
the
// helper function provided by
three.js
// new
THREE.Matrix4().makeTranslation(3,3,3);
// or do it yourself
var translationMatrix = new
THREE.Matrix4(
1, 0, 0, control.x,
0, 1, 0, control.y,
0, 0, 1, control.z,
0, 0, 0, 1
);
cube.applyMatrix(translationMatrix);
// or do it on the geometry
// cube.geometry
applyMatrix(translationMatrix);
// cube.geometry.verticesNeedUpdate =
true;
}
As you can see in the code, creating a custom matrix transformation is very
easy and requires only the following steps.
2. First, you instantiate a new
THREE.Matrix4
object and pass in the values
of the matrix as arguments to the constructor.
3. Next, you use the
applyMatrix
function of either
THREE.Mesh
or
THREE.Geometry
to apply the transformation to that specific object.
4. If you apply this on
THREE.Geometry
you have to set the
ver-
ticesNeedUpdate
property to
true
, as vertex changes aren't automatic-
ally propagated to the renderer (see the
Informing Three.js about updates
re-
cipe).