Question

按照我在SO上的上一个问题，Creating a CubeGeometry equivilent using CSS3DRenderer我正在尝试构建一个灵活的3D立方体，它可以在CSS3DRenderer下工作。

处找到

在下面的示例中有一个由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 );
}

Answer 1

我正在尝试淘汰类似于你想做的事情。我不能给你一个很好的答案，但是一旦我完成了我的开发，我就可以回来更新真正有用的东西。

要动态地将数据集成到您的场景中，我相信您正在尝试完成此任务，请尝试利用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/ 这是一个链接到与三个.js集成的D3.js并通过CSS3D呈现：http://www.delimited.io/blog/2014/3/14/d3js-threejs-and-css-3d-transforms 希望这有帮助！

Answer 2

实际上，这是一个更好的答案：

在构建我的网站时进入此阶段。想到你！干杯！

首先请确保您使用three.js库作为WebGL API。对于构建网站与应用程序或视频游戏的WebGL开发，它是目前存在的最完善的文档库之一。

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

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

http://www.threejsgames.com

点击扩展程序。我知道Icoulve只是将你链接到扩展，但我尊重他们在主页上的工作。为em'显示它。

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

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

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

希望这有帮助！

使用CSS3DRenderer，Three.JS等效的CubeGeometry

2 个答案: