THREE.Object3D.lookAtObject3D

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<canvas id="c"></canvas>
<div id="info"></div>

CSS

body {
  margin: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}

#info {
  position: absolute;
  left: 1em;
  top: 1em;
  background: rgba(0, 0, 0, .8);
  padding: .5em;
  color: white;
  font-family: monospace;
}

JavaScript

'use strict'; // eslint-disable-line

/* global THREE, document, requestAnimationFrame  */

THREE.Object3D.prototype.lookAt = function() {

  var q1 = new THREE.Quaternion();
  var m1 = new THREE.Matrix4();
  var vector = new THREE.Vector3();
  var target = new THREE.Vector3();
  var position = new THREE.Vector3();

  return function lookAt(x, y, z) {

    if (x.isVector3) {
      target.copy(x);
    } else {
      target.set(x, y, z);
    }

    this.updateMatrix();
    position.setFromMatrixPosition(this.matrix);

    if (this.isCamera) {
      m1.lookAt(position, target, this.up);
    } else {
      m1.lookAt(target, position, this.up);
    }

    this.quaternion.setFromRotationMatrix(m1);
  };
}();


THREE.Object3D.prototype.lookAtObject3D = function() {

		var m1 = new THREE.Matrix4();
		var position = new THREE.Vector3();
		var parentMatrix;

		return function lookAtObject3D( object ) {
			object.updateWorldMatrix( true, false );
			if ( this.parent ) {
				this.parent.updateWorldMatrix( true, false );
				parentMatrix = this.parent.matrixWorld;
			} else {
				parentMatrix = m1.identity();
			}
			m1
				.getInverse( parentMatrix )
				.multiply( object.matrixWorld );
			position.setFromMatrixPosition( m1 );
			this.lookAt( position );
		};
}();

THREE.Object3D.prototype.updateWorldMatrix = function(updateParents, updateChildren) {

  var parent = this.parent;

  if (updateParents === true && parent !== null) {

    parent.updateWorldMatrix(true, false);

  }

  if (this.matrixAutoUpdate) this.updateMatrix();

  if (this.parent === null) {

    this.matrixWorld.copy(this.matrix);

  } else {

    this.matrixWorld.multiplyMatrices(this.parent.matrixWorld, this.matrix);

  }

  // update children

  if (updateChildren === true) {

    var children = this.children;

    for (var i = 0, l = children.length; i < l; i++) {

      children[i].updateWorldMatrix(false, true);

    }

  }

};

function main() {
  const canvas = document.querySelector('#c');
  const...