Threejs - Rotate Child With WorldSpace Vector

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>
<!--
When you have a child inside a parent and the parent has rotation values.
But you want to rotate the child to match a world space vector.
You want to use quaternion instead of trying to do worldToLocal.
-->

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(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 grid = new THREE.GridHelper(fti(12), 12);
grid.rotateX(THREE.Math.degToRad(90));
scene.add(grid);

// ################################
// ---- playground here
// ################################

class Side {
	constructor(p1, p2){
  	this.start = p1;
    this.end = p2;
    
    // vector normal setup
    this.vectorNormal = new THREE.Vector3();
    this.vectorNormal.subVectors(this.end.clone(), this.start.clone());
    this.vectorNormal.applyAxisAngle(new THREE.Vector3(0,0,1), THREE.Math.degToRad(90));
    this.vectorNormal.normalize();
    
  	this.mesh2D = new THREE.Mesh();
    this.bgMesh = null;
    this.arrowMesh = null;
    this.createSideMesh();
    this.createHandle();
  }
  createSideMesh(){
  	// background mesh trapezoid
    var width = this.start.distanceTo(this.end);
    var height = 3;
    var parentPoints = [
      new THREE.Vector2(-width/2, 0),
      new THREE.Vector2(-width/2+2, height),
      new THREE.Vector2(width/2-2, height),
      new THREE.Vector2(width/2, 0)
    ];
    var backgroundShape = new THREE.Shape(parentPoints);
    var backgroundGeo = new THREE.ShapeGeometry(backgroundShape);
    this.bgMesh = new THREE.Mesh(backgroundGeo, new THREE.MeshBasicMaterial({color:0x0000ff}));
    this.mesh2D.add(this.bgMesh);
    
   ...