Infamous Canvas

A starting point for 3D fiddles using Infamous.

by Joe Pea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="https://cdn.rawgit.com/infamous/infamous/v11.0.3/global.js"></script>
<motor-scene>
  <motor-node class="square"
    sizeMode="absolute, absolute, absolute"
    absoluteSize="200, 200, 0"
    proportionalSize="0, 0, 0"
    position="0, 0, 0"
    rotation="0, 0, 0"
    opacity="0.5"
    align="0, 0, 0"
    mountPoint="0, 0, 0"
    >
    
    <h1>Hello 3D!</h1>
    
  </motor-node>
</motor-scene>

CSS

html, body, .scene {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
}

* { box-sizing: border-box; }

.square {
  border: 1px solid red;
}

JavaScript

var Motor = infamous.Motor
var Tween = TWEEN.Tween
var Easing = TWEEN.Easing

var s = document.querySelector('.square')

var tween = new Tween(s.align)
	.to({x: 0.5, y:0.5}, 2000)
	.easing(Easing.Bounce.Out)
	.start()

Motor.addRenderTask(function(timestamp) {
  s.rotation.y -= 0.33
  tween.update(timestamp)
  s.mountPoint = s.align
})