Ember.js with Three.js

Question

I have been trying to get my head around a way to intergrate Ember.js with Three.js. In particular, I want to render a number of elements, controlling the data with Ember.js bindings and general pub/sub handling, but also wont to be able to manipulate the views/elements with three.js using THREE.CSS3DObject.

I'm fairly confident with Ember but new to Three. I guess what I'm thinking is, can I have an element that exists in both the THREE.Scene and the Ember application namespace?

In the THREE.js periodic table example:

http://mrdoob.github.com/three.js/examples/css3d_periodictable.html

an DOM.element is create and then later decorated with attributes (style, position etc).

var element = document.createElement( 'div' );
    element.className = 'element';
    element.style.backgroundColor = 'rgba(0,127,127,'+(Math.random()* 0.5 + 0.25 ) + ')';

Later, it is added as an element to the THREE.CSS3Object constructor:

var object = new THREE.CSS3DObject( element );

I'm wondering if I can create the elements in perhaps an Ember containerView and then use jQuery to iterate over the childViews, caching the currently iterated element as 'element' and then render this to the THREE.CSS3DObject constructor?

I know it's a bit hacky and I only mention the above as some indication that I have tried to think up a way before asking for help! haha!

Any guidance or even pie in the sky suggestions like mine would be greatly appreciated. Thanks in advance.

Answer 1

Three's CSS3D renderer is just a thin abstraction of the browsers' own renderer and therefore should not conflict with the manipulation of DOM elements with Ember or jQ.

Once passed to the CSS3DObject constructor, an element's 3D transforms are updated but beyond that, it's business as usual. You can manipulate its content and style it as needed.