three.js - track camera changes

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="info" style="margin-left: 100px;">Manipulate camera and see camera changes in console output</div>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

JavaScript

function diff(a, b, p, changes) {
  if (a[p] !== b[p]) {
    changes[p] = {
      before: a[p],
      after: b[p]
    };
  }
}

function diffArray(a, b, p, changes) {
  const eps = 1e-12;
  let hasChanges = false;

  for (let i in a[p]) {
    if (Math.abs(a[p][i] - b[p][i]) > eps) {
      hasChanges = true;
      break;
    }
  }

  if (hasChanges) {
    changes[p] = {
      before: a[p].slice(),
      after: b[p].slice()
    };
  }
}

function diffPerspectiveCamera(oldCam, newCam, changes) {

  diff(oldCam, newCam, "uuid", changes);
  diff(oldCam, newCam, "type", changes);
  diff(oldCam, newCam, "layers", changes);
  diffArray(oldCam, newCam, "matrix", changes);
  diff(oldCam, newCam, "fov", changes);
  diff(oldCam, newCam, "zoom", changes);
  diff(oldCam, newCam, "near", changes);
  diff(oldCam, newCam, "far", changes);
  diff(oldCam, newCam, "focus", changes);
  diff(oldCam, newCam, "aspect", changes);
  diff(oldCam, newCam, "filmGauge", changes);
  diff(oldCam, newCam, "filmOffset", changes);

  return Object.keys(changes).length;
}

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.x = 10;
camera.position.y = 0.5;
camera.position.z = 0.5;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
let spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(9, 10, 1);
scene.add(spotLight);

let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

var bufferGeometry = new THREE.BufferGeometry().fromGeometry(new THREE.DodecahedronGeometry(1, 0));
let material = new THREE.MeshPhongMaterial({
  color:...