Threejs - LocalWorldSpace

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>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var cube;
var controls;

var umbrellaMesh;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  
  const localSpaceGeometry = new THREE.BoxGeometry(200, 200, 200);
  const localSpaceMaterial = new THREE.MeshBasicMaterial({color: 0x800080, transparent: true, opacity: 0.5});
  umbrellaMesh = new THREE.Mesh(localSpaceGeometry, localSpaceMaterial);
  
  umbrellaMesh.position.y = 200;
 	umbrellaMesh.position.z = 100;

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);
  
  umbrellaMesh.add(axes.clone());
  
  //umbrellaMesh.rotation.x = -Math.PI / 2;
  
  //umbrellaMesh.add(axes.clone());
  
  scene.add(umbrellaMesh);
  
  const greenGeometry = new THREE.BoxGeometry( 20, 20, 20 );
const greenMaterial = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const greenCube = new THREE.Mesh( greenGeometry, greenMaterial );

const redGeometry = new THREE.BoxGeometry(20, 20, 20);
const redMaterial = new THREE.MeshBasicMaterial({color:0xff0000});
const redCube = new THREE.Mesh(redGeometry, redMaterial);

greenCube.position.y = 40;
redCube.position.y = 40;
redCube.updateMatrixWorld();

umbrellaMesh.add(redCube);
scene.add( greenCube );

console.log('Red cube in local space to world space');
var pos = new THREE.Vector3(redCube.position.x, redCube.position.y, redCube.position.z);
console.log('before conversion');
console.log(pos);
var world = redCube.localToWorld(pos)
console.log('after conversion');
console.log(world);

var redCubeWorldSpace = redCube.position.clone().applyQuaternion(redCube.parent.quaternion);

printVector3(redCubeWorldSpace);

console.log('Green cube is already in world...