three.js 变换和 CSS3 3D-transforms 是如何对应的？答案

【问题标题】：How do three.js transforms and CSS3 3D-transforms correspond?three.js 变换和 CSS3 3D-transforms 是如何对应的？
【发布时间】：2014-05-22 21:14:27
【问题描述】：

我正在开发一个open source tool，用于导航和可视化人体解剖结构。

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

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

“CSS 3D 世界”和“three.js/WebGL 3D 世界”如何对应？例如，CSS 世界中的“相机”在哪里？有没有办法正确同步两者？更好的是，有图书馆吗？

【问题讨论】：

它们会同步，但不会与 Chrome 34.0.1847.116 同步，至少在 OSX 上是这样。尝试破解threejs.org/examples/css3d_sandbox.html。你应该能够创建一个完美排列的CSS3DObject 和一个PlaneGeometry，假设使用相同的相机来渲染两者。
@WestLangley 嗯，他们似乎仍然在开发分支上保持同步。只是那个例子没有背景颜色变化。我会更新的。
@WestLangley：谢谢！你的指点帮了我很多忙。我从this link 学到了更多关于这种技术的知识。如果您想提交答案，我会接受。
@mrdoob 它似乎在 Chrome 上运行 jsfiddle.net/uM2NS
@WestLangley 嘿，很好的例子 :)

标签： javascript css 3d three.js transform

【解决方案1】：

它们确实是同步的。尝试破解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 );

其实这里有一个fiddle：http://jsfiddle.net/L9cUN/

three.js r.66

【讨论】：