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 camera, scene, renderer, controls;
			var animeCamera, actnCamera, curntCamera, oControls
			var gui, guiOptionsY, guiOptionsZ;
			var clock;
			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 clipY;

			// ------------------------------------------------------
			// - 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;

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

			  curntCamera = actnCamera;

			  scene = new THREE.Scene();
			  clock = new THREE.Clock();

			  scene.add(animeCamera);

			  // create animation clip of camera moving with Y-up axis
			  var timeY = [0, 3];
			  var cmraPos = [0, 0, 50, 0, -200, 50];
			  var uuidY = animeCamera.uuid + '.position';
			  var vkeyf = new THREE.VectorKeyframeTrack(
        	uuidY, timeY, cmraPos);
			  var trckS = [vkeyf];
			  clipY = new THREE.AnimationClip('animeY', 3.0, trckS);

			  AnimationMixer = new THREE.AnimationMixer(scene);
			  var that = this;
			 ...