three.js轉換和CSS3 3D轉換如何對應？

Question

我正在開發一種用於導航和可視化人體解剖結構的開源工具 。

感興趣的主要對象是“棋盤”，占據了大部分屏幕。 拖動板子執行某些CSS3 3D轉換。 顯示了一個3D對象（在下面的示例中為一個頭部）懸停在板上，並用three.js渲染。

磁頭的轉換與電路板的轉換同步。 但這目前是非常不完美的同步，通過反復試驗實現。

“ CSS 3D世界”和“ three.js / WebGL 3D世界”如何對應？ 例如，CSS世界中的“相機”在哪里？ 有沒有辦法使兩者正確同步？ 更好的是，有圖書館嗎？

Answer 1

它們確實同步。 嘗試入侵http://threejs.org/examples/css3d_sandbox.html 。

您應該能夠創建完美PlaneGeometry的CSS3DObject和PlaneGeometry ，並假設使用同一台攝像機渲染這兩者。

var geometry = new THREE.PlaneGeometry(100, 100);
var mesh = new THREE.Mesh( geometry, material );

mesh.position.copy( object.position );
mesh.rotation.copy( object.rotation );
mesh.scale.copy( object.scale );

scene.add( mesh );

實際上，這是一個小提琴： http : //jsfiddle.net/L9cUN/

three.js r.66