Added CSS3DRenderer with an example.

examples/js/renderers/CSS3DRenderer.js

@@ -0,0 +1,153 @@
+/**
+ * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.CSS3DObject = function ( element ) {
+
+	THREE.Object3D.call( this );
+
+	this.element = element;
+	this.element.style.position = "absolute";
+	this.element.style.WebkitTransformStyle = 'preserve-3d';
+	this.element.style.MozTransformStyle = 'preserve-3d';
+	this.element.style.oTransformStyle = 'preserve-3d';
+
+};
+
+THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
+
+//
+
+THREE.CSS3DRenderer = function () {
+
+	console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
+
+	var _width, _height;
+	var _widthHalf, _heightHalf;
+	var _projector = new THREE.Projector();
+
+	this.domElement = document.createElement( 'div' );
+
+	this.domElement.style.WebkitTransformStyle = 'preserve-3d';
+	this.domElement.style.WebkitPerspectiveOrigin = '50% 50%';
+
+	this.domElement.style.MozTransformStyle = 'preserve-3d';
+	this.domElement.style.MozPerspectiveOrigin = '50% 50%';
+
+	this.domElement.style.oTransformStyle = 'preserve-3d';
+	this.domElement.style.oPerspectiveOrigin = '50% 50%';
+
+	// TODO: Shouldn't it be possible to remove cameraElement?
+
+	this.cameraElement = document.createElement( 'div' );
+	this.cameraElement.style.WebkitTransformStyle = 'preserve-3d';
+	this.cameraElement.style.MozTransformStyle = 'preserve-3d';
+	this.cameraElement.style.oTransformStyle = 'preserve-3d';
+
+	this.domElement.appendChild( this.cameraElement );
+
+	this.setSize = function ( width, height ) {
+
+		_width = width;
+		_height = height;
+
+		_widthHalf = _width / 2;
+		_heightHalf = _height / 2;
+
+		this.domElement.style.width = width + 'px';
+		this.domElement.style.height = height + 'px';
+
+		this.cameraElement.style.width = width + 'px';
+		this.cameraElement.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) scale3d(1,-1,1) 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 ] ) +
+		')';
+
+	}
+
+	this.render = function ( scene, camera ) {
+
+		var fov = 0.5 / Math.tan( camera.fov * Math.PI / 360 ) * _height;
+
+		this.domElement.style.WebkitPerspective = fov + "px";
+		this.domElement.style.MozPerspective = fov + "px";
+		this.domElement.style.oPerspective = fov + "px";
+
+		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) + " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
+
+		this.cameraElement.style.WebkitTransform = style;
+		this.cameraElement.style.MozTransform = style;
+		this.cameraElement.style.oTransform = style;
+
+		var objects = _projector.projectScene( scene, camera, false ).objects;
+
+		for ( var i = 0, il = objects.length; i < il; i ++ ) {
+
+			var object = objects[ i ].object;
+			var element = object.element;
+
+			style = getObjectCSSMatrix( object.matrixWorld );
+
+			element.style.WebkitTransform = style;
+			element.style.MozTransform = style;
+			element.style.oTransform = style;
+
+		}
+
+	};
+
+};

examples/misc_css3d.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<style>
+			body {
+				background-color: #ffffff;
+				margin: 0;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<script src="../build/three.min.js"></script>
+		<script src="js/renderers/CSS3DRenderer.js"></script>
+		<script>
+
+			var camera, scene, renderer;
+			var geometry, material, mesh;
+
+			var scene2, renderer2;
+
+			var controls;
+
+			init();
+			animate();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 200, 200, 200 );
+
+				scene = new THREE.Scene();
+
+				geometry = new THREE.CubeGeometry( 200, 200, 200 );
+				material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				renderer = new THREE.CanvasRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				scene2 = new THREE.Scene();
+
+				renderer2 = new THREE.CSS3DRenderer();
+				renderer2.setSize( window.innerWidth, window.innerHeight );
+				renderer2.domElement.style.position = 'absolute';
+				renderer2.domElement.style.top = 0;
+				document.body.appendChild( renderer2.domElement );
+
+				for ( var i = 0; i < 20; i ++ ) {
+
+					var element = document.createElement( 'div' );
+					element.style.width = '100px';
+					element.style.height = '100px';
+					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getContextStyle();
+					renderer2.cameraElement.appendChild( element );
+
+					var object = new THREE.CSS3DObject( element );
+					object.position.x = Math.random() * 200 - 100;
+					object.position.y = Math.random() * 200 - 100;
+					object.position.z = Math.random() * 200 - 100;
+					object.scale.x = Math.random() + 0.5;
+					object.scale.y = Math.random() + 0.5;
+					scene2.add( object );
+
+				}
+
+				controls = new THREE.TrackballControls( camera );
+
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+
+				controls.noZoom = false;
+				controls.noPan = false;
+
+				controls.staticMoving = false;
+				controls.dynamicDampingFactor = 0.3;
+
+				controls.keys = [ 65, 83, 68 ];
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				controls.update();
+
+				renderer.render( scene, camera );
+				renderer2.render( scene2, camera );
+
+			}
+
+		</script>
+	</body>
+</html>

utils/includes/css3d.json

@@ -0,0 +1,30 @@
+[
+	"../src/Three.js",
+	"../src/core/Vector2.js",
+	"../src/core/Vector3.js",
+	"../src/core/Vector4.js",
+	"../src/core/Matrix3.js",
+	"../src/core/Matrix4.js",
+	"../src/core/EventTarget.js",
+	"../src/core/Frustum.js",
+	"../src/core/Ray.js",
+	"../src/core/Object3D.js",
+	"../src/core/Projector.js",
+	"../src/core/Quaternion.js",
+	"../src/cameras/Camera.js",
+	"../src/cameras/PerspectiveCamera.js",
+	"../src/lights/Light.js",
+	"../src/objects/Particle.js",
+	"../src/objects/Line.js",
+	"../src/objects/Mesh.js",
+	"../src/objects/Bone.js",
+	"../src/objects/Sprite.js",
+	"../src/scenes/Scene.js",
+	"../src/renderers/renderables/RenderableVertex.js",
+	"../src/renderers/renderables/RenderableFace3.js",
+	"../src/renderers/renderables/RenderableFace4.js",
+	"../src/renderers/renderables/RenderableObject.js",
+	"../src/renderers/renderables/RenderableParticle.js",
+	"../src/renderers/renderables/RenderableLine.js",
+	"../examples/js/renderers/CSS3DRenderer.js"
+]