Let's Get Productive

12

Hi @irwansyah, this is what my motor-html prototype is good for. Suppose I really like an Angular-Material raised button widget,

<md-button class="md-raised">Button</md-button>

and I would like to put this button in a 3D scene:

<motor-scene>
  <motor-node id="button-node" size="100, 100, 0" align="0.5, 0.5, 0.5" mountPoint="0.5, 0.5, 0.5" rotation="0, 0, 0" >
    <md-button class="md-raised">Button</md-button>
  </motor-node>
</motor-scene>

then animate it with a rotation:

import Motor from 'infamous/motor/Motor'

let buttonNode = document.querySelector('#button-node').node 
let rotation = 0

Motor.addRenderTask(function() {
  buttonNode.rotation = [0, rotation++, 0]
})

That’s all there is to it, now we have a rotating Angular-Material raised button. Now imagine using ng-repeat to repeat nodes in the 3D scene. We can also do similarly with widgets from other libraries like Onsen, Ionic, getmdl.io, Bootstrap, etc.

After the engine reaches a certain point, it’d be really nice to make a default set of (3D) widgets though. :smiley: