view/index.js

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);