Removed Projected dependency in CSS3DRenderer.

examples/js/renderers/CSS3DRenderer.js

@@ -34,36 +34,36 @@ THREE.CSS3DRenderer = function () {
 
 	var _width, _height;
 	var _widthHalf, _heightHalf;
-	var _projector = new THREE.Projector();
 
-	var _tmpMatrix = new THREE.Matrix4();
+	var matrix = new THREE.Matrix4();
 
-	this.domElement = document.createElement( 'div' );
+	var domElement = document.createElement( 'div' );
+	domElement.style.overflow = 'hidden';
 
-	this.domElement.style.overflow = 'hidden';
+	domElement.style.WebkitTransformStyle = 'preserve-3d';
+	domElement.style.WebkitPerspectiveOrigin = '50% 50%';
 
-	this.domElement.style.WebkitTransformStyle = 'preserve-3d';
-	this.domElement.style.WebkitPerspectiveOrigin = '50% 50%';
+	domElement.style.MozTransformStyle = 'preserve-3d';
+	domElement.style.MozPerspectiveOrigin = '50% 50%';
 
-	this.domElement.style.MozTransformStyle = 'preserve-3d';
-	this.domElement.style.MozPerspectiveOrigin = '50% 50%';
+	domElement.style.oTransformStyle = 'preserve-3d';
+	domElement.style.oPerspectiveOrigin = '50% 50%';
 
-	this.domElement.style.oTransformStyle = 'preserve-3d';
-	this.domElement.style.oPerspectiveOrigin = '50% 50%';
+	domElement.style.transformStyle = 'preserve-3d';
+	domElement.style.perspectiveOrigin = '50% 50%';
 
-	this.domElement.style.transformStyle = 'preserve-3d';
-	this.domElement.style.perspectiveOrigin = '50% 50%';
+	this.domElement = domElement;
 
-	// TODO: Shouldn't it be possible to remove cameraElement?
+	var cameraElement = document.createElement( 'div' );
 
-	this.cameraElement = document.createElement( 'div' );
+	cameraElement.style.WebkitTransformStyle = 'preserve-3d';
+	cameraElement.style.MozTransformStyle = 'preserve-3d';
+	cameraElement.style.oTransformStyle = 'preserve-3d';
+	cameraElement.style.transformStyle = 'preserve-3d';
 
-	this.cameraElement.style.WebkitTransformStyle = 'preserve-3d';
-	this.cameraElement.style.MozTransformStyle = 'preserve-3d';
-	this.cameraElement.style.oTransformStyle = 'preserve-3d';
-	this.cameraElement.style.transformStyle = 'preserve-3d';
+	domElement.appendChild( cameraElement );
 
-	this.domElement.appendChild( this.cameraElement );
+	this.cameraElement = cameraElement;
 
 	this.setSize = function ( width, height ) {
 
@@ -73,11 +73,11 @@ THREE.CSS3DRenderer = function () {
 		_widthHalf = _width / 2;
 		_heightHalf = _height / 2;
 
-		this.domElement.style.width = width + 'px';
-		this.domElement.style.height = height + 'px';
+		domElement.style.width = width + 'px';
+		domElement.style.height = height + 'px';
 
-		this.cameraElement.style.width = width + 'px';
-		this.cameraElement.style.height = height + 'px';
+		cameraElement.style.width = width + 'px';
+		cameraElement.style.height = height + 'px';
 
 	};
 
@@ -110,7 +110,7 @@ THREE.CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-	}
+	};
 
 	var getObjectCSSMatrix = function ( matrix ) {
 
@@ -135,77 +135,81 @@ THREE.CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-	}
+	};
 
-	this.render = function ( scene, camera ) {
+	var renderObject = function ( object, camera ) {
 
-		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
+		if ( object instanceof THREE.CSS3DObject ) {
 
-		this.domElement.style.WebkitPerspective = fov + "px";
-		this.domElement.style.MozPerspective = fov + "px";
-		this.domElement.style.oPerspective = fov + "px";
-		this.domElement.style.perspective = fov + "px";
+			if ( object instanceof THREE.CSS3DSprite ) {
 
-		var objects = _projector.projectScene( scene, camera, false ).objects;
+				// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
 
-		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) + " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
+				matrix.copy( camera.matrixWorldInverse );
+				matrix.transpose();
+				matrix.copyPosition( object.matrixWorld );
+				matrix.scale( object.scale );
 
-		this.cameraElement.style.WebkitTransform = style;
-		this.cameraElement.style.MozTransform = style;
-		this.cameraElement.style.oTransform = style;
-		this.cameraElement.style.transform = style;
+				matrix.elements[ 3 ] = 0;
+				matrix.elements[ 7 ] = 0;
+				matrix.elements[ 11 ] = 0;
+				matrix.elements[ 15 ] = 1;
 
-		for ( var i = 0, il = objects.length; i < il; i ++ ) {
+				style = getObjectCSSMatrix( matrix );
 
-			var object = objects[ i ].object;
+			} else {
 
-			if ( object instanceof THREE.CSS3DObject ) {
+				style = getObjectCSSMatrix( object.matrixWorld );
 
-				var element = object.element;
+			}
 
-				if ( object instanceof THREE.CSS3DSprite ) {
+			var element = object.element;
 
-					// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+			element.style.WebkitTransform = style;
+			element.style.MozTransform = style;
+			element.style.oTransform = style;
+			element.style.transform = style;
 
-					_tmpMatrix.copy( camera.matrixWorldInverse );
-					_tmpMatrix.transpose();
-					_tmpMatrix.copyPosition( object.matrixWorld );
-					_tmpMatrix.scale( object.scale );
+			if ( element.parentNode !== cameraElement ) {
 
-					_tmpMatrix.elements[ 3 ] = 0;
-					_tmpMatrix.elements[ 7 ] = 0;
-					_tmpMatrix.elements[ 11 ] = 0;
-					_tmpMatrix.elements[ 15 ] = 1;
+				cameraElement.appendChild( element );
 
-					style = getObjectCSSMatrix( _tmpMatrix );
+			}
 
-				} else {
+		}
 
-					style = getObjectCSSMatrix( object.matrixWorld );
+		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
 
-				}
+			renderObject( object.children[ i ], camera );
 
-				/*
-				element.style.WebkitBackfaceVisibility = 'hidden';
-				element.style.MozBackfaceVisibility = 'hidden';
-				element.style.oBackfaceVisibility = 'hidden';
-				element.style.backfaceVisibility = 'hidden';
-				*/
+		}
 
-				element.style.WebkitTransform = style;
-				element.style.MozTransform = style;
-				element.style.oTransform = style;
-				element.style.transform = style;
+	};
 
-				if ( element.parentNode !== this.cameraElement ) {
+	this.render = function ( scene, camera ) {
 
-					this.cameraElement.appendChild( element );
+		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
 
-				}
+		domElement.style.WebkitPerspective = fov + "px";
+		domElement.style.MozPerspective = fov + "px";
+		domElement.style.oPerspective = fov + "px";
+		domElement.style.perspective = fov + "px";
 
-			}
+		scene.updateMatrixWorld();
 
-		}
+		if ( camera.parent === undefined ) camera.updateMatrixWorld();
+
+		camera.matrixWorldInverse.getInverse( camera.matrixWorld );
+
+		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) +
+			" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
+
+		cameraElement.style.WebkitTransform = style;
+		cameraElement.style.MozTransform = style;
+		cameraElement.style.oTransform = style;
+		cameraElement.style.transform = style;
+
+		renderObject( scene, camera );
 
 	};