0

SO での以前の質問、Creating a CubeGeometry equivilent using CSS3DRendererに続いて、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

私はあなたがやろうとしていることに似た何かをノックアウトしようとしているところです。洗練された答えを提供することはできませんが、開発が完了したらすぐに戻ってきて、実際に機能するものを更新できます.

データをシーンに動的に統合するには、これが達成しようとしていると私は信じています。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 に答える