Skip to content

Using Matrices & Object3Ds in THREE

Jan Schär edited this page Oct 12, 2015 · 13 revisions

I have been using THREE for a month or so and it is an incredible library, however my biggest stumbling point has been understanding how to use Matrices. Here is what I have learned:

The Matrix4 class has all the usual transform functions you would expect for a 3D computer graphics matrix class - multiply , setRotationX, setRotationY , setPosition are just a few. However it is really the Object3D class and its updateMatrix and update functions that we need to understand.

The Object3D class has its own matrix:

this.matrix

and contains within itself:

this.position

this.quaternion

this.rotation

this.scale

When updateMatrix is called the Object3D's matrix is set according to those variables.

Now if you want to manually configure this.matrix using Matrix4 methods, then you need to make sure this.matrixAutoUpdate is false and that you don't call this.updateMatrix. Otherwise all your settings will be over-ridden and your object will do nothing.

If you change the scale of the object manually be sure to update this.boundRadiusScale with the changes also.

If your object is static i.e. it is not going to move in the environment then set this.updateMatrix to false to save the effort of calculating the object's matrix every cycle.

If this.matrixAutoUpdate is true then at render time this.updateMatrix is called automatically so you don't need to call it yourself.

There is also the world matrix and the parent-child hierarchy. This propagates the parent's this.matrix to its children, and is dependent on this.matrixWorldNeedsUpdate being true for the propagation to occur during the this.update call.

Now most of the object types inherit from Object3D, so if your object isn't doing what you expected, it is probably because this.updateMatrix is over-writing your settings!

Here is an example of two different ways of setting the orientation and position of an object:

Method 1: Using the Object3D members

	your_object.position = start_position;
	your_object.quaternion = quaternion;
	your_object.updateMatrix();

Method 2: Manually setting the matrix

	your_object.matrix.setRotationFromQuaternion(quaternion);
	your_object.matrix.setPosition(start_position);
	your_object.matrixAutoUpdate = false;

I hope this helps. renegademaster88