Threejs - Local To World 3

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<p>
To move object A to object B's vertices. You must explicitly call B.updateMatrixWorld() after transforming object B if you cannot wait for the next frame to be rendered.

Then you can grab one of its vertices and make other objects move to it by using localToWorld.

If not calling updateMatrixWorld explicitly, you have to ensure you are getting the vertices after the next frame has kicked in. render frame calls the object's update matrixWorld for you.
</p>

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));
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

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

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

// ---------------------- playground starts here

var s = createSphere();
s.position.x -= 3;

var b = createBox();
b.position.y += 3;
b.rotation.y += 2;

// get vertext after 1000 mili sec.
/* 
setTimeout(function(){
  b.updateMatrixWorld();
  var boxVert = b.geometry.vertices[1].clone();
  b.localToWorld(boxVert);
  s.position.copy(boxVert);
  
}, 1000);

 */
// ---------------------------------- end of playground
function createSphere(){
  var spGeo = new THREE.SphereGeometry(.2,6,6);
  var sphereMesh = new THREE.Mesh(spGeo, new THREE.MeshBasicMaterial({color: 0x0000ff, transparent: true, opacity: .6}));
  var axisHelper2 = new THREE.AxisHelper();
  sphereMesh.add(axisHelper2);
  scene.add(sphereMesh);
  return sphereMesh;
}

function createBox(){
	var boxGeo = new THREE.BoxGeometry(1,1,1);
  var mesh = new THREE.Mesh(boxGeo, new THREE.MeshBasicMaterial({color: 0xff00ff, transparent: true, opacity: 0.3}));
  scene.add(mesh);
  return mesh;
}

var render = function () {
  requestAnimationFrame( render );
  
  b.rotation.y += .02;
  if (b.rotation.y > Math.PI * 2) {
  	b.rotation.y -= Math.PI * 2;
  }
  
  //camera.lookAt( scene.position );
  renderer.render( scene, camera );

	// here because we are getting the vertice after
  // a render frame, we don't have to explicitly...