Optimize model loading

diff --git a/src/main/resources/static/init.js b/src/main/resources/static/init.js
index 129f816e012eabe04c72d8faa0aaf7b4160bc34b..c4bfeffca22379dc79a49e7db1e0b0b26c98fe2b 100644 (file)
--- a/src/main/resources/static/init.js
+++ b/src/main/resources/static/init.js
@@ -67,6 +67,12 @@
        });
 
        window.addEventListener("load", function () {
+               async function loadObj(modelName) {
+                       const mtlLib = await (new THREE.MTLLoader()).setPath("/assets/meshes/").setResourcePath("/assets/meshes/").loadAsync(modelName + ".mtl");
+                       mtlLib.preload();
+                       return await (new THREE.OBJLoader()).setPath("/assets/meshes/").setResourcePath("/assets/meshes/").setMaterials(mtlLib).loadAsync(modelName + ".obj");
+               }
+
                // Mesh viewing
                const canvases = document.getElementsByTagName("canvas");
                for (const canvas of canvases) {
@@ -76,6 +82,8 @@
                        (async () => {
                                let threeData = {};
 
+                               let modelAsync = loadObj(modelName);
+
                                threeData.camera = new THREE.PerspectiveCamera(69, 1, 0.01, 1000.0);
 
                                threeData.scene = new THREE.Scene();
@@ -102,13 +110,8 @@
                                await frame();
                                onResize();
 
-                               const mtlPath = modelName + ".mtl";
-                               const mtlLib = await (new THREE.MTLLoader()).setPath("/assets/meshes/").setResourcePath("/assets/meshes/").loadAsync(mtlPath);
-                               mtlLib.preload();
-
-                               const objPath = modelName + ".obj";
-                               const objMesh = await (new THREE.OBJLoader()).setPath("/assets/meshes/").setResourcePath("/assets/meshes/").setMaterials(mtlLib).loadAsync(objPath);
-                               threeData.scene.add(objMesh);
+                               const model = await modelAsync;
+                               threeData.scene.add(model);
 
                                const bbox = new THREE.Box3().setFromObject(threeData.scene);
                                bbox.dimensions = {
@@ -116,7 +119,7 @@
                                        y: bbox.max.y - bbox.min.y,
                                        z: bbox.max.z - bbox.min.z
                                };
-                               objMesh.position.sub(new THREE.Vector3(bbox.min.x + bbox.dimensions.x / 2, bbox.min.y + bbox.dimensions.y / 2, bbox.min.z + bbox.dimensions.z / 2));
+                               model.position.sub(new THREE.Vector3(bbox.min.x + bbox.dimensions.x / 2, bbox.min.y + bbox.dimensions.y / 2, bbox.min.z + bbox.dimensions.z / 2));
 
                                threeData.camera.position.set(bbox.dimensions.x / 2, bbox.dimensions.y / 2, Math.max(bbox.dimensions.x, bbox.dimensions.y, bbox.dimensions.z));