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

我正在致力於open source tool導航和可視化人體解剖。three.js如何轉換和CSS3 3D轉換對應？

感興趣的主要目標是佔據大部分屏幕的'棋盤'。拖動電路板執行某些CSS3 3D轉換。一個3D對象（在下面的例子中是頭部）被顯示在盤子上，用three.js渲染。

enter image description here

頭部的變換是通過使板的同步。但目前這是一個非常不完美的同步，通過反覆試驗來實現。

'CSS 3D world'和'three.js/WebGL 3D world'是如何對應的？例如，CSS世界中的「相機」在哪裏？有沒有辦法使兩者正確同步？更棒的是，有沒有圖書館？

2014-04-09 mhelvens

他們不同步，但無法與Chrome 34.0.1847.116，至少在OSX。嘗試黑客攻擊http://threejs.org/examples/css3d_sandbox.html。您應該可以創建一個完美排列的'CSS3DObject'和'PlaneGeometry'，假設使用相同的攝像頭來渲染兩者。 – WestLangley

@WestLangley嗯，他們似乎仍然在開發分支同步。只是這個例子沒有背景顏色的變化。我會更新它。 – mrdoob

@WestLangley：謝謝！你的指針幫了我一大堆。我從[此鏈接]瞭解了更多關於此技術的知識（http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/）。如果您想提交答案，我會接受。 – mhelvens

他們做同步。嘗試黑客http://threejs.org/examples/css3d_sandbox.html。

假設使用相同的相機渲染兩者，您應該可以創建排列完美的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

來源

2014-04-09 17:34:49 WestLangley

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

回答

相關問題