Converted CrosseyedEffect to StereoEffect.

That's the output firefox wants: https://air.mozilla.org/virtual-reality-the-future-of-the-web/

Converted CrosseyedEffect to StereoEffect.
That's the output firefox wants: https://air.mozilla.org/virtual-reality-the-future-of-the-web/
0ed9bbd8 · Mr.doob · de8771aa · 0ed9bbd8 · 0ed9bbd8 · 0ed9bbd8
Showing with 26 addition and 41 deletion

examples/index.html examples/index.html +1 -1

examples/js/effects/StereoEffect.js examples/js/effects/StereoEffect.js +18 -14

examples/webgl_effects_stereo.html examples/webgl_effects_stereo.html +7 -26

未找到文件。
--- a/examples/index.html
+++ b/examples/index.html
@@ -121,9 +121,9 @@
 				"webgl_custom_attributes_particles2",
 				"webgl_custom_attributes_particles3",
 				"webgl_effects_anaglyph",
-				"webgl_effects_crosseyed",
 				"webgl_effects_oculusrift",
 				"webgl_effects_parallaxbarrier",
+				"webgl_effects_stereo",
 				"webgl_geometries",
 				"webgl_geometries2",
 				"webgl_geometry_colors",

--- a/examples/js/effects/CrosseyedEffect.js
+++ b/examples/js/effects/CrosseyedEffect.js
 /**
 * @author alteredq / http://alteredqualia.com/
+ * @authod mrdoob / http://mrdoob.com/
 */

-THREE.CrosseyedEffect = function ( renderer ) {
+THREE.StereoEffect = function ( renderer ) {

 	// API

-	this.separation = 10;
+	this.separation = 6;
+	this.targetDistance = 100;

 	// internals

 	var _width, _height;

 	var _cameraL = new THREE.PerspectiveCamera();
-	_cameraL.target = new THREE.Vector3();
-
 	var _cameraR = new THREE.PerspectiveCamera();
-	_cameraR.target = new THREE.Vector3();
+	var _target = new THREE.Vector3();

 	// initialization

@@ -33,33 +33,37 @@ THREE.CrosseyedEffect = function ( renderer ) {

 	this.render = function ( scene, camera ) {

+		_target.set( 0, 0, - this.targetDistance );
+		_target.applyQuaternion( camera.quaternion );
+		_target.add( camera.position );
+
 		// left

 		_cameraL.fov = camera.fov;
 		_cameraL.aspect = 0.5 * camera.aspect;
+		_cameraL.updateProjectionMatrix();
+
 		_cameraL.near = camera.near;
 		_cameraL.far = camera.far;
-		_cameraL.updateProjectionMatrix();

 		_cameraL.position.copy( camera.position );
-		_cameraL.target.copy( camera.target );
-		_cameraL.translateX( this.separation );
-		_cameraL.lookAt( _cameraL.target );
+		_cameraL.translateX( - this.separation );
+		_cameraL.lookAt( _target );

 		// right

+		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
+
 		_cameraR.near = camera.near;
 		_cameraR.far = camera.far;

-		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
-
 		_cameraR.position.copy( camera.position );
-		_cameraR.target.copy( camera.target );
-		_cameraR.translateX( - this.separation );
-		_cameraR.lookAt( _cameraR.target );
+		_cameraR.translateX( this.separation );
+		_cameraR.lookAt( _target );

 		//

+		renderer.setViewport( 0, 0, _width * 2, _height );
 		renderer.clear();

 		renderer.setViewport( 0, 0, _width, _height );

--- a/examples/webgl_effects_crosseyed.html
+++ b/examples/webgl_effects_crosseyed.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - effects - crosseyed</title>
+		<title>three.js webgl - effects - stereo</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -34,13 +34,12 @@

 	<body>
 		<div id="info">
-			<a href="http://threejs.org" target="_blank">three.js</a> - effects - crosseyed. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>
-			- O, P : change eye separation
+			<a href="http://threejs.org" target="_blank">three.js</a> - effects - stereo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>
 		</div>

 		<script src="../build/three.min.js"></script>

-		<script src="js/effects/CrosseyedEffect.js"></script>
+		<script src="js/effects/StereoEffect.js"></script>

 		<script src="js/Detector.js"></script>

@@ -75,8 +74,6 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;

-				camera.target = new THREE.Vector3( 0, 0, 0 );
-
 				scene = new THREE.Scene();

 				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
@@ -127,11 +124,10 @@
 				renderer = new THREE.WebGLRenderer();
 				container.appendChild( renderer.domElement );

-				effect = new THREE.CrosseyedEffect( renderer );
+				effect = new THREE.StereoEffect( renderer );
+				effect.separation = 10;
+				effect.targetDistance = 200;
 				effect.setSize( window.innerWidth, window.innerHeight );
-				effect.separation = 90;
-
-				document.addEventListener( 'keydown', onKeyDown, false );

 				//

@@ -158,22 +154,6 @@

 			}

-			function onKeyDown ( event ) {
-
-				switch( event.keyCode ) {
-
-					/* O */
-					case 79: effect.separation -= 0.5; break;
-
-					/* P */
-					case 80: effect.separation += 0.5; break;
-
-				}
-
-				console.log( effect.separation );
-
-			};
-
 			//

 			function animate() {
@@ -190,6 +170,7 @@

 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+				camera.lookAt( scene.position );

 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {