0

根据我在 SO 上的上一个问题，使用 CSS3DRenderer 创建一个 CubeGeometry equivilent，我正在尝试构建一个可以在 CSS3DRenderer 下工作的灵活 3D 立方体。

这是当前状态，也可在http://jsfiddle.net/RJv3b/2/获得

在下面的示例中有一个由 WebGL 创建的 3D 立方体，我想使用 CSS3D 创建一个与线框完美匹配的立方体。

var camera, scene, renderer;
var geometry, material, mesh;
var scene2, renderer2;
var controls;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 400, 400, 400 );
    controls = new THREE.OrbitControls( camera );
    controls.noZoom = false;
    controls.noPan = false;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 300, 400 );

    material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } );
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(50,100,70)
    mesh.rotation.x = Math.PI/3;
    mesh.rotation.y = Math.PI/4;
    mesh.rotation.z = Math.PI/5;

    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene2 = new THREE.Scene();

    // params
    var r = Math.PI / 2;
    var width = 200;
    var height = 300;
    var depth = 400;
    var x = 50
    var y = 100
    var z = 70
    var pos = [ [ x+width/2, -y+height/2, z ], [ -depth, y/2, x/2 ], [ 0, height/2+y, x/2 ], [ depth, -y/2, x/2 ], [ x, y/2, depth/2+x/2 ], [ 0, y/2, -depth/2 +x/2] ];
    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();
    scene2.add( cube );

    // sides
    for ( var i = 0; i < 6; i ++ ) {
        var txt = document.createTextNode("side:"+i);
        var element = document.createElement( 'div' );
        element.style.width = width+'px';
        element.appendChild(txt);
        element.style.height = height+'px';
        element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
        element.style.opacity = '0.8';
        var object = new THREE.CSS3DObject( element );
        object.position.fromArray( pos[ i ] );
        object.rotation.fromArray( rot[ i ] );
        cube.add( object );
    }

    renderer2 = new THREE.CSS3DRenderer();
    renderer2.setSize( window.innerWidth, window.innerHeight );
    renderer2.domElement.style.position = 'absolute';
    renderer2.domElement.style.top = 0;
    document.body.appendChild( renderer2.domElement );
}

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
    renderer2.render( scene2, camera );
}
4

2 回答 2

0

其实这里有一个更好的答案：

在构建我的网站时遇到了这个问题。想你了！干杯!

首先确保您使用three.js 库作为您的WebGL API。对于构建网站而不是应用程序或视频游戏的 WebGL 开发，它是目前存在的最有据可查的库之一。

有了three.js，现在你可以使用一些很棒的插件了。直接解决您的问题的一个是由 THREEX 的令人难以置信的开发人员编写的。

这是该站点的链接，因此您可以查看他们编写的所有插件：

http://www.threejsgames.com

单击扩展。我知道 Icoulve 只是将您链接到扩展，但我尊重他们在主页上所做的工作。为他们炫耀它。

您正在寻找的扩展是“动态纹理”扩展。如果从他们的网站查看扩展，您会得到一个很好的描述/教程和一个可以使用的示例。

否则你可以在 Github 上查看插件：

   https://github.com/jeromeetienne/threex.dynamictexture

希望这可以帮助！

于 2014-06-27T06:32:23.423 回答
0

我正在尝试完成与您想要做的类似的事情。我不能给你一个完美的答案，但是一旦我完成了我的开发，我就可以回来更新真正有效的东西。

要将数据动态集成到您的场景中，这是我相信您正在尝试完成的事情，请尝试利用 D3.js 背后的强大功能来解决问题

D3 将允许您创建可编辑的 DOM 元素。它也非常适合与three.js。

添加

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

到您的页面或下载库并根据需要将其调用到您的页面。

使用上面的代码，您可以使用以下方式操作 DOM：

d3.selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

然后最终得到一个结果，如果需要，您可以通过 CSS 进行进一步编辑。

至于选择 JUST CSS3D 渲染，那么只需将您的渲染器编辑为完全一样的 CSS3D。

这是 D3.js 的链接：http ://d3js.org/ 这是与three.js 集成并通过 CSS3D 呈现的 D3.js 的链接：http: //www.delimited.io/blog/2014/3 /14/d3js-threejs-and-css-3d-transforms 希望这有帮助！

于 2014-06-17T03:07:18.403 回答