Merged with @mrdoob's changes to CSS3DRenderer billboards.

examples/css3d_molecules.html

@@ -275,7 +275,7 @@
 						var atom = document.createElement( 'img' );
 						atom.src = colorSprite;
 
-						var object = new THREE.CSS3DObject( atom );
+						var object = new THREE.CSS3DSprite( atom );
 						object.position.copy( position );
 						object.position.multiplyScalar( 75 );
 						object.billboard = true;

examples/css3d_periodictable.html

@@ -85,9 +85,9 @@
 				}
 
 			button {
-				color: rgb(127,255,255);
+				color: rgba(127,255,255,0.75);
 				background: transparent;
-				outline: 1px solid rgb(127,255,255);
+				outline: 1px solid rgba(127,255,255,0.75);
 				border: 0px;
 				padding: 5px 10px;
 				cursor: pointer;
@@ -97,7 +97,7 @@
 			}
 			button:active {
 				color: #000000;
-				background-color: rgba(0,255,255,1);
+				background-color: rgba(0,255,255,0.75);
 			}
 		</style>
 	</head>
@@ -337,13 +337,13 @@
 
 					var object = objects[ i ];
 
-					var phi = i * 0.2 + Math.PI;
+					var phi = i * 0.175 + Math.PI;
 
 					var object = new THREE.Object3D();
 
-					object.position.x = 1000 * Math.sin( phi );
-					object.position.y = i * 10 - 600;
-					object.position.z = 1000 * Math.cos( phi );
+					object.position.x = 1100 * Math.sin( phi );
+					object.position.y = - ( i * 8 ) + 450;
+					object.position.z = 1100 * Math.cos( phi );
 
 					vector.copy( object.position );
 					vector.x *= 2;

examples/js/renderers/CSS3DRenderer.js

@@ -7,8 +7,6 @@ THREE.CSS3DObject = function ( element ) {
 
 	THREE.Object3D.call( this );
 
-	this.billboard = false;
-
 	this.element = element;
 	this.element.style.position = "absolute";
 	this.element.style.WebkitTransformStyle = 'preserve-3d';
@@ -20,6 +18,14 @@ THREE.CSS3DObject = function ( element ) {
 
 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.CSS3DRenderer = function () {
@@ -157,7 +163,7 @@ THREE.CSS3DRenderer = function () {
 
 				var element = object.element;
 
-				if ( object.billboard )	{
+				if ( object instanceof THREE.CSS3DSprite ) {
 
 					// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/