I am looking for sample code, that would show how one can create a cube (similar to THREE.CubeGeometry) in ThreeJS using CSS3DRenderer. Something like below
var my_cube = new **CSS3dCubeGeometry**( cube_width, cube_height, cube_depth) var object = new THREE.CSS3DObject( my_cube ); scene.add( object ); THREE.CSS3DObject doesn't exist and I am looking for a potential implementation of it.
You can create a cube with CSS3DRenderer like so:
// params var r = Math.PI / 2; var d = 50; var pos = [ [ d, 0, 0 ], [ -d, 0, 0 ], [ 0, d, 0 ], [ 0, -d, 0 ], [ 0, 0, d ], [ 0, 0, -d ] ]; 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(); scene.add( cube ); // sides for ( var i = 0; i < 6; i ++ ) { var element = document.createElement( 'div' ); element.style.width = '100px'; element.style.height = '100px'; element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle(); element.style.opacity = '0.50'; var object = new THREE.CSS3DObject( element ); object.position.fromArray( pos[ i ] ); object.rotation.fromArray( rot[ i ] ); cube.add( object ); } Fiddle: http://jsfiddle.net/MdPrb/7
three.js r.64