1 Renderer 2(Viewport,Camera) Inverts
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">1x Renderer 2x (Viewport & Camera)</h1>
<input type="text" id="myTextField" value="LEFT" />
<input type="submit" id="byBtn" value="Invert Camera2 (VP2)" onclick="F_change()" />
<!-- NB In jsfiddle Frameworks & Extensions select No wrap - in <body> -->
CSS
body {
background-color: #eeeeee;
margin: 0px;
overflow: hidden;
}
JavaScript
//... Global variables.
var camera1, camera2, scene, renderer, geometry, material, mybox, mybox2;
var renderer_width, renderer_height;
//
init();
animate();
//-------------------------------------------------------------
function F_change() {
var L_or_R = document.getElementById('myTextField').value;
if (L_or_R == "LEFT") {
L_or_R = "RIGHT";
camera2.projectionMatrix.scale(new THREE.Vector3(-1, 1, 1));
//alert('set to Right');
} else {
L_or_R = "LEFT";
camera2.projectionMatrix.scale(new THREE.Vector3(-1, 1, 1));
//alert('set to Left');
}
document.getElementById('myTextField').value = L_or_R;
}
//-------------------------------------------------------------
function init() {
scene = new THREE.Scene();
//MR DOOB
camera1 = new THREE.PerspectiveCamera
(50, 0.5*window.innerWidth / window.innerHeight, 1, 10000);
camera1.position.set(0,350,500);
//...no effect these two commands
camera1.projectionMatrix.scale(new THREE.Vector3(1, 1, 1));
camera1.updateProjectionMatrix();
scene.add(camera1);
//camera2 = camera1.clone();//??? no !!!
camera2 = new THREE.PerspectiveCamera
(50, 0.5*window.innerWidth / window.innerHeight, 1, 10000);
camera2.position.set(0,350,500);
camera2.projectionMatrix.scale(new THREE.Vector3(-1, -1, 1));
camera2.updateProjectionMatrix();
scene.add(camera2);
//---------------------------------------------------------
// 2 BOXES
var myboxGeometry = new THREE.CubeGeometry(50, 50, 50);
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, 50, 0);
scene.add(mybox);
mybox2 = new...