Threejs - MultiCamera

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<button id="cam1">Cam1</button>
<button id="cam2">Cam2</button>
<div id="activeCameraStatus">
ActiveCam: <span id="camStatus">cam1</span>
</div>

JavaScript

var objects = []; 
var scene = new THREE.Scene();

// setup renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );

// for camera switching
var activeCamera;

// ----- camera1
var camera1 = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
activeCamera = camera1;
camera1.position.copy(new THREE.Vector3(5,5,5));
// fix first frame render issue going invisible by calling a camera movement
camera1.lookAt(new THREE.Vector3(0,0,0));
// orbital controls for camera 1 only
orbControls = new THREE.OrbitControls(camera1, renderer.domElement);
//setToFullOrbit(orbControls)

// ----- camera2
var camera2 = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
// change cam2 starting pos
camera2.position.z += 35;



// extra grid and axis helper
var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var gh = new THREE.GridHelper();
scene.add(gh);

// register buttons for toggling between cameras
var statusDom = document.getElementById('camStatus');
document.getElementById('cam1').addEventListener('mousedown', () => {
	switchCam(1);
  statusDom.innerHTML = 'cam1';
});
document.getElementById('cam2').addEventListener('mousedown', () => {
	switchCam(2);
  statusDom.innerHTML = 'cam2';
});

// --- something to see in the scene
var s = createSphere();
s.position.x -= 3;

var b = createBox();
b.position.y += 3;
b.rotation.y += 2;


// ---------------------------------- end of playground ------------------

// methods
function createSphere(){
  var spGeo = new THREE.SphereGeometry(.2,6,6);
  var sphereMesh = new THREE.Mesh(spGeo, new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff, transparent: true, opacity: .6}));
  var axisHelper2 = new THREE.AxisHelper();
  sphereMesh.add(axisHelper2);
  scene.add(sphereMesh);
  return sphereMesh;
}

function...