球體與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