<canvas id="renderCanvas" touch-action="none"></canvas>

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

// Get the Canvas element from our HTML below
var canvas = document.getElementById("renderCanvas");

// Load BABYLON 3D engine and set the root directory
var engine = new BABYLON.Engine(canvas, true);

// Create a new scene with a camera (mandatory)
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

// Add WebVR button 
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});

// Creating a omnidirectional light
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

// Creating a sphere of size 5, at 0,0,0
var sphere = BABYLON.Mesh.CreateSphere("origin", 8, 5.0, scene);

// Creating a box of size 4, 
var box = new BABYLON.Mesh.CreateBox('mesh', 4, scene);

// Position the box and sphere
box.position.y = -10;
box.position.z = -5;
sphere.position.x = 0;
sphere.position.y = -5;
sphere.position.z = 3;

// Show the bounding box
box.showBoundingBox = true;

// Add a material color to the box
var material = new BABYLON.StandardMaterial('std', scene);
material.diffuseColor = new BABYLON.Color3(0.7, 0, 0.2);

box.material = material;

// Add a material color to the sphere
var material2= new BABYLON.StandardMaterial('std', scene);
material2.diffuseColor = new BABYLON.Color3(.1, 0.1, 0.9);
sphere.material = material2; 

// Attach the camera to the scene
//scene.activeCamera.attachControl(canvas);

// Add animation to the objects
var counter = 0;

// Once the scene is loaded, just register a render loop to render it, animation controls can be added here as well
engine.runRenderLoop(function () {
  counter += 0.1;
  box.rotation.x += 0.01;
  box.rotation.y += 0.01;
  box.rotation.z += 0.01;
  sphere.position.x += 0.03; 
  scene.render();
});