<canvas id="renderCanvas"></canvas>

html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

var canvas = document.getElementById('renderCanvas');

var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
  var scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color3(0, 0, 0.2);
  
  var camera = new BABYLON.ArcRotateCamera('Camera', 1.0, 1.0, 12, BABYLON.Vector3.Zero(0, 1, 0), scene);
  
  camera.attachControl(canvas, false);
  
  var light = new BABYLON.HemisphericLight('Hemi', new BABYLON.Vector3(0, 1, 0), scene);
  
  light.groundColor = new BABYLON.Color3(0.5, 0, 0.5);
  
  var box = new BABYLON.Mesh.CreateBox('mesh', 3, scene);
  
  box.showBoundingBox = true;
  
  var material = new BABYLON.StandardMaterial('std', scene);
  material.diffuseColor = new BABYLON.Color3(0.5, 0, 0.5);
  
  box.material = material;
  
/*  var alpha = 0;
			box.scaling.y = 1.2;
			scene.beforeRender = function() {
			box.rotation.y = alpha;
			alpha += 0.01;
		};
*/
  gsap.to(box.rotation, {y:12, x:5, duration:4, repeat:-1, yoyo:true})
  gsap.to(box.position, {x:5, duration:4, repeat:-1, yoyo:true})
  gsap.to(box.scaling, {y:0.5, duration:2, repeat:-1, yoyo:true})
  
  return scene;
}

var scene = createScene();

engine.runRenderLoop(function() {
  scene.render();
});

window.addEventListener('resize', function() {
  engine.resize();
})