Focus on the oon v2

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS2DRenderer.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var camera, controls, scene, renderer, labelRenderer;
var solarPlane, earth, moon;
var angle = 0;

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

  var m1 = new THREE.Matrix4();
  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 parentWorldMatrix;

  return function lookAtObject3D(object) {
    object.updateWorldMatrix(true, false);
    if (this.parent) {
      this.parent.updateWorldMatrix(true, false);
      parentWorldMatrix = this.parent.matrixWorld;
    } else {
      parentWorldMatrix = m1.identity();
    }
    m1
      .getInverse(parentWorldMatrix)
      .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 buildScene() {
  scene = new THREE.Scene();
  solarPlane = createSolarPlane();
  earth =...