Threejs - Using Matrix

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<p>
Difference between moving an object through applyMatrix vs setting position and rotation is that appyMatrix affects the offset of a mesh or geometry when you add them as child of another Object3D.
Setting the position or rotation without applyMatrix doesn't affect the matrix.
</p>
<p>
applyMatrix at the lower level affects the localMatrix where setting position doesn't.
</p>
<p>
alling apply matrix on a mesh who has modify position, will resets the mesh back at its origin position. It's almost the same as calling mesh.position.set(0,0,0);
</p>

JavaScript

/*
Goal of this project is to understand matrix and how to apply
a child onto another parent, which the child has been created not at the center. 

conclusion:
applyMatrix vs acting on matrix direction

mesh.applyMatrix( new THREE.Matrix4().makeTranslation(1,0,0));
you don't have to set mesh.matrixAutoUpdate = false;

mesh.matrix.makeTranslation(1,0,0); // acting on matrix directly
you have to set mesh.matrixAutoUpdate = false to see effect

conclusion1: 
matrix helps rotate objects at a more advance level mainting rotation and adding more to rotation. You can use the basic rotation methods to rotate objects and the matrix will auto update or you can modify an objects matrix directly on the object, such as object.matrix.

object.matrix is the local matrix transform. where object.matrixWorld is the parent's matrix .

conclusion2: 
if the child is not created at the center, when you apply the child to the parent, you will get unwanted positioning. This is because not creating at the center, makes the child have offset in its local matrix. 

concluseion3:
Therefore it's best to create child at the center or set the origin of the child to where you want it to be at initial creation, then move the child into a parent. Every object created has a position or origin of 0,0,0. You have to determine what the facing normal should default to as there is no default facing normal on creation.
*/

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.copy(new THREE.Vector3(15,15,15));
scene.add(camera);

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );


controls = new THREE.OrbitControls(camera);
setToFullOrbit(controls)


var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);



var shape =...