function main() { prepareToUploadFile(); } function prepareToUploadFile(){ /* * 送信イベントが発生したら実行 */ document.querySelector("#upload").addEventListener("submit", (e)=>{ const targetImage = document.querySelector("#targetImage"); // 規定の送信処理をキャンセル(画面遷移などしない) e.preventDefault(); // 送信データの準備 const formData = new FormData(); formData.append("targetImage", targetImage.files[0]); // ファイル内容を詰める const param = { method: "POST", body: formData } // アップロードする fetch(`/prediction`, param) .then((res)=>{ return( res.json() ); }) .then((json)=>{ // 通信が成功した際の処理 load3dModel(json["path"], json["name"]); }) .catch((error)=>{ // エラー処理 alert("残念、なんかエラー!") }); }); } function load3dModel(rcPath, rcName){ const canvas = document.getElementById('renderCanvas'); const engine = new BABYLON.Engine(canvas); // ここから function createScene() { // シーンを作成 const scene = new BABYLON.Scene(engine); // カメラを作成 const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene); // カメラがユーザからの入力で動くように camera.attachControl(canvas, true); // ライトを作成 const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); // 画像を読み込む BABYLON.SceneLoader.ImportMesh("", `/${rcPath}/`, `${rcName}`, scene, function (newMeshes) { // Create a default arc rotate camera and light. // createArcRotateCamera scene.createDefaultCameraOrLight(true, true, true); }); return scene; } const scene = createScene(); engine.runRenderLoop(() => { scene.render(); }); window.addEventListener('resize', () => { engine.resize(); }); } window.addEventListener('DOMContentLoaded', main);