Question

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

感谢。

正如Lee Tylor在这里建议的更多关于我的成就的信息：

就像我在关注Threejs上的周期性样本之前所说的那样，所以这里是我正在初始化球体的事情，正如示例所做的那样，除非在输入上输入一个单词，匹配的人将转换为立方体，那个部分正在工作，但在侧面，我们可以看到立方体是平的，我试图实现，使立方体颠覆球体。所以我不确定这是一个css问题还是三个问题。

运行示例：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

球体与立方体颠簸与threejs

1 个答案: