javascript - 带有 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 );

}

fiddle :http://jsfiddle.net/MdPrb/7

three.js r.64