CSS3DRenderer doesn't need the appendChild hack anymore.

However, it's not handling object removal yet. But I think I've an idea to handle all this stuff nicely...

examples/js/renderers/CSS3DRenderer.js

@@ -146,6 +146,12 @@ THREE.CSS3DRenderer = function () {
 			element.style.MozTransform = style;
 			element.style.oTransform = style;
 
+			if ( element.parentNode !== this.cameraElement ) {
+
+				this.cameraElement.appendChild( element );
+
+			}
+
 		}
 
 	};

examples/misc_css3d.html

@@ -30,6 +30,20 @@
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 200, 200 );
 
+				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 ];
+
 				scene = new THREE.Scene();
 
 				geometry = new THREE.CubeGeometry( 200, 200, 200 );
@@ -46,19 +60,12 @@
 
 				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;
@@ -70,19 +77,13 @@
 
 				}
 
-				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 ];
+				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 );
 
 			}
 

utils/build_all.bat

@@ -1,4 +1,5 @@
 python build.py --include common --include extras --minify --output ../build/three.min.js
 python build.py --include canvas --minify --output ../build/three-canvas.min.js
+python build.py --include css3d --minify --output ../build/three-css3d.min.js
 python build.py --include webgl --minify --output ../build/three-webgl.min.js
 python build.py --include extras --externs externs/extras.js --minify --output ../build/three-extras.min.js

utils/build_all.sh

@@ -2,5 +2,6 @@
 
 python build.py --include common --include extras --minify --output ../build/three.min.js
 python build.py --include canvas --minify --output ../build/three-canvas.min.js
+python build.py --include css3d --minify --output ../build/three-css3d.min.js
 python build.py --include webgl --minify --output ../build/three-webgl.min.js
 python build.py --include extras --externs externs/extras.js --minify --output ../build/three-extras.min.js