Update mobile ASSIMP Viewer

GitHubDragonFly · web-flow · commit fc7bf4a185e3 · 2025-03-03T00:49:55.000-05:00
diff --git a/viewers/templates/Mobile/MASSIMP Viewer.html b/viewers/templates/Mobile/MASSIMP Viewer.html
@@ -11,9 +11,9 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.min.js",
-          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/",
-          "meshoptimizer_decoder": "https://cdn.jsdelivr.net/npm/meshoptimizer@0.21.0/meshopt_decoder.module.min.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.min.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/",
+          "meshoptimizer_decoder": "https://cdn.jsdelivr.net/npm/meshoptimizer@0.22.0/meshopt_decoder.module.min.js"
         }
       }
     </script>
@@ -59,12 +59,12 @@
       gltf_VideoTextureExtension = GLTFVideoTextureExtension;
 
       ktx2_loader = new KTX2Loader();
-      ktx2_loader.setTranscoderPath( "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/libs/basis/" );
+      ktx2_loader.setTranscoderPath( "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/libs/basis/" );
 
       manager.addHandler( /\.ktx2$/i, ktx2_loader );
 
       draco_loader = new DRACOLoader();
-      draco_loader.setDecoderPath( "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/libs/draco/" );
+      draco_loader.setDecoderPath( "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/libs/draco/" );
       draco_loader.setDecoderConfig( { type: 'js' } );
       draco_loader.preload();
 
@@ -160,12 +160,11 @@
         font-size: x-large;
         display: none;
         color: red;
-        width: 240px;
-        height: 240px;
-        top: 50%;
-        left: 50%;
-        margin-left: -127px;
-        padding: 10px;
+        width: 50vw;
+        height: 50vh;
+        top: 50vh;
+        left: 25vw;
+        padding: 5px;
         border: none;
       }
 
@@ -174,13 +173,12 @@
         color: greenyellow;
         position: absolute;
         text-align: center;
-        font-size: large;
-        height: 240px;
-        width: 240px;
-        top: 50%;
-        left: 50%;
-        margin-left: -127px;
-        padding: 10px;
+        font-size: x-large;
+        width: 50vw;
+        height: 50vh;
+        top: 50vh;
+        left: 25vw;
+        padding: 5px;
         border: none;
       }
 
@@ -213,7 +211,7 @@
 
     <!-- mouse_wheel variable is used throughout as a trigger for rendering -->
 
-    <title>ASSIMP Viewer (r172)</title>
+    <title>ASSIMP Viewer (r174)</title>
   </head>
   <body id="body" onload="reset_all(); document_ready(); disabled_changed();" onresize="resize();">
     <div id="fixed_menu" class="fixed-menu">
@@ -671,14 +669,14 @@
         }
       }
 
-      function load_with_assimp( fetched_files = null, from_url = false ) {
+      async function load_with_assimp( fetched_files = null, from_url = false ) {
         if (fetched_files === null) return;
 
         console.time( 'Assimp Loading Time' );
         assimp_load = true;
 
         // Use ASSIMPJS to load files - some models might take time to load
-        assimpjs().then( async function( ajs ) {
+        await assimpjs().then( async function( ajs ) {
           if (from_url === true) {
             Promise.all( assimp_files.map( ( file, index ) => fetch( fetched_files[ index ] ) )).then( ( responses ) => {
               return Promise.all( responses.map( ( res ) => res.arrayBuffer() ) );
@@ -742,7 +740,7 @@
 
             console.timeEnd( 'Assimp Loading Time' );
 
-            load_components( false );
+            load_components( from_url );
           }
         });
       }
@@ -867,13 +865,22 @@
           // Load DRACO or gltf file
           if (selected_gltf_file !== null) loadFile();
           else if (selected_draco_file !== null) loadDRACO();
+        } else {
+          if (assimp_load === true && selected_gltf_file !== null) loadFile();
         }
       }
 
       function loadFile() {
+        let lfile = local_files ? local_files[ selected_gltf_file ] : ( assimp_load === true ? selected_gltf_file : null );
+
+        if (lfile === null) {
+          handle_error( 'No valid file selected!' );
+          return;
+        }
+
         console.time( 'GLTF Loading Time' );
 
-        gltf_loader.load( URL.createObjectURL( assimp_load === true ? selected_gltf_file : local_files[ selected_gltf_file ] ), async function( gltf ) {
+        gltf_loader.load( URL.createObjectURL( lfile ), async function( gltf ) {
           URL.revokeObjectURL( assimp_load === true ? selected_gltf_file : local_files[ selected_gltf_file ] );
 
           parser = gltf.parser;
@@ -1106,7 +1113,7 @@
           finish_loading();
         }, function ( xhr ) { // onProgress
         }, function ( error ) { // onError
-          URL.revokeObjectURL( selected_gltf_file );
+          URL.revokeObjectURL( lfile );
           handle_error( error );
         });
 
@@ -1291,7 +1298,7 @@
           }
 
           if (selected_gltf_url_file === null) {
-            if (file_model_urls.length > 0) load_with_assimp( file_model_urls, true );
+            if (file_model_urls.length > 0) await load_with_assimp( file_model_urls, true );
             return;
           }
 
