How do three.js transforms and CSS3 3D-transforms correspond?

Question

I am working on an open source tool for navigating and visualizing human anatomy.

The main object of interest is a 'chessboard' taking up most of the screen. Dragging the board around performs certain CSS3 3D-transforms. A 3D object (a head, in the example below) is shown hovering over the board, rendered with three.js.

The transformation of the head is synchronized with that of the board. But this is currently a very imperfect synchronization, realized by trial-and-error.

How do the 'CSS 3D world' and the 'three.js/WebGL 3D world' correspond? For example, where is the 'camera' in the CSS world? Is there a way to synchronize the two properly? Even better, is there a library?

Answer 1

他们确实同步。尝试破解http:// Threejs.org/examples/css3d_sandbox.html。

CSS3DObject假设使用相同的相机来渲染 a和 a ，您应该能够创建PlaneGeometry完美排列的 a 和 a 。

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/

三.js r.66