@needle-tools/engine 4.5.1 → 4.5.4

package/src/engine/engine_utils_format.ts

@@ -6,7 +6,7 @@ const debug = getParam("debugfileformat");
 /**
  * The supported file types that can be determined by the engine. Used in {@link tryDetermineMimetypeFromURL} and {@link tryDetermineMimetypeFromBinary}
  */
-export type NeedleMimetype = "unknown" |
+export type NeedleMimetype = "unknown" | "unsupported" |
     "model/gltf+json" |
     "model/gltf-binary" |
     "model/vrm" |
@@ -20,6 +20,31 @@ export type NeedleMimetype = "unknown" |
     | (string & {})
 
 
+
+export function determineMimeTypeFromExtension(name: string): NeedleMimetype | null {
+    const ext = name.split(".").pop() || name;
+    switch (ext.toUpperCase()) {
+        case "GLTF":
+            return "model/gltf+json";
+        case "VRM":
+            return "model/vrm";
+        case "GLB":
+            return "model/gltf-binary";
+        case "FBX":
+            return "model/fbx";
+        case "USD":
+            return "model/vnd.usd+zip";
+        case "USDA":
+            return "model/vnd.usda+zip";
+        case "USDZ":
+            return "model/vnd.usdz+zip";
+        case "OBJ":
+            return "model/obj";
+        default:
+            return null;
+    }
+}
+
 /**
  * Tries to determine the file type of a file from its URL  
  * This method does perform a range request to the server to get the first few bytes of the file   
@@ -45,7 +70,7 @@ export async function tryDetermineMimetypeFromURL(url: string, opts: { useExtens
         //     // _url = "file:" + url;
         // }
 
-        const urlobj = new URL(_url, globalThis.location.origin);
+        const urlobj = new URL(_url, globalThis.location.href);
         let ext: string | null | undefined = null;
         const query = urlobj.searchParams.get("filetype");
         if (query) ext = query.toUpperCase();
@@ -82,7 +107,7 @@ export async function tryDetermineMimetypeFromURL(url: string, opts: { useExtens
         // We can't modify the blob URL
     }
     else {
-        const newUrl = new URL(url);
+        const newUrl = new URL(url, globalThis.location.href);
         // Adding a URL parameter to avoid the brower to bust the full cache
         // If we don't do this the file that might already be disc cached will be deleted from the cache
         newUrl.searchParams.append("range", "true");
@@ -124,7 +149,7 @@ export function tryDetermineMimetypeFromBinary(url: string, data: ArrayBuffer, r
     }
 
     // GLTF
-    if (bytes[0] == 103 && bytes[1] == 108 && bytes[2] == 84 && bytes[3] == 70 && bytes[4] == 10) {
+    if (bytes[0] == 103 && bytes[1] == 108 && bytes[2] == 84 && bytes[3] == 70 && (bytes[4] == 10 || bytes[4] === 2)) {
         // GLTF
         console.debug("GLTF detected");
         return "model/gltf+json";
@@ -172,6 +197,10 @@ export function tryDetermineMimetypeFromBinary(url: string, data: ArrayBuffer, r
     }
     else if (response.headers.has("content-type")) {
         const content_type = response.headers.get("content-type");
+        if (content_type?.startsWith("image/")) {
+            console.debug("Image detected, not a model file");
+            return "unsupported";
+        }
         console.debug("Content-Type: " + content_type);
         switch (content_type) {
             case "model/gltf+json":

package/src/engine-components/DropListener.ts

@@ -1,5 +1,4 @@
 import { AxesHelper, Box3, Cache, Object3D, Vector2, Vector3 } from "three";
-import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { isDevEnvironment } from "../engine/debug/index.js";
 import { AnimationUtils } from "../engine/engine_animation.js";
@@ -15,6 +14,7 @@ import { serializable } from "../engine/engine_serialization_decorator.js";
 import { fitObjectIntoVolume, getBoundingBox, placeOnSurface } from "../engine/engine_three_utils.js";
 import { IGameObject, Model, Vec3 } from "../engine/engine_types.js";
 import { getParam, setParamWithoutReload } from "../engine/engine_utils.js";
+import { determineMimeTypeFromExtension } from "../engine/engine_utils_format.js";
 import { Animation } from "./Animation.js";
 import { Behaviour } from "./Component.js";
 import { EventList } from "./EventList.js";
@@ -398,6 +398,7 @@ export class DropListener extends Behaviour {
         if (!Array.isArray(fileList)) return;
         if (!fileList.length) return;
 
+
         this.deleteDropEvent();
         this.removePreviouslyAddedObjects();
         setParamWithoutReload(blobKeyName, null);
@@ -408,7 +409,20 @@ export class DropListener extends Behaviour {
 
         for (const file of fileList) {
             if (!file) continue;
-            console.debug("Load file " + file.name);
+
+            if (file.type.startsWith("image/")) {
+                // Ignore dropped images
+                if (debug) console.warn("Ignoring dropped image file", file.name, file.type);
+                continue;
+            }
+            else if (file.name.endsWith(".bin")) {
+                // Ignore dropped binary files
+                if (debug) console.warn("Ignoring dropped binary file", file.name, file.type);
+                continue;
+            }
+
+
+            console.debug("Load file " + file.name + " + " + file.type);
             const res = await FileHelper.loadFile(file, this.context, { guid: this.guid });
             if (res) {
                 this.dispatchEvent(new CustomEvent(DropListenerEvents.FileDropped, { detail: file }));
@@ -625,38 +639,39 @@ namespace FileHelper {
      * @returns Promise containing the loaded model and its content hash, or null if loading failed
      */
     export async function loadFile(file: File, context: Context, args: { guid: string }): Promise<{ model: Model, contentMD5: string } | null> {
-        const name = file.name.toLowerCase();
-        if (name.endsWith(".gltf") ||
-            name.endsWith(".glb") ||
-            name.endsWith(".fbx") ||
-            name.endsWith(".obj") ||
-            name.endsWith(".usdz") ||
-            name.endsWith(".vrm") ||
-            file.type === "model/gltf+json" ||
-            file.type === "model/gltf-binary"
-        ) {
+        // first load it locally
+        const seed = args.guid;
+        const prov = new InstantiateIdProvider(seed);
+
+        const blob = new Blob([file], { type: file.type || determineMimeTypeFromExtension(file.name) || undefined });
+        const objectUrl = URL.createObjectURL(blob);
+
+        const model = await getLoader().loadSync(context, objectUrl, file.name, prov).catch(err => {
+            console.error(`Failed to load file "${file.name}" (${file.type}):`, err);
+            return null;
+        })
+
+        URL.revokeObjectURL(objectUrl); // clean up the object URL
+
+        if (model) {
             return new Promise((resolve, _reject) => {
                 const reader = new FileReader()
                 reader.readAsArrayBuffer(file);
                 reader.onloadend = async (_ev: ProgressEvent<FileReader>) => {
                     const content = reader.result as ArrayBuffer;
-                    // first load it locally
-                    const seed = args.guid;
-                    const prov = new InstantiateIdProvider(seed);
-                    const model = await getLoader().parseSync(context, content, file.name, prov);
-                    if (model) {
-                        const hash = BlobStorage.hashMD5(content);
-                        resolve({ model, contentMD5: hash });
-                    }
+                    const hash = BlobStorage.hashMD5(content);
+                    return resolve({ model, contentMD5: hash });
                 };
             });
         }
         else {
-            console.warn("Unsupported file type: " + name, file.type)
+            console.warn(`Failed to load "${file.name}" (${file.type})`);
+            return null;
         }
-
-        return null;
     }
+    //     return new Promise((resolve, _reject) => {
+    //     });
+    // }
 
     /**
      * Loads a 3D model from a URL with progress visualization