<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <main id="wrapper">
      <canvas id="renderCanvas" width="400" height="400"></canvas>
    </main>
    <script src="script.js"></script>
  </body>
</html>



const vrmLoaderScript = document.createElement('script');
vrmLoaderScript.src = 'https://cdn.jsdelivr.net/npm/babylon-vrm-loader/dist/index.js';
document.head.appendChild(vrmLoaderScript);

const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
//const vrmManager = null;

var createScene = function() {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("camera1", -Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0, 1.3, 0), scene);
    camera.attachControl(canvas, true);
    var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0.3, -1, 0.3), scene);
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {
      width: 6,
      height: 6
    }, scene);
    vrmLoaderScript.onload = () => {
        BABYLON.SceneLoader.Append('https://raw.githubusercontent.com/vrm-c/UniVRM/master/Tests/Models/Alicia_vrm-0.51/', 'AliciaSolid_vrm-0.51.vrm', scene, () => {
        });
    };
    return scene;
};
const scene = createScene();
window.currentScene = scene;
engine.runRenderLoop(function() {
  scene.render();
});
window.addEventListener('resize', function() {
  engine.resize();
});



/* Styles go here */