使用CSS3DRenderer创建一个CubeGeometry equivilent [英] Creating a CubeGeometry equivilent using CSS3DRenderer

问题描述

我正在寻找示例代码，这将显示如何在ThreeJS中使用 CSS3DRenderer 创建一个多维数据集（类似于 THREE.CubeGeometry / code>。如下所示

  var my_cube = new ** CSS3dCubeGeometry **（cube_width，cube_height，cube_depth）
 
 var object = new THREE.CSS3DObject（my_cube）; 
 
 scene.add（object）; 
  

THREE.CSS3DObject 不存在，您可以使用 CSS3DRenderer 来创建一个多维数据集。

$ p $ // 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

I am looking for sample code, that would show how one can create a cube (similar to THREE.CubeGeometry) in ThreeJS using CSS3DRenderer. Something like below

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

var object = new THREE.CSS3DObject( my_cube );

scene.add( object );

THREE.CSS3DObject doesn't exist and I am looking for a potential implementation of it.

解决方案

You can create a cube with CSS3DRenderer like so:

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

这篇关于使用CSS3DRenderer创建一个CubeGeometry equivilent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！