Threejs - Local vs World

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>

JavaScript

// position.x += 5; // happens automatically

// happens only after render(), but may overrite psotion.x and rotation.x values
// mesh.applyMatrix(new THREE.Matrix4().makeTranslation(1,0,0));

var objects = []; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(5,5,5));

var v1 = new THREE.Vector3(3,0,0);
var v2 = new THREE.Vector3(1,0,0);
var sum = v1.sub(v2);
console.error(sum.normalize());

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

var gh = new THREE.GridHelper();
scene.add(gh);

// --------- start scene ------------ //

// create square (ended up being a rectangle, too lazy to refactor)
var sq = createSquare();
sq.position.x += 1;

// create line with up arrows
var line = createLine();
line.position.x += 1;

// add line into square
sq.add(line);

// create square 2
var sq2 = createSquare();
sq2.position.set(-3,0,0)

// local to world is like a multiplier, so if you keep calling the same method below, it modifies in a way incrementing the vector value
// to reverse it, do worldToLocal
//sq.localToWorld(vec);	// means put the coord (0,0,0) in sq's world position
//sq.localToWorld(vec);	// means addon to the world position
//sq.localToWorld(vec);	// means addon to the world position

var sphere1 = createSphere();
var sphere2 = createSphere();


// if you don't modify the sphere local's matrix
// you can easily put the sphere into other parents's location
// without creating weird offset in its position
sq.add(sphere1);
//sq2.add(sphere1);

// to demonstrate adding the sphere while it is rotating,
// does not affect the sphere's current rotation...