<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <input type="file" id="select-file">
    <main id="wrapper">
      <canvas id="renderCanvas"></canvas>
    </main>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/babylon-vrm-loader@^1.4/dist/index.js"></script>
    <script src="script.js"></script>
  </body>
</html>





const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 3, new BABYLON.Vector3(0, 1, 0), scene);
camera.setTarget(new BABYLON.Vector3(0, 1, 0));
camera.setPosition(new BABYLON.Vector3(0, 1, -1.5));
camera.minZ = 0.2;
camera.wheelDeltaPercentage = 0.01;
camera.attachControl(canvas, false);
new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, -1), scene);
window.currentScene = scene;
engine.runRenderLoop(function() {
  scene.render();
});
window.addEventListener('resize', function() {
  engine.resize();
});
let translation = 0;
let a = false;
scene.onBeforeRenderObservable.add(() => {
  if (!scene.metadata || !scene.metadata.vrmManagers) 
  {
    return;
  }
  const vrmManager = scene.metadata.vrmManagers[scene.metadata.vrmManagers.length - 1];
  translation += scene.getEngine().getDeltaTime();
  if (translation > 2000)
  {
    vrmManager.rootMesh.translate(new BABYLON.Vector3(0, 0, 1), a ? -1.0 : 1.0);
    translation = 0;
    a = !a;
  }
  vrmManager.update(scene.getEngine().getDeltaTime());
});
let fileCount = 0;
document.getElementById('select-file').addEventListener('change', (evt) => {
  const file = evt.target.files[0];
  console.log(`loads ${file.name} ${file.size} bytes`);
  const currentMeshCount = scene.meshes.length;
  BABYLON.SceneLoader.Append('file:', file, scene, () => {
    for (let i = currentMeshCount; i < scene.meshes.length; i++) 
    {
      //scene.meshes[i].translate(Vector3.Right(), 1.5 * fileCount);
    }
    fileCount++;
  });
})




/* Styles go here */