Toggle Cameras+ Orbit Controls

three.js html, js, OrbitControls, frustrum.

by steveow

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

<h1 id="title_A">toggle Cameras (Works partly)</h1>	 
<input type="submit" id="byBtn1" value="Switch Camera" onclick="F_Switch_Camera()" />	
<input type="text" id="myTextField" value="camera1" />	
<input type="submit" id="byBtn2" value="Reset Camera1" onclick="F_Reset_Camera1()" />
<input type="submit" id="byBtn3" value="Reset Camera2" onclick="F_Reset_Camera2()" />	
<div id="container"></div>

CSS

#container 
		{
		  height: 100%;
		  width: 100%;
		  min-height: 100%;
		  min-width: 100%;
		}

JavaScript

// Variables
var cameraDistance      = 500;
var cameraFOV           = 45;
var lightD              = 20;
var sphereRadius        = 20;

//var SelectedCameraString = "camera" ;
var camera1, camera2, RenderCamera;
var controls, controls1, controls2;

// Scene
  var scene = new THREE.Scene();

// Renderer
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor( 0x008888 ); //scene.fog.color ); 
   renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;

  document.getElementById('container').appendChild( renderer.domElement );

// LIGHTS

//scene.add( new THREE.AmbientLight( 0xffffff ) );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

/* causes errors
var light1 = new THREE.PointLight(0xffffff);
light1.position.set(-5400, 1400, -1400);
scene.add(light1);
*/

//... camera1
  
camera1Fov = 75;
camera1Far = 1200;
camera1 = new THREE.PerspectiveCamera( camera1Fov, window.innerWidth / window.innerHeight, 1, camera1Far );
//camera1.position.z = camera1Far;
camera1.position.set(0,0,1); //... NB (0,0,0) causes OrbitControls to Freeze.


	// Near & Far Plane dimensions
	c1_hNear = 2 * Math.tan(camera1.fov * Math.PI / 180 / 2) * camera1.near; // CHANGED - deg to radians
	c1_wNear = c1_hNear * camera1.aspect; // width

	c1_hFar = 2 * Math.tan(camera1.fov * Math.PI / 180 / 2) * camera1.far; // CHANGED - deg to radians
	c1_wFar = c1_hFar * camera1.aspect; // width

	//... Frustrum Vertex Points
	//... far
	var camera1_farTopLeft 		= new THREE.Vector3(-c1_wFar / 2,  c1_hFar / 2, -camera1.far); // CHANGED - sign flips
	var camera1_farBottomRight 	= new THREE.Vector3( c1_wFar / 2, -c1_hFar / 2, -camera1.far);
	var camera1_farTopRight 	= new THREE.Vector3( c1_wFar / 2,  c1_hFar / 2, -camera1.far);
	var camera1_farBottomLeft 	= new THREE.Vector3(-c1_wFar / 2, -c1_hFar / 2,...