Javascript three.js转换和CSS3 3D转换如何对应？

我正在研究一种导航和可视化人体解剖学的方法

主要感兴趣的对象是占据屏幕大部分的“棋盘”。拖动电路板执行某些CSS3 3D变换。一个3D对象（下图中的头部）悬停在电路板上，用three.js渲染

头部的变换与板的变换同步。但目前这是一个非常不完善的同步，通过反复试验来实现

---

“CSS 3D世界”和“three.js/WebGL 3D世界”如何对应？例如，CSS世界中的“照相机”在哪里？有没有一种方法可以正确地同步两者？更好的是，有库吗？

它们确实是同步的。试试黑客

您应该能够创建一个完美排列的

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 );

事实上，这里有一把小提琴：

---

three.js r.66

它们确实是同步的。试试黑客

您应该能够创建一个完美排列的

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 );

事实上，这里有一把小提琴：

---

three.js r.66

它们确实同步，但至少在OSX上不与Chrome 34.0.1847.116同步。试试黑客。您应该能够创建一个

CSS3DObject

和一个

PlaneGeometry

完美地排列在一起，假设使用同一个摄影机渲染这两个对象。@WestLangley-Hmmm，它们在开发分支上似乎仍然同步。只是这个例子没有改变背景颜色。我会更新的。@WestLangley:谢谢！你的指南针帮了我不少忙。我从中学到了更多关于这项技术的知识。如果你想提交答案，我会接受。@mrdoob它似乎在Chrome@WestLangley-heh上工作，很好的例子：）它们确实同步，但不与Chrome 34.0.1847.116同步，至少在OSX上是这样。试试黑客。您应该能够创建一个

CSS3DObject

和一个

PlaneGeometry

完美地排列在一起，假设使用同一个摄影机渲染这两个对象。@WestLangley-Hmmm，它们在开发分支上似乎仍然同步。只是这个例子没有改变背景颜色。我会更新的。@WestLangley:谢谢！你的指南针帮了我不少忙。我从中学到了更多关于这项技术的知识。如果你想提交答案，我会接受。@mrdoob它似乎在Chrome@WestLangley-heh上工作，很好的例子：）