javascript - three.js transforms 和 CSS3 3D-transforms 如何对应？

Question

我正在研究 open source tool用于导航和可视化人体解剖学。

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

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

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

Answer 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