feat: use Web Worker for OBJ loading to prevent UI blocking

package.json

@@ -187,6 +187,7 @@
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",
     "vuefire": "catalog:",
+    "wwobjloader2": "catalog:",
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"

pnpm-workspace.yaml

@@ -104,6 +104,7 @@ catalog:
   vue-router: ^4.4.3
   vue-tsc: ^3.2.1
   vuefire: ^3.2.1
+  wwobjloader2: ^6.2.1
   yjs: ^13.6.27
   zod: ^3.23.8
   zod-to-json-schema: ^3.24.1

src/extensions/core/load3d/Load3dUtils.ts

@@ -34,9 +34,26 @@ class Load3dUtils {
     return await resp.json()
   }
 
+  static readonly MAX_UPLOAD_SIZE_MB = 100
+
   static async uploadFile(file: File, subfolder: string) {
     let uploadPath
 
+    const fileSizeMB = file.size / 1024 / 1024
+    if (fileSizeMB > this.MAX_UPLOAD_SIZE_MB) {
+      const message = t('toastMessages.fileTooLarge', {
+        size: fileSizeMB.toFixed(1),
+        maxSize: this.MAX_UPLOAD_SIZE_MB
+      })
+      console.warn(
+        '[Load3D] uploadFile: file too large',
+        fileSizeMB.toFixed(2),
+        'MB'
+      )
+      useToastStore().addAlert(message)
+      return undefined
+    }
+
     try {
       const body = new FormData()
       body.append('image', file)
@@ -61,7 +78,7 @@ class Load3dUtils {
         useToastStore().addAlert(resp.status + ' - ' + resp.statusText)
       }
     } catch (error) {
-      console.error('Upload error:', error)
+      console.error('[Load3D] uploadFile: exception', error)
       useToastStore().addAlert(
         error instanceof Error
           ? error.message

src/extensions/core/load3d/LoaderManager.ts

@@ -3,9 +3,10 @@ import * as THREE from 'three'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+import { MtlObjBridge, OBJLoader2Parallel } from 'wwobjloader2'
+import OBJLoader2WorkerUrl from 'wwobjloader2/worker?url'
 
 import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -22,7 +23,7 @@ import { FastPLYLoader } from './loader/FastPLYLoader'
 
 export class LoaderManager implements LoaderManagerInterface {
   gltfLoader: GLTFLoader
-  objLoader: OBJLoader
+  objLoader: OBJLoader2Parallel
   mtlLoader: MTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader
@@ -41,7 +42,12 @@ export class LoaderManager implements LoaderManagerInterface {
     this.eventManager = eventManager
 
     this.gltfLoader = new GLTFLoader()
-    this.objLoader = new OBJLoader()
+    this.objLoader = new OBJLoader2Parallel()
+    // Set worker URL for Vite compatibility
+    this.objLoader.setWorkerUrl(
+      true,
+      new URL(OBJLoader2WorkerUrl, import.meta.url)
+    )
     this.mtlLoader = new MTLLoader()
     this.fbxLoader = new FBXLoader()
     this.stlLoader = new STLLoader()
@@ -173,16 +179,20 @@ export class LoaderManager implements LoaderManagerInterface {
 
             const materials = await this.mtlLoader.loadAsync(mtlFileName)
             materials.preload()
-            this.objLoader.setMaterials(materials)
+            const materialsFromMtl =
+              MtlObjBridge.addMaterialsFromMtlLoader(materials)
+            this.objLoader.setMaterials(materialsFromMtl)
           } catch (e) {
             console.log(
               'No MTL file found or error loading it, continuing without materials'
             )
           }
         }
 
-        this.objLoader.setPath(path)
-        model = await this.objLoader.loadAsync(filename)
+        // OBJLoader2Parallel uses Web Worker for parsing (non-blocking)
+        const objUrl = path + encodeURIComponent(filename)
+        model = await this.objLoader.loadAsync(objUrl)
+
         model.traverse((child) => {
           if (child instanceof THREE.Mesh) {
             this.modelManager.originalMaterials.set(child, child.material)
@@ -193,7 +203,6 @@ export class LoaderManager implements LoaderManagerInterface {
       case 'gltf':
       case 'glb':
         this.gltfLoader.setPath(path)
-
         const gltf = await this.gltfLoader.loadAsync(filename)
 
         this.modelManager.setOriginalModel(gltf)

src/extensions/core/load3d/interfaces.ts

@@ -4,8 +4,8 @@ import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { type GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
-import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
+import { type OBJLoader2Parallel } from 'wwobjloader2'
 
 export type MaterialMode =
   | 'original'
@@ -179,7 +179,7 @@ export interface ModelManagerInterface {
 
 export interface LoaderManagerInterface {
   gltfLoader: GLTFLoader
-  objLoader: OBJLoader
+  objLoader: OBJLoader2Parallel
   mtlLoader: MTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader

src/locales/en/main.json

@@ -1700,6 +1700,7 @@
     "pleaseSelectNodesToGroup": "Please select the nodes (or other groups) to create a group for",
     "emptyCanvas": "Empty canvas",
     "fileUploadFailed": "File upload failed",
+    "fileTooLarge": "File too large ({size} MB). Maximum supported size is {maxSize} MB",
     "unableToGetModelFilePath": "Unable to get model file path",
     "couldNotDetermineFileType": "Could not determine file type",
     "errorLoadingModel": "Error loading model",