Updated effects.

examples/js/effects/AnaglyphEffect.js

@@ -10,6 +10,8 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 	var _scene = new THREE.Scene();
 
+	var _stereo = new THREE.StereoCamera();
+
 	var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 
 	if ( width === undefined ) width = 512;
@@ -78,19 +80,14 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {
 
 	this.render = function ( scene, camera ) {
 
-		if ( camera instanceof THREE.StereoCamera === false ) {
-
-			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
-			return;
-
-		}
-
 		scene.updateMatrixWorld();
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
-		renderer.render( scene, camera.cameraL, _renderTargetL, true );
-		renderer.render( scene, camera.cameraR, _renderTargetR, true );
+		_stereo.update( camera );
+
+		renderer.render( scene, _stereo.cameraL, _renderTargetL, true );
+		renderer.render( scene, _stereo.cameraR, _renderTargetR, true );
 		renderer.render( _scene, _camera );
 
 	};

examples/js/effects/CardboardEffect.js

@@ -8,6 +8,9 @@ THREE.CardboardEffect = function ( renderer ) {
 
 	var _scene = new THREE.Scene();
 
+	var _stereo = new THREE.StereoCamera();
+	_stereo.aspect = 0.5;
+
 	var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 
 	var _renderTarget = new THREE.WebGLRenderTarget( 512, 512, _params );
@@ -102,27 +105,22 @@ THREE.CardboardEffect = function ( renderer ) {
 
 	this.render = function ( scene, camera ) {
 
-		if ( camera instanceof THREE.StereoCamera === false ) {
-
-			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
-			return;
-
-		}
-
 		scene.updateMatrixWorld();
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
+		_stereo.update( camera );
+
 		var width = _renderTarget.width / 2;
 		var height = _renderTarget.height;
 
 		_renderTarget.scissor.set( 0, 0, width, height );
 		_renderTarget.viewport.set( 0, 0, width, height );
-		renderer.render( scene, camera.cameraL, _renderTarget );
+		renderer.render( scene, _stereo.cameraL, _renderTarget );
 
 		_renderTarget.scissor.set( width, 0, width, height );
 		_renderTarget.viewport.set( width, 0, width, height );
-		renderer.render( scene, camera.cameraR, _renderTarget );
+		renderer.render( scene, _stereo.cameraR, _renderTarget );
 
 		renderer.render( _scene, _camera );
 

examples/js/effects/ParallaxBarrierEffect.js

@@ -10,6 +10,8 @@ THREE.ParallaxBarrierEffect = function ( renderer ) {
 
 	var _scene = new THREE.Scene();
 
+	var _stereo = new THREE.StereoCamera();
+
 	var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 
 	var _renderTargetL = new THREE.WebGLRenderTarget( 512, 512, _params );
@@ -77,19 +79,14 @@ THREE.ParallaxBarrierEffect = function ( renderer ) {
 
 	this.render = function ( scene, camera ) {
 
-		if ( camera instanceof THREE.StereoCamera === false ) {
-
-			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
-			return;
-
-		}
-
 		scene.updateMatrixWorld();
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
-		renderer.render( scene, camera.cameraL, _renderTargetL, true );
-		renderer.render( scene, camera.cameraR, _renderTargetR, true );
+		_stereo.update( camera );
+
+		renderer.render( scene, _stereo.cameraL, _renderTargetL, true );
+		renderer.render( scene, _stereo.cameraR, _renderTargetR, true );
 		renderer.render( _scene, _camera );
 
 	};

examples/js/effects/StereoEffect.js

@@ -7,44 +7,35 @@
 
 THREE.StereoEffect = function ( renderer ) {
 
-	var _width, _height;
-
-	// initialization
-
-	renderer.autoClear = false;
+	var _stereo = new THREE.StereoCamera();
+	_stereo.aspect = 0.5;
 
 	this.setSize = function ( width, height ) {
 
-		_width = width / 2;
-		_height = height;
-
 		renderer.setSize( width, height );
 
 	};
 
 	this.render = function ( scene, camera ) {
 
-		if ( camera instanceof THREE.StereoCamera === false ) {
-
-			console.error( 'THREE.StereoCamera.render(): camera should now be an insteance of THREE.StereoCamera.' );
-			return;
-
-		}
-
 		scene.updateMatrixWorld();
 
 		if ( camera.parent === null ) camera.updateMatrixWorld();
 
-		renderer.clear();
+		_stereo.update( camera );
+
+		var size = renderer.getSize();
+
 		renderer.setScissorTest( true );
+		renderer.clear();
 
-		renderer.setScissor( 0, 0, _width, _height );
-		renderer.setViewport( 0, 0, _width, _height );
-		renderer.render( scene, camera.cameraL );
+		renderer.setScissor( 0, 0, size.width / 2, size.height );
+		renderer.setViewport( 0, 0, size.width / 2, size.height );
+		renderer.render( scene, _stereo.cameraL );
 
-		renderer.setScissor( _width, 0, _width, _height );
-		renderer.setViewport( _width, 0, _width, _height );
-		renderer.render( scene, camera.cameraR );
+		renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
+		renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
+		renderer.render( scene, _stereo.cameraR );
 
 		renderer.setScissorTest( false );
 

examples/webgl_effects_anaglyph.html

@@ -70,7 +70,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.StereoCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();

examples/webgl_effects_cardboard.html

@@ -25,7 +25,7 @@
 
 			function init() {
 
-				camera = new THREE.StereoCamera( 50, window.innerWidth / window.innerHeight / 2, 1, 100 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( 3, 2, 3 );
 				camera.lookAt( new THREE.Vector3() );
 				camera.focalLength = camera.position.distanceTo( new THREE.Vector3() );
@@ -80,7 +80,7 @@
 
 			function onWindowResize() {
 
-				camera.aspect = window.innerWidth / window.innerHeight / 2;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
 				effect.setSize( window.innerWidth, window.innerHeight );

examples/webgl_effects_parallaxbarrier.html

@@ -161,7 +161,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.StereoCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				scene = new THREE.Scene();
 

examples/webgl_effects_stereo.html

@@ -71,7 +71,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.StereoCamera( 60, window.innerWidth / window.innerHeight / 2, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();
@@ -140,7 +140,7 @@
 				windowHalfX = window.innerWidth / 2,
 				windowHalfY = window.innerHeight / 2,
 
-				camera.aspect = window.innerWidth / window.innerHeight / 2;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
 				effect.setSize( window.innerWidth, window.innerHeight );