Camera Pick Up Where Animation Leaves Off

This is what I am trying to accomplish: A green cube at (0,0,0) - the green cube changes to red while the AnimeCamera and animation are active. A blue cube at (0.-200,0) Interactive (OrbitControls) ActnCamera. Switch to AnimeCamera and scroll AnimeCamera -200 Y (is now looking at blue cube). Switch back to ActnCamera from where AnimeCamera stopped and pick up being interactive.

by MarkTheMule

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>
<script src="https://unpkg.com/[email protected]/build/dat.gui.min.js"></script>

<div id="container"></div>

CSS

html, body {
				height: 100%;
			}

			body {
				background: #ffffff;
				padding: 0;
				margin: 0;
				font-family: Monospace;
				font-size: 13px;
				overflow: hidden;
			}

			#container {
				width: 100%;
				height: calc(100% - 80px);
			}

JavaScript

// ------------------------------------------------------
			// - Global vars:
			// ------------------------------------------------------
			var scene, renderer, clock, lastCameraRendered;
      var camera = { ptr: undefined };
      var controls = { ptr: undefined };
      
      var tmpCam;
      
			var animeCamera, actnCamera;
      
			var gui, guiOptionsY, guiOptionsZ;
      
			var canvas_h, canvas_w, canvas_x_offset,
        canvas_y_offset, canvas_t_offset;
			var gl;
			var cube;
			var AnimationMixer;
			var animeYbutton, animeZbutton;
			var animeY;
			var animeCamClip;

			// ------------------------------------------------------
			// - Functions:
			// ------------------------------------------------------

			function init() {
			  var container = document.getElementById('container');

			  gui = new dat.GUI();
				var obj = { animate:  animateAnd };
				gui.add(obj,'animate');

			  var rect = container.getBoundingClientRect();
			  canvas_w = rect.width;
			  canvas_h = rect.height;
			  canvas_x_offset = rect.left;
			  canvas_y_offset = rect.top;

			  actnCamera = new THREE.OrthographicCamera(
        	window.innerWidth / -2, window.innerWidth / 2,
          window.innerHeight / 2, window.innerHeight / -2,
          -9000, 9000);
			  actnCamera.position.z = 50;
        actnCamera.name = 'actnCamera';

			  animeCamera = new THREE.OrthographicCamera(
        	window.innerWidth / -2, window.innerWidth / 2,
          window.innerHeight / 2, window.innerHeight / -2,
          -9000, 9000);
			  animeCamera.position.z = 50;
        animeCamera.name = 'animeCamera';

			  camera.ptr = actnCamera;

			  scene = new THREE.Scene();
			  clock = new THREE.Clock();
        
        scene.add(actnCamera);
			  scene.add(animeCamera);

			  // create animation clip of camera moving with Y-up axis
        
        var quatTimes = [ 0, 1, 2, 3, 4 ];
				var quatValues = [
				  0.42470818758010864, 0.17591989040374756, 
          	0.33985114097595215,...