球体与立方体凹凸与threejs

Question

我正在网上冲浪，试图解决这个问题。 我正在关注这个非常酷的示例，http://threejs.org/examples/css3d_periodictable.html 我的问题是我将正方形转换为 css 立方体，但球体仍在切割它们，我需要的是让立方体撞到球体上。请任何可以帮助我提供建议或路径的人，或者可能告诉我我使用错误的示例开始。 :) 我是使用threejs的新手。

谢谢。

正如 Lee Tylor 所说，这里有更多关于我的成就的信息：

就像我在关注 Threejs 上的周期性样本之前所说的那样，这就是我正在初始化球体的事情，除了在输入上键入单词时，匹配的单词将转换为立方体，那部分正在工作，但在侧面我们可以看到立方体是平的，我试图达到的目标是使立方体在球体上颠簸。所以我不确定这是css问题还是threejs问题。

示例运行：http://dev.certatim.com/panhaptic/sphere_js/

这是所有事情发生时的文件：dev.certatim.com/panhaptic/sphere_js/app/javascripts/functions.js

我希望这会有所帮助，:(

Answer 1

你可以像这样使用 CSS3DRenderer 创建一个立方体：

// 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 );

}

小提琴：http://jsfiddle.net/MdPrb/7

three.js r.64