BabylonJS WebVR Hello World

index.html

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

index.step1.ts

import './style.css';
import 'babylonjs';

class VRApp {
  constructor() {

  }

  run() {

  }
}

new VRApp().run();

index.step2.ts

class VRApp {
  private _engine: BABYLON.Engine;
  private _scene: BABYLON.Scene;

  constructor() {
    const appDiv = <HTMLCanvasElement>document.getElementById('renderCanvas');
    this._engine = new BABYLON.Engine(appDiv, true);
    this._scene = new BABYLON.Scene(this._engine);
...

index.step3.ts

let light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), this._scene);

index.step4.ts

    let ground = BABYLON.Mesh.CreateGround("ground", 50, 50, 2, this._scene);

    for (let i = 0; i < 25; i++) {
      let box = BABYLON.Mesh.CreateBox(`box_${i}`, 2, this._scene);
      box.position = new BABYLON.Vector3(Math.random() * 50.0 - 25.0, 1, Math.random() * 50.0 - 25.0);
    }

index.step5.ts

run() {
  this._engine.runRenderLoop(() => {
    this._scene.render();
  });
}

index.step6.ts

this._scene.createDefaultVRExperience();

index.ts

import './style.css';
import 'babylonjs';

class VRApp {
  private _engine: BABYLON.Engine;
  private _scene: BABYLON.Scene;

  constructor() {
    const appDiv = <HTMLCanvasElement>document.getElementById('renderCanvas');
    this._engine = new BABYLON.Engine(appDiv, true);
    this._scene = new BABYLON.Scene(this._engine);

    let light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), this._scene);
    let ground = BABYLON.Mesh.CreateGround("ground", 50, 50, 2, this._scene);
    ground.translate(BABYLON.Vector3.Up(), -1);

    for (let i = 0; i < 25; i++) {
      let box = BABYLON.Mesh.CreateBox(`box_${i}`, 2, this._scene);
      box.position = new BABYLON.Vector3(Math.random() * 50.0 - 25.0, 0, Math.random() * 50.0 - 25.0);
    }

    this._scene.createDefaultVRExperience();
  }

  run() {
    this._engine.runRenderLoop(() => {
      this._scene.render();
    });
  }
}

new VRApp().run();

styles.css

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