Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

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

Mr.doob 11 years ago
parent
de8771aa4c
commit
0ed9bbd8fc
3 changed files with 26 additions and 41 deletions
Unified View Show Diff Stats
  1. 1 1
      examples/index.html
  2. 18 14
      examples/js/effects/StereoEffect.js
  3. 7 26
      examples/webgl_effects_stereo.html

+ 1 - 1
examples/index.html
View File 

@@ -121,9 +121,9 @@
 
 				"webgl_custom_attributes_particles2",
 
 				"webgl_custom_attributes_particles2",
 
 				"webgl_custom_attributes_particles3",
 
 				"webgl_custom_attributes_particles3",
 
 				"webgl_effects_anaglyph",
 
 				"webgl_effects_anaglyph",
 
-				"webgl_effects_crosseyed",
 
 				"webgl_effects_oculusrift",
 
 				"webgl_effects_oculusrift",
 
 				"webgl_effects_parallaxbarrier",
 
 				"webgl_effects_parallaxbarrier",
 
+				"webgl_effects_stereo",
 
 				"webgl_geometries",
 
 				"webgl_geometries",
 
 				"webgl_geometries2",
 
 				"webgl_geometries2",
 
 				"webgl_geometry_colors",
 
 				"webgl_geometry_colors",

+ 18 - 14
examples/js/effects/CrosseyedEffect.js → examples/js/effects/StereoEffect.js
View File 

@@ -1,22 +1,22 @@
 
 /**
 
 /**
 
  * @author alteredq / http://alteredqualia.com/
 
  * @author alteredq / http://alteredqualia.com/
 
+ * @authod mrdoob / http://mrdoob.com/
 
  */
 
  */
 
 
 
-THREE.CrosseyedEffect = function ( renderer ) {
 
+THREE.StereoEffect = function ( renderer ) {
 
 
 
 	// API
 
 	// API
 
 
 
-	this.separation = 10;
 
+	this.separation = 6;
 
+	this.targetDistance = 100;
 
 
 
 	// internals
 
 	// internals
 
 
 
 	var _width, _height;
 
 	var _width, _height;
 
 
 
 	var _cameraL = new THREE.PerspectiveCamera();
 
 	var _cameraL = new THREE.PerspectiveCamera();
 
-	_cameraL.target = new THREE.Vector3();
 
-
 
 	var _cameraR = new THREE.PerspectiveCamera();
 
 	var _cameraR = new THREE.PerspectiveCamera();
 
-	_cameraR.target = new THREE.Vector3();
 
+	var _target = new THREE.Vector3();
 
 
 
 	// initialization
 
 	// initialization
 
 
 
@@ -33,33 +33,37 @@ THREE.CrosseyedEffect = function ( renderer ) {
 
 
 
 	this.render = function ( scene, camera ) {
 
 	this.render = function ( scene, camera ) {
 
 
 
+		_target.set( 0, 0, - this.targetDistance );
 
+		_target.applyQuaternion( camera.quaternion );
 
+		_target.add( camera.position );
 
+
 
 		// left
 
 		// left
 
 
 
 		_cameraL.fov = camera.fov;
 
 		_cameraL.fov = camera.fov;
 
 		_cameraL.aspect = 0.5 * camera.aspect;
 
 		_cameraL.aspect = 0.5 * camera.aspect;
 
+		_cameraL.updateProjectionMatrix();
 
+
 
 		_cameraL.near = camera.near;
 
 		_cameraL.near = camera.near;
 
 		_cameraL.far = camera.far;
 
 		_cameraL.far = camera.far;
 
-		_cameraL.updateProjectionMatrix();
 
 
 
 		_cameraL.position.copy( camera.position );
 
 		_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
 
 		// right
 
 
 
+		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
 
+
 
 		_cameraR.near = camera.near;
 
 		_cameraR.near = camera.near;
 
 		_cameraR.far = camera.far;
 
 		_cameraR.far = camera.far;
 
 
 
-		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
 
-
 
 		_cameraR.position.copy( camera.position );
 
 		_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.clear();
 
 
 
 		renderer.setViewport( 0, 0, _width, _height );
 
 		renderer.setViewport( 0, 0, _width, _height );

+ 7 - 26
examples/webgl_effects_crosseyed.html → examples/webgl_effects_stereo.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - effects - crosseyed</title>
 
+		<title>three.js webgl - effects - stereo</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
@@ -34,13 +34,12 @@
 
 
 
 	<body>
 
 	<body>
 
 		<div id="info">
 
 		<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>
 
 		</div>
 
 
 
 		<script src="../build/three.min.js"></script>
 
 		<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>
 
 		<script src="js/Detector.js"></script>
 
 
 
@@ -75,8 +74,6 @@
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				camera.position.z = 3200;
 
 				camera.position.z = 3200;
 
 
 
-				camera.target = new THREE.Vector3( 0, 0, 0 );
 
-
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
 				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
 
 				var geometry = new THREE.SphereGeometry( 100, 32, 16 );
 
@@ -127,11 +124,10 @@
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				container.appendChild( renderer.domElement );
 
 				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.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() {
 
 			function animate() {
 
@@ -190,6 +170,7 @@
 
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.lookAt( scene.position );
 
 
 
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
 
 				for ( var i = 0, il = spheres.length; i < il; i ++ ) {