1 camera 2 displays 1 mirrored.
Working.
HTML
<!--- Using latest THREE.js (r70+) -->
<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">1 camera, 2 displays (1 mirrored)</h1>
<!-- NB In jsfiddle Frameworks & Extensions select No wrap - in <body> -->
CSS
body {
background-color: #dddddd;
margin: 0px;
overflow: hidden;
}
JavaScript
//... Copies methods presented by Lee Stemkoski and West Langley.
//... Global variables.
var camera1, camera2, scene, renderer, geometry, material, mybox, mybox2;
var renderer_width, renderer_height;
//
init();
animate();
//-------------------------------------------------------------
function init() {
scene222 = new THREE.Scene();
camera1 = new THREE.PerspectiveCamera
(50, window.innerWidth / window.innerHeight, 1, 10000);
camera1.position.set(0,350,2500);
//...no effect these two commands
camera1.projectionMatrix.scale(new THREE.Vector3(1, 1, 1));
camera1.updateProjectionMatrix();
scene222.add(camera1);
//---------------------------------------------------------
// 2 BOXES
var myboxGeometry = new THREE.CubeGeometry(100, 100, 100);
var myboxMaterial = new THREE.MeshLambertMaterial({
color: 0x00aaff,
side: THREE.DoubleSide
});
var mybox2Geometry = new THREE.CubeGeometry(150, 150, 150);
var mybox2Material = new THREE.MeshNormalMaterial();
mybox = new THREE.Mesh(myboxGeometry, myboxMaterial);
mybox.position.set(0, 0, 0);
scene222.add(mybox);
mybox2 = new THREE.Mesh(mybox2Geometry, mybox2Material);
scene222.add(mybox2);
mybox2.position.set(0, -100, 0);
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0, 200, 400);
//var light = new THREE.AmbientLight(0xffffff);
scene222.add(light);
//RENDERER
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer_width = window.innerWidth;
renderer_height = window.innerHeight;
renderer.setSize(renderer_width, renderer_height);
renderer.setClearColor(0x444444, 1);
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);
//... Need OrbitControls.js.
camera1.lookAt(0, 0, 0); //R70
controls1 = new THREE.OrbitControls(camera1,...