Sphere with cube bumps with threejs

Question

i'm surfing on the web trying to solve this problem. I'm following this example which is pretty cool btw, http://threejs.org/examples/css3d_periodictable.html my question i convert the squares to css cubes but the sphere still cutting them, what i need is to let the cubes bump over the sphere. Please anyone who can help me with an advice or path to follow or maybe telling me that i using the wrong example to start. :) I'm new using threejs.

Thanks.

As Lee Tylor suggest here is more info about my accomplish:

Like i said before i'm following the periodic sample on Threejs, so here is the thing i'm initializing the sphere exactly how the example does except when a words are typed on the inputs the one who matches are transform into cubes, that part is working but on the sides we can see the cubes are flat that what im trying to achive make the cube bumps over the sphere. So i'm not sure if this is a css problem or threejs issue.

example running: http://dev.certatim.com/panhaptic/sphere_js/

this is the file were everything happens: dev.certatim.com/panhaptic/sphere_js/app/javascripts/functions.js

I hope this helps, :(

Answer 1

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