CubeGeometry equivalent using CSS3DRenderer, Three.JS - three.js

Question

Following my previous question at SO, Creating a CubeGeometry equivilent using CSS3DRenderer I am trying to build a flexible 3D cube which would work under CSS3DRenderer.
Here is the current status, also available at http://jsfiddle.net/RJv3b/2/
There is a 3D cube which is create by WebGL in the example below, I would like to create a cube using CSS3D which would perfectly match the wireframe.
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( 400, 400, 400 );
controls = new THREE.OrbitControls( camera );
controls.noZoom = false;
controls.noPan = false;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry( 200, 300, 400 );
material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } );
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(50,100,70)
mesh.rotation.x = Math.PI/3;
mesh.rotation.y = Math.PI/4;
mesh.rotation.z = Math.PI/5;
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene2 = new THREE.Scene();
// params
var r = Math.PI / 2;
var width = 200;
var height = 300;
var depth = 400;
var x = 50
var y = 100
var z = 70
var pos = [ [ x+width/2, -y+height/2, z ], [ -depth, y/2, x/2 ], [ 0, height/2+y, x/2 ], [ depth, -y/2, x/2 ], [ x, y/2, depth/2+x/2 ], [ 0, y/2, -depth/2 +x/2] ];
var rot = [ [ 0, r, 0 ], [ 0, -r, 0 ], [ -r, 0, 0 ], [ r, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ];
// cube
var cube = new THREE.Object3D();
scene2.add( cube );
// sides
for ( var i = 0; i < 6; i ++ ) {
var txt = document.createTextNode("side:"+i);
var element = document.createElement( 'div' );
element.style.width = width+'px';
element.appendChild(txt);
element.style.height = height+'px';
element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
element.style.opacity = '0.8';
var object = new THREE.CSS3DObject( element );
object.position.fromArray( pos[ i ] );
object.rotation.fromArray( rot[ i ] );
cube.add( object );
}
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 );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
renderer2.render( scene2, camera );
}

Answer 1

I am in the process of attempting to knock out something similar to what you are looking to do. I can't give you a polished answer, but as soon as I finish my development I can come back and update with what really works.
To dynamically integrate data into your scene, which is what I believe you are trying to accomplish, try approaching the problem utilizing the power behind D3.js
D3 will allow you to create editable DOM elements. It also pairs really well with three.js.
Add
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
to your page or download the library and call it in to your page however you would like.
Using the code you have above, you could manipulate the DOM with something like this:
d3.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
and then end up with a result with which you can make further edits via CSS if need be.
As far as opting for a JUST CSS3D render, then simply edit your renderer to be exactly that, CSS3D.
Here is a link to D3.js: http://d3js.org/
Here is a link to D3.js integrated with three.js and rendered via CSS3D: http://www.delimited.io/blog/2014/3/14/d3js-threejs-and-css-3d-transforms
Hope this helps!

Answer 2

Actually here's a much better answer:
Ran into this while building my site. Thought of you! Cheers!
First off make sure you're using the three.js library as your WebGL API. For WebGL development in building for sites versus an app or video game, it's one of the most well documented and built upon libraries that currently exist.
With three.js up, now you can use some wonderful plugins. The one that directly solves your problem was written by the incredible developers over at THREEX.
Here's a link to the site so you can see all the plugins they have written:
http://www.threejsgames.com
Click Extensions. I know Icoulve just linked you to extensions, but I respect the work they put into the homepage. Showing it off for em'.
The Extension you are looking for is the "Dynamic Texture" extension. If viewing the extension from their site, you get a nice description/tutorial and an example to play with.
Otherwise you can just check out the plugin over at Github:
https://github.com/jeromeetienne/threex.dynamictexture
Hope this helps!