使用 CSS3DRenderer 创建一个 CubeGeometry equivilent答案

【问题标题】：Creating a CubeGeometry equivilent using CSS3DRenderer使用 CSS3DRenderer 创建一个 CubeGeometry equivilent
【发布时间】：2016-12-26 05:28:23
【问题描述】：

我正在寻找示例代码，它将展示如何使用 CSS3DRenderer 在 ThreeJS 中创建一个立方体（类似于 THREE.CubeGeometry）。类似下面的东西

var my_cube = new **CSS3dCubeGeometry**( cube_width, cube_height, cube_depth)

var object = new THREE.CSS3DObject( my_cube );

scene.add( object );

THREE.CSS3DObject 不存在，我正在寻找它的潜在实现。

【问题讨论】：

标签： three.js geometry renderer

【解决方案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

【讨论】：

感谢 WestLangley，此示例创建了一个 100px、100px、100px 的立方体。我想同时参数化位置和尺寸。
请尝试，如果您有问题，请在新帖子中添加您的额外要求。但是，我认为您可以自己解决这个问题。 :-)