Added CSS2DRenderer.

examples/js/renderers/CSS2DRenderer.js

@@ -0,0 +1,114 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.CSS2DObject = function ( element ) {
+
+	THREE.Object3D.call( this );
+
+	this.element = element;
+	this.element.style.position = 'absolute';
+
+	this.addEventListener( 'removed', function ( event ) {
+
+		if ( this.element.parentNode !== null ) {
+
+			this.element.parentNode.removeChild( this.element );
+
+			for ( var i = 0, l = this.children.length; i < l; i ++ ) {
+
+				this.children[ i ].dispatchEvent( event );
+
+			}
+
+		}
+
+	} );
+
+};
+
+THREE.CSS2DObject.prototype = Object.create( THREE.Object3D.prototype );
+
+//
+
+THREE.CSS2DRenderer = function () {
+
+	console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
+
+	var _width, _height;
+	var _widthHalf, _heightHalf;
+
+	var vector4 = new THREE.Vector4();
+	var viewMatrix = new THREE.Matrix4();
+	var viewProjectionMatrix = new THREE.Matrix4();
+
+	var domElement = document.createElement( 'div' );
+	domElement.style.overflow = 'hidden';
+
+	this.domElement = domElement;
+
+	this.setSize = function ( width, height ) {
+
+		_width = width;
+		_height = height;
+
+		_widthHalf = _width / 2;
+		_heightHalf = _height / 2;
+
+		domElement.style.width = width + 'px';
+		domElement.style.height = height + 'px';
+
+	};
+
+	var renderObject = function ( object, camera ) {
+
+		if ( object instanceof THREE.CSS2DObject ) {
+
+			var element = object.element;
+			var matrix = object.matrixWorld;
+
+			vector4.set( matrix.elements[ 12 ], matrix.elements[ 13 ], matrix.elements[ 14 ], 1 );
+			vector4.applyMatrix4( viewProjectionMatrix );
+
+			vector4.x = ( vector4.x / vector4.w ) * _widthHalf + _widthHalf;
+			vector4.y = - ( vector4.y / vector4.w ) * _heightHalf + _heightHalf;
+
+			var style = 'translate(-50%,-50%) translate(' + vector4.x + 'px,' + vector4.y + 'px)';
+
+			element.style.WebkitTransform = style;
+			element.style.MozTransform = style;
+			element.style.oTransform = style;
+			element.style.transform = style;
+
+			if ( element.parentNode !== domElement ) {
+
+				domElement.appendChild( element );
+
+			}
+
+		}
+
+		for ( var i = 0, l = object.children.length; i < l; i ++ ) {
+
+			renderObject( object.children[ i ], camera );
+
+		}
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		scene.updateMatrixWorld();
+
+		if ( camera.parent === undefined ) camera.updateMatrixWorld();
+
+		camera.matrixWorldInverse.getInverse( camera.matrixWorld );
+
+		viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );
+		viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
+
+		renderObject( scene, camera );
+
+	};
+
+};