<!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 */