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

Added CSS3DStereoRenderer.

Mr.doob 10 years ago
parent
2042a3e49e
commit
b99aed7cca
3 changed files with 772 additions and 0 deletions
Unified View Show Diff Stats
  1. 442 0
      examples/css3dstereo_periodictable.html
  2. 3 0
      examples/index.html
  3. 327 0
      examples/js/renderers/CSS3DStereoRenderer.js

+ 442 - 0
examples/css3dstereo_periodictable.html
View File 

@@ -0,0 +1,442 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<title>three.js css3d stereo - periodic table</title>
 
+		<style>
 
+			html, body {
 
+				height: 100%;
 
+			}
 
+
 
+			body {
 
+				background-color: #000000;
 
+				margin: 0;
 
+				font-family: Helvetica, sans-serif;;
 
+				overflow: hidden;
 
+			}
 
+
 
+			a {
 
+				color: #ffffff;
 
+			}
 
+
 
+			.element {
 
+				width: 120px;
 
+				height: 160px;
 
+				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 
+				border: 1px solid rgba(127,255,255,0.25);
 
+				text-align: center;
 
+				cursor: default;
 
+			}
 
+
 
+			.element:hover {
 
+				box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
 
+				border: 1px solid rgba(127,255,255,0.75);
 
+			}
 
+
 
+				.element .number {
 
+					position: absolute;
 
+					top: 20px;
 
+					right: 20px;
 
+					font-size: 12px;
 
+					color: rgba(127,255,255,0.75);
 
+				}
 
+
 
+				.element .symbol {
 
+					position: absolute;
 
+					top: 40px;
 
+					left: 0px;
 
+					right: 0px;
 
+					font-size: 60px;
 
+					font-weight: bold;
 
+					color: rgba(255,255,255,0.75);
 
+					text-shadow: 0 0 10px rgba(0,255,255,0.95);
 
+				}
 
+
 
+				.element .details {
 
+					position: absolute;
 
+					bottom: 15px;
 
+					left: 0px;
 
+					right: 0px;
 
+					font-size: 12px;
 
+					color: rgba(127,255,255,0.75);
 
+				}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script src="../build/three.min.js"></script>
 
+		<script src="js/libs/tween.min.js"></script>
 
+		<script src="js/controls/TrackballControls.js"></script>
 
+		<script src="js/renderers/CSS3DStereoRenderer.js"></script>
 
+
 
+		<div id="container"></div>
 
+
 
+		<script>
 
+
 
+			var table = [
 
+				"H", "Hydrogen", "1.00794", 1, 1,
 
+				"He", "Helium", "4.002602", 18, 1,
 
+				"Li", "Lithium", "6.941", 1, 2,
 
+				"Be", "Beryllium", "9.012182", 2, 2,
 
+				"B", "Boron", "10.811", 13, 2,
 
+				"C", "Carbon", "12.0107", 14, 2,
 
+				"N", "Nitrogen", "14.0067", 15, 2,
 
+				"O", "Oxygen", "15.9994", 16, 2,
 
+				"F", "Fluorine", "18.9984032", 17, 2,
 
+				"Ne", "Neon", "20.1797", 18, 2,
 
+				"Na", "Sodium", "22.98976...", 1, 3,
 
+				"Mg", "Magnesium", "24.305", 2, 3,
 
+				"Al", "Aluminium", "26.9815386", 13, 3,
 
+				"Si", "Silicon", "28.0855", 14, 3,
 
+				"P", "Phosphorus", "30.973762", 15, 3,
 
+				"S", "Sulfur", "32.065", 16, 3,
 
+				"Cl", "Chlorine", "35.453", 17, 3,
 
+				"Ar", "Argon", "39.948", 18, 3,
 
+				"K", "Potassium", "39.948", 1, 4,
 
+				"Ca", "Calcium", "40.078", 2, 4,
 
+				"Sc", "Scandium", "44.955912", 3, 4,
 
+				"Ti", "Titanium", "47.867", 4, 4,
 
+				"V", "Vanadium", "50.9415", 5, 4,
 
+				"Cr", "Chromium", "51.9961", 6, 4,
 
+				"Mn", "Manganese", "54.938045", 7, 4,
 
+				"Fe", "Iron", "55.845", 8, 4,
 
+				"Co", "Cobalt", "58.933195", 9, 4,
 
+				"Ni", "Nickel", "58.6934", 10, 4,
 
+				"Cu", "Copper", "63.546", 11, 4,
 
+				"Zn", "Zinc", "65.38", 12, 4,
 
+				"Ga", "Gallium", "69.723", 13, 4,
 
+				"Ge", "Germanium", "72.63", 14, 4,
 
+				"As", "Arsenic", "74.9216", 15, 4,
 
+				"Se", "Selenium", "78.96", 16, 4,
 
+				"Br", "Bromine", "79.904", 17, 4,
 
+				"Kr", "Krypton", "83.798", 18, 4,
 
+				"Rb", "Rubidium", "85.4678", 1, 5,
 
+				"Sr", "Strontium", "87.62", 2, 5,
 
+				"Y", "Yttrium", "88.90585", 3, 5,
 
+				"Zr", "Zirconium", "91.224", 4, 5,
 
+				"Nb", "Niobium", "92.90628", 5, 5,
 
+				"Mo", "Molybdenum", "95.96", 6, 5,
 
+				"Tc", "Technetium", "(98)", 7, 5,
 
+				"Ru", "Ruthenium", "101.07", 8, 5,
 
+				"Rh", "Rhodium", "102.9055", 9, 5,
 
+				"Pd", "Palladium", "106.42", 10, 5,
 
+				"Ag", "Silver", "107.8682", 11, 5,
 
+				"Cd", "Cadmium", "112.411", 12, 5,
 
+				"In", "Indium", "114.818", 13, 5,
 
+				"Sn", "Tin", "118.71", 14, 5,
 
+				"Sb", "Antimony", "121.76", 15, 5,
 
+				"Te", "Tellurium", "127.6", 16, 5,
 
+				"I", "Iodine", "126.90447", 17, 5,
 
+				"Xe", "Xenon", "131.293", 18, 5,
 
+				"Cs", "Caesium", "132.9054", 1, 6,
 
+				"Ba", "Barium", "132.9054", 2, 6,
 
+				"La", "Lanthanum", "138.90547", 4, 9,
 
+				"Ce", "Cerium", "140.116", 5, 9,
 
+				"Pr", "Praseodymium", "140.90765", 6, 9,
 
+				"Nd", "Neodymium", "144.242", 7, 9,
 
+				"Pm", "Promethium", "(145)", 8, 9,
 
+				"Sm", "Samarium", "150.36", 9, 9,
 
+				"Eu", "Europium", "151.964", 10, 9,
 
+				"Gd", "Gadolinium", "157.25", 11, 9,
 
+				"Tb", "Terbium", "158.92535", 12, 9,
 
+				"Dy", "Dysprosium", "162.5", 13, 9,
 
+				"Ho", "Holmium", "164.93032", 14, 9,
 
+				"Er", "Erbium", "167.259", 15, 9,
 
+				"Tm", "Thulium", "168.93421", 16, 9,
 
+				"Yb", "Ytterbium", "173.054", 17, 9,
 
+				"Lu", "Lutetium", "174.9668", 18, 9,
 
+				"Hf", "Hafnium", "178.49", 4, 6,
 
+				"Ta", "Tantalum", "180.94788", 5, 6,
 
+				"W", "Tungsten", "183.84", 6, 6,
 
+				"Re", "Rhenium", "186.207", 7, 6,
 
+				"Os", "Osmium", "190.23", 8, 6,
 
+				"Ir", "Iridium", "192.217", 9, 6,
 
+				"Pt", "Platinum", "195.084", 10, 6,
 
+				"Au", "Gold", "196.966569", 11, 6,
 
+				"Hg", "Mercury", "200.59", 12, 6,
 
+				"Tl", "Thallium", "204.3833", 13, 6,
 
+				"Pb", "Lead", "207.2", 14, 6,
 
+				"Bi", "Bismuth", "208.9804", 15, 6,
 
+				"Po", "Polonium", "(209)", 16, 6,
 
+				"At", "Astatine", "(210)", 17, 6,
 
+				"Rn", "Radon", "(222)", 18, 6,
 
+				"Fr", "Francium", "(223)", 1, 7,
 
+				"Ra", "Radium", "(226)", 2, 7,
 
+				"Ac", "Actinium", "(227)", 4, 10,
 
+				"Th", "Thorium", "232.03806", 5, 10,
 
+				"Pa", "Protactinium", "231.0588", 6, 10,
 
+				"U", "Uranium", "238.02891", 7, 10,
 
+				"Np", "Neptunium", "(237)", 8, 10,
 
+				"Pu", "Plutonium", "(244)", 9, 10,
 
+				"Am", "Americium", "(243)", 10, 10,
 
+				"Cm", "Curium", "(247)", 11, 10,
 
+				"Bk", "Berkelium", "(247)", 12, 10,
 
+				"Cf", "Californium", "(251)", 13, 10,
 
+				"Es", "Einstenium", "(252)", 14, 10,
 
+				"Fm", "Fermium", "(257)", 15, 10,
 
+				"Md", "Mendelevium", "(258)", 16, 10,
 
+				"No", "Nobelium", "(259)", 17, 10,
 
+				"Lr", "Lawrencium", "(262)", 18, 10,
 
+				"Rf", "Rutherfordium", "(267)", 4, 7,
 
+				"Db", "Dubnium", "(268)", 5, 7,
 
+				"Sg", "Seaborgium", "(271)", 6, 7,
 
+				"Bh", "Bohrium", "(272)", 7, 7,
 
+				"Hs", "Hassium", "(270)", 8, 7,
 
+				"Mt", "Meitnerium", "(276)", 9, 7,
 
+				"Ds", "Darmstadium", "(281)", 10, 7,
 
+				"Rg", "Roentgenium", "(280)", 11, 7,
 
+				"Cn", "Copernicium", "(285)", 12, 7,
 
+				"Uut", "Unutrium", "(284)", 13, 7,
 
+				"Fl", "Flerovium", "(289)", 14, 7,
 
+				"Uup", "Ununpentium", "(288)", 15, 7,
 
+				"Lv", "Livermorium", "(293)", 16, 7,
 
+				"Uus", "Ununseptium", "(294)", 17, 7,
 
+				"Uuo", "Ununoctium", "(294)", 18, 7
 
+			];
 
+
 
+			var camera, scene, renderer;
 
+			var controls;
 
+			
+			var state = 0;
 
+
 
+			var objects = [];
 
+			var targets = { table: [], sphere: [], helix: [], grid: [] };
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.z = 3000;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// table
 
+
 
+				for ( var i = 0; i < table.length; i += 5 ) {
 
+
 
+					var element = document.createElement( 'div' );
 
+					element.className = 'element';
 
+					element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
 
+
 
+					var number = document.createElement( 'div' );
 
+					number.className = 'number';
 
+					number.textContent = (i/5) + 1;
 
+					element.appendChild( number );
 
+
 
+					var symbol = document.createElement( 'div' );
 
+					symbol.className = 'symbol';
 
+					symbol.textContent = table[ i ];
 
+					element.appendChild( symbol );
 
+
 
+					var details = document.createElement( 'div' );
 
+					details.className = 'details';
 
+					details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
 
+					element.appendChild( details );
 
+
 
+					var object = new THREE.CSS3DObject( element );
 
+					object.position.x = Math.random() * 4000 - 2000;
 
+					object.position.y = Math.random() * 4000 - 2000;
 
+					object.position.z = Math.random() * 4000 - 2000;
 
+					scene.add( object );
 
+
 
+					objects.push( object );
 
+
 
+					//
 
+
 
+					var object = new THREE.Object3D();
 
+					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
 
+					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
+
 
+					targets.table.push( object );
 
+
 
+				}
 
+
 
+				// sphere
 
+
 
+				var vector = new THREE.Vector3();
 
+
 
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+					var phi = Math.acos( -1 + ( 2 * i ) / l );
 
+					var theta = Math.sqrt( l * Math.PI ) * phi;
 
+
 
+					var object = new THREE.Object3D();
 
+
 
+					object.position.x = 800 * Math.cos( theta ) * Math.sin( phi );
 
+					object.position.y = 800 * Math.sin( theta ) * Math.sin( phi );
 
+					object.position.z = 800 * Math.cos( phi );
 
+
 
+					vector.copy( object.position ).multiplyScalar( 2 );
 
+
 
+					object.lookAt( vector );
 
+
 
+					targets.sphere.push( object );
 
+
 
+				}
 
+
 
+				// helix
 
+
 
+				var vector = new THREE.Vector3();
 
+
 
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+					var phi = i * 0.175 + Math.PI;
 
+
 
+					var object = new THREE.Object3D();
 
+
 
+					object.position.x = 900 * Math.sin( phi );
 
+					object.position.y = - ( i * 8 ) + 450;
 
+					object.position.z = 900 * Math.cos( phi );
 
+
 
+					vector.x = object.position.x * 2;
 
+					vector.y = object.position.y;
 
+					vector.z = object.position.z * 2;
 
+
 
+					object.lookAt( vector );
 
+
 
+					targets.helix.push( object );
 
+
 
+				}
 
+
 
+				// grid
 
+
 
+				for ( var i = 0; i < objects.length; i ++ ) {
 
+
 
+					var object = new THREE.Object3D();
 
+
 
+					object.position.x = ( ( i % 5 ) * 400 ) - 800;
 
+					object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
 
+					object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;
 
+
 
+					targets.grid.push( object );
 
+
 
+				}
 
+
 
+				//
 
+
 
+				renderer = new THREE.CSS3DStereoRenderer();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.domElement.style.position = 'absolute';
 
+				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls.rotateSpeed = 0.5;
 
+				controls.minDistance = 500;
 
+				controls.maxDistance = 6000;
 
+				controls.addEventListener( 'change', render );
 
+
 
+				transform( targets.table, 5000 );
 
+
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			var isFullscreen = false;
 
+
 
+			window.addEventListener( 'touchend', function () {
 
+
 
+				if ( isFullscreen === false ) {
 
+
 
+					document.body.webkitRequestFullscreen();
 
+
 
+					isFullscreen = true;
 
+
 
+				} else {
 
+				
+					document.webkitExitFullscreen();
 
+					
+					isFullscreen = false;
 
+				
+				}
 
+			
+			} );
 
+
 
+			function transform( positions, duration ) {
 
+
 
+				TWEEN.removeAll();
 
+
 
+				for ( var i = 0; i < objects.length; i ++ ) {
 
+
 
+					var object = objects[ i ];
 
+					var target = positions[ i ];
 
+
 
+					new TWEEN.Tween( object.position )
 
+						.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
 
+						.easing( TWEEN.Easing.Exponential.InOut )
 
+						.start();
 
+
 
+					new TWEEN.Tween( object.rotation )
 
+						.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
 
+						.easing( TWEEN.Easing.Exponential.InOut )
 
+						.start();
 
+
 
+				}
 
+
 
+				new TWEEN.Tween( this )
 
+					.to( {}, duration * 2 )
 
+					.onUpdate( render )
 
+					.onComplete( function () {
 
+
 
+						switch ( state ) {
 
+							case 0:
 
+								transform( targets.sphere, 2000 );
 
+								break;
 
+							case 1:
 
+								transform( targets.helix, 2000 );
 
+								break;
 
+							case 2:
 
+								transform( targets.grid, 2000 );
 
+								break;
 
+							case 3:
 
+								transform( targets.table, 2000 );
 
+								break;
 
+						}
 
+
 
+						state = state + 1;
 
+
 
+						if ( state > 3 ) state = 0;
 
+
 
+					})
 
+					.start();
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				TWEEN.update();
 
+
 
+				controls.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 3 - 0
examples/index.html
View File 

@@ -290,6 +290,9 @@
 
 				"css3d_sprites",
 
 				"css3d_sprites",
 
 				"css3d_youtube"
 
 				"css3d_youtube"
 
 			],
 
 			],
 
+			"css3d stereo": [
 
+				"css3dstereo_periodictable",
 
+			],
 
 			"misc": [
 
 			"misc": [
 
 				"misc_animation_keys",
 
 				"misc_animation_keys",
 
 				"misc_controls_deviceorientation",
 
 				"misc_controls_deviceorientation",

+ 327 - 0
examples/js/renderers/CSS3DStereoRenderer.js
View File 

@@ -0,0 +1,327 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+THREE.CSS3DObject = function ( element ) {
 
+
 
+	THREE.Object3D.call( this );
 
+
 
+	this.elementL = element.cloneNode( true );
 
+	this.elementL.style.position = 'absolute';
 
+
 
+	this.elementR = element.cloneNode( true );
 
+	this.elementR.style.position = 'absolute';
 
+	
+	this.addEventListener( 'removed', function ( event ) {
 
+
 
+		if ( this.elementL.parentNode !== null ) {
 
+
 
+			this.elementL.parentNode.removeChild( this.elementL );
 
+
 
+		}
 
+
 
+		if ( this.elementR.parentNode !== null ) {
 
+
 
+			this.elementR.parentNode.removeChild( this.elementR );
 
+
 
+		}
 
+
 
+	} );
 
+
 
+};
 
+
 
+THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
 
+
 
+THREE.CSS3DSprite = function ( element ) {
 
+
 
+	THREE.CSS3DObject.call( this, element );
 
+
 
+};
 
+
 
+THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype );
 
+
 
+//
 
+
 
+THREE.CSS3DStereoRenderer = function () {
 
+
 
+	console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
 
+
 
+	var _width, _height;
 
+	var _widthHalf, _heightHalf;
 
+
 
+	var matrix = new THREE.Matrix4();
 
+
 
+	var _position = new THREE.Vector3();
 
+	var _quaternion = new THREE.Quaternion();
 
+	var _scale = new THREE.Vector3();
 
+
 
+	var _cameraL = new THREE.PerspectiveCamera();
 
+	var _cameraR = new THREE.PerspectiveCamera();
 
+	var _target = new THREE.Vector3();
 
+
 
+	this.separation = 6;
 
+	this.targetDistance = 500;
 
+
 
+	//
 
+
 
+	var domElement = document.createElement( 'div' );
 
+
 
+	this.domElement = domElement;
 
+
 
+	//
 
+
 
+	var domElementL = document.createElement( 'div' );
 
+	domElementL.style.display = 'inline-block';
 
+	domElementL.style.overflow = 'hidden';
 
+
 
+	domElementL.style.WebkitTransformStyle = 'preserve-3d';
 
+	domElementL.style.MozTransformStyle = 'preserve-3d';
 
+	domElementL.style.oTransformStyle = 'preserve-3d';
 
+	domElementL.style.transformStyle = 'preserve-3d';
 
+
 
+	domElement.appendChild( domElementL );
 
+
 
+	var cameraElementL = document.createElement( 'div' );
 
+
 
+	cameraElementL.style.WebkitTransformStyle = 'preserve-3d';
 
+	cameraElementL.style.MozTransformStyle = 'preserve-3d';
 
+	cameraElementL.style.oTransformStyle = 'preserve-3d';
 
+	cameraElementL.style.transformStyle = 'preserve-3d';
 
+
 
+	domElementL.appendChild( cameraElementL );
 
+
 
+	//
 
+
 
+	var domElementR = document.createElement( 'div' );
 
+	domElementR.style.display = 'inline-block';
 
+	domElementR.style.overflow = 'hidden';
 
+
 
+	domElementR.style.WebkitTransformStyle = 'preserve-3d';
 
+	domElementR.style.MozTransformStyle = 'preserve-3d';
 
+	domElementR.style.oTransformStyle = 'preserve-3d';
 
+	domElementR.style.transformStyle = 'preserve-3d';
 
+
 
+	domElement.appendChild( domElementR );
 
+
 
+	var cameraElementR = document.createElement( 'div' );
 
+
 
+	cameraElementR.style.WebkitTransformStyle = 'preserve-3d';
 
+	cameraElementR.style.MozTransformStyle = 'preserve-3d';
 
+	cameraElementR.style.oTransformStyle = 'preserve-3d';
 
+	cameraElementR.style.transformStyle = 'preserve-3d';
 
+
 
+	domElementR.appendChild( cameraElementR );
 
+
 
+	this.setClearColor = function () {
 
+
 
+	};
 
+
 
+	this.setSize = function ( width, height ) {
 
+
 
+		domElement.style.width = width + 'px';
 
+		domElement.style.height = height + 'px';
 
+
 
+		_width = width / 2;
 
+		_height = height;
 
+
 
+		_widthHalf = _width / 2;
 
+		_heightHalf = _height / 2;
 
+
 
+		domElementL.style.width = _width + 'px';
 
+		domElementL.style.height = _height + 'px';
 
+
 
+		cameraElementL.style.width = _width + 'px';
 
+		cameraElementL.style.height = _height + 'px';
 
+
 
+		domElementR.style.width = _width + 'px';
 
+		domElementR.style.height = _height + 'px';
 
+
 
+		cameraElementR.style.width = _width + 'px';
 
+		cameraElementR.style.height = _height + 'px';
 
+
 
+	};
 
+
 
+	var epsilon = function ( value ) {
 
+
 
+		return Math.abs( value ) < 0.000001 ? 0 : value;
 
+
 
+	};
 
+
 
+	var getCameraCSSMatrix = function ( matrix ) {
 
+
 
+		var elements = matrix.elements;
 
+
 
+		return 'matrix3d(' +
 
+			epsilon( elements[ 0 ] ) + ',' +
 
+			epsilon( - elements[ 1 ] ) + ',' +
 
+			epsilon( elements[ 2 ] ) + ',' +
 
+			epsilon( elements[ 3 ] ) + ',' +
 
+			epsilon( elements[ 4 ] ) + ',' +
 
+			epsilon( - elements[ 5 ] ) + ',' +
 
+			epsilon( elements[ 6 ] ) + ',' +
 
+			epsilon( elements[ 7 ] ) + ',' +
 
+			epsilon( elements[ 8 ] ) + ',' +
 
+			epsilon( - elements[ 9 ] ) + ',' +
 
+			epsilon( elements[ 10 ] ) + ',' +
 
+			epsilon( elements[ 11 ] ) + ',' +
 
+			epsilon( elements[ 12 ] ) + ',' +
 
+			epsilon( - elements[ 13 ] ) + ',' +
 
+			epsilon( elements[ 14 ] ) + ',' +
 
+			epsilon( elements[ 15 ] ) +
 
+		')';
 
+
 
+	};
 
+
 
+	var getObjectCSSMatrix = function ( matrix ) {
 
+
 
+		var elements = matrix.elements;
 
+
 
+		return 'translate3d(-50%,-50%,0) matrix3d(' +
 
+			epsilon( elements[ 0 ] ) + ',' +
 
+			epsilon( elements[ 1 ] ) + ',' +
 
+			epsilon( elements[ 2 ] ) + ',' +
 
+			epsilon( elements[ 3 ] ) + ',' +
 
+			epsilon( - elements[ 4 ] ) + ',' +
 
+			epsilon( - elements[ 5 ] ) + ',' +
 
+			epsilon( - elements[ 6 ] ) + ',' +
 
+			epsilon( - elements[ 7 ] ) + ',' +
 
+			epsilon( elements[ 8 ] ) + ',' +
 
+			epsilon( elements[ 9 ] ) + ',' +
 
+			epsilon( elements[ 10 ] ) + ',' +
 
+			epsilon( elements[ 11 ] ) + ',' +
 
+			epsilon( elements[ 12 ] ) + ',' +
 
+			epsilon( elements[ 13 ] ) + ',' +
 
+			epsilon( elements[ 14 ] ) + ',' +
 
+			epsilon( elements[ 15 ] ) +
 
+		')';
 
+
 
+	};
 
+
 
+	var renderObject = function ( object, camera, cameraElement, side ) {
 
+
 
+		if ( object instanceof THREE.CSS3DObject ) {
 
+
 
+			var style;
 
+
 
+			if ( object instanceof THREE.CSS3DSprite ) {
 
+
 
+				// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
 
+
 
+				matrix.copy( camera.matrixWorldInverse );
 
+				matrix.transpose();
 
+				matrix.copyPosition( object.matrixWorld );
 
+				matrix.scale( object.scale );
 
+
 
+				matrix.elements[ 3 ] = 0;
 
+				matrix.elements[ 7 ] = 0;
 
+				matrix.elements[ 11 ] = 0;
 
+				matrix.elements[ 15 ] = 1;
 
+
 
+				style = getObjectCSSMatrix( matrix );
 
+
 
+			} else {
 
+
 
+				style = getObjectCSSMatrix( object.matrixWorld );
 
+
 
+			}
 
+
 
+			var element = object[ 'element' + side ];
 
+
 
+			element.style.WebkitTransform = style;
 
+			element.style.MozTransform = style;
 
+			element.style.oTransform = style;
 
+			element.style.transform = style;
 
+
 
+			if ( element.parentNode !== cameraElement ) {
 
+
 
+				cameraElement.appendChild( element );
 
+
 
+			}
 
+
 
+		}
 
+
 
+		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
 
+
 
+			renderObject( object.children[ i ], camera, cameraElement, side );
 
+
 
+		}
 
+
 
+	};
 
+
 
+	this.render = function ( scene, camera ) {
 
+
 
+		scene.updateMatrixWorld();
 
+
 
+		if ( camera.parent === undefined ) camera.updateMatrixWorld();
 
+
 
+		camera.matrixWorld.decompose( _position, _quaternion, _scale );
 
+
 
+		_target.set( 0, 0, - this.targetDistance );
 
+		_target.applyQuaternion( _quaternion );
 
+		_target.add( _position );
 
+
 
+		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
 
+
 
+		// Left
 
+		
+		_cameraL.fov = camera.fov;
 
+		_cameraL.aspect = 0.5 * camera.aspect;
 
+		_cameraL.updateProjectionMatrix();
 
+
 
+		_cameraL.near = camera.near;
 
+		_cameraL.far = camera.far;
 
+
 
+		_cameraL.position.copy( _position );
 
+		_cameraL.translateX( - this.separation );
 
+		_cameraL.lookAt( _target );
 
+		_cameraL.updateMatrixWorld();
 
+
 
+		domElementL.style.WebkitPerspective = fov + "px";
 
+		domElementL.style.MozPerspective = fov + "px";
 
+		domElementL.style.oPerspective = fov + "px";
 
+		domElementL.style.perspective = fov + "px";
 
+
 
+		_cameraL.matrixWorldInverse.getInverse( _cameraL.matrixWorld );
 
+
 
+		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( _cameraL.matrixWorldInverse ) +
 
+			" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
 
+
 
+		cameraElementL.style.WebkitTransform = style;
 
+		cameraElementL.style.MozTransform = style;
 
+		cameraElementL.style.oTransform = style;
 
+		cameraElementL.style.transform = style;
 
+		
+		renderObject( scene, _cameraL, cameraElementL, 'L' );
 
+		
+		// Right
 
+		
+		_cameraR.projectionMatrix = _cameraL.projectionMatrix;
 
+
 
+		_cameraR.near = camera.near;
 
+		_cameraR.far = camera.far;
 
+
 
+		_cameraR.position.copy( _position );
 
+		_cameraR.translateX( this.separation );
 
+		_cameraR.lookAt( _target );
 
+		_cameraR.updateMatrixWorld();
 
+
 
+		domElementR.style.WebkitPerspective = fov + "px";
 
+		domElementR.style.MozPerspective = fov + "px";
 
+		domElementR.style.oPerspective = fov + "px";
 
+		domElementR.style.perspective = fov + "px";
 
+
 
+		_cameraR.matrixWorldInverse.getInverse( _cameraR.matrixWorld );
 
+
 
+		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( _cameraR.matrixWorldInverse ) +
 
+			" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
 
+
 
+		cameraElementR.style.WebkitTransform = style;
 
+		cameraElementR.style.MozTransform = style;
 
+		cameraElementR.style.oTransform = style;
 
+		cameraElementR.style.transform = style;
 
+		
+		renderObject( scene, _cameraR, cameraElementR, 'R' );
 
+
 
+	};
 
+
 
+};