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

They do synchronize. Try hacking http://threejs.org/examples/css3d_sandbox.html.

You should be able to create a CSS3DObject and a PlaneGeometry that line up perfectly, assuming the same camera is used to render both.

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

In fact, here is a fiddle: http://jsfiddle.net/L9cUN/

three.js r.66