Threejs - Local vs World - With Line

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>
<div id="con">
Sphere2 is the smaller sphere and is a child of Sphere1.
While smalller sphere is a child of big sphere, we can still reposition small sphere.
onto any world coordinates.

in this case we use the end point of the rotating line as a new position to update the small sphere onto.

</div>

JavaScript

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 log = function(msg){
	document.getElementById('con').append(msg);
}

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

// --------- ######### start playground ------------ //

// ---------- test forcing matrixWorldUpdate() ----------------
/* var pgeo = new THREE.PlaneGeometry(4,4);
var pMesh = new THREE.Mesh(pgeo, new THREE.MeshBasicMaterial({color: 0xff00ff, opacity:.4, transparent: true}));
scene.add(pMesh);

var pgeo1 = new THREE.PlaneGeometry(2,2);
var pMesh1 = new THREE.Mesh(pgeo1, new THREE.MeshBasicMaterial({color: 0xff0000, opacity:.2, transparent: true}));
pMesh.add(pMesh1);

pMesh.position.z += 1;
pMesh.updateMatrixWorld();

var vec3 = pMesh1.geometry.vertices[0].clone();
var vecConvert = pMesh1.localToWorld(vec3);
var x = vecConvert.x;
var y = vecConvert.y;
var z = vecConvert.z;
log('x: ' + x + ', y: ' + y + ', z: ' + z); */
// ----------- end of test forcing matrixWorldUpdate() ---------------

// create line with up two arrows
var line = createLine();
// move line up 1 unit
line.position.y += 1;

// make sphere
var s1 = createSphere(.5);
s1.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(1,0,0));
var sphere2 = createSphere(.2);
s1.add(sphere2);


// make sphere follow line vertex - without added in position
setInterval(function(){
  var vec = line.geometry.vertices[1].clone();
  console.warn(vec);
  line.localToWorld(vec);			// convert local point to world
  console.warn(vec);
  sphere2.position.copy(vec);	// moving an object in scene world to the...