react-three-game 0.0.59 → 0.0.60

package/dist/tools/dragdrop/DragDropLoader.d.ts

@@ -1,22 +1,22 @@
 import type { HTMLAttributes, ReactNode } from "react";
-import type { LoadedModel } from "./modelLoader";
-export interface FileLoadOptions {
+import type { LoadedModel, LoadedTexture } from "./modelLoader";
+export interface AssetLoadOptions {
     onModelLoaded?: (model: LoadedModel, filename: string, file: File) => void | Promise<void>;
-    onFileLoaded?: (file: File) => void | Promise<void>;
+    onTextureLoaded?: (texture: LoadedTexture, filename: string, file: File) => void | Promise<void>;
+    onUnhandledFile?: (file: File) => void | Promise<void>;
     onFilesLoaded?: (files: File[]) => void | Promise<void>;
-    onModelError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
-    parseModels?: boolean;
+    onLoadError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
 }
 type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onDragOver">;
-export interface DragDropLoaderProps extends FileLoadOptions, DivProps {
+export interface DragDropLoaderProps extends AssetLoadOptions, DivProps {
     children?: ReactNode;
 }
-export interface FilePickerProps extends FileLoadOptions, DivProps {
+export interface FilePickerProps extends AssetLoadOptions, DivProps {
     accept?: string;
     children?: ReactNode;
     multiple?: boolean;
 }
-export declare function loadFiles(files: File[], { onModelLoaded, onFileLoaded, onFilesLoaded, onModelError, parseModels }: FileLoadOptions): Promise<void>;
+export declare function loadFiles(files: File[], { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }: AssetLoadOptions): Promise<void>;
 export declare function DragDropLoader({ children, ...divProps }: DragDropLoaderProps): import("react/jsx-runtime").JSX.Element;
 export declare function FilePicker({ accept, children, multiple, ...divProps }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tools/dragdrop/DragDropLoader.js

@@ -20,27 +20,45 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { canParseModelFile, parseModelFromFile } from "./modelLoader";
+import { canParseModelFile, canParseTextureFile, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
+const DEFAULT_ACCEPT = ".glb,.gltf,.fbx,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg";
 function getFiles(fileList) {
     return fileList ? Array.from(fileList) : [];
 }
 export function loadFiles(files_1, _a) {
-    return __awaiter(this, arguments, void 0, function* (files, { onModelLoaded, onFileLoaded, onFilesLoaded, onModelError, parseModels = true }) {
+    return __awaiter(this, arguments, void 0, function* (files, { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }) {
         yield Promise.all(files.map((file) => __awaiter(this, void 0, void 0, function* () {
-            yield (onFileLoaded === null || onFileLoaded === void 0 ? void 0 : onFileLoaded(file));
-            if (!parseModels || !canParseModelFile(file) || (!onModelLoaded && !onModelError)) {
+            const shouldParseModel = canParseModelFile(file);
+            const shouldParseTexture = canParseTextureFile(file);
+            if (shouldParseModel) {
+                const result = yield parseModelFromFile(file);
+                if (result.success && result.model) {
+                    yield (onModelLoaded === null || onModelLoaded === void 0 ? void 0 : onModelLoaded(result.model, file.name, file));
+                    return;
+                }
+                if (onLoadError) {
+                    yield onLoadError(result.error, file.name, file);
+                    return;
+                }
+                console.error("Model parse error:", result.error);
                 return;
             }
-            const result = yield parseModelFromFile(file);
-            if (result.success && result.model) {
-                yield (onModelLoaded === null || onModelLoaded === void 0 ? void 0 : onModelLoaded(result.model, file.name, file));
+            if (shouldParseTexture) {
+                const result = yield parseTextureFromFile(file);
+                if (result.success && result.texture) {
+                    yield (onTextureLoaded === null || onTextureLoaded === void 0 ? void 0 : onTextureLoaded(result.texture, file.name, file));
+                    return;
+                }
+                if (onLoadError) {
+                    yield onLoadError(result.error, file.name, file);
+                    return;
+                }
+                console.error("Texture parse error:", result.error);
                 return;
             }
-            if (onModelError) {
-                yield onModelError(result.error, file.name, file);
-                return;
+            if (onUnhandledFile) {
+                yield onUnhandledFile(file);
             }
-            console.error("Model parse error:", result.error);
         })));
         yield (onFilesLoaded === null || onFilesLoaded === void 0 ? void 0 : onFilesLoaded(files));
     });
@@ -50,11 +68,11 @@ function reportFileLoadError(error) {
 }
 function createLoadHandlers(options) {
     return {
-        onFileLoaded: options.onFileLoaded,
         onFilesLoaded: options.onFilesLoaded,
-        onModelError: options.onModelError,
         onModelLoaded: options.onModelLoaded,
-        parseModels: options.parseModels,
+        onTextureLoaded: options.onTextureLoaded,
+        onUnhandledFile: options.onUnhandledFile,
+        onLoadError: options.onLoadError,
     };
 }
 export function DragDropLoader(_a) {
@@ -73,7 +91,7 @@ export function DragDropLoader(_a) {
     return (_jsx("div", Object.assign({}, divProps, { onDrop: handleDrop, onDragOver: handleDragOver, children: children })));
 }
 export function FilePicker(_a) {
-    var { accept = ".glb,.gltf,.fbx", children, multiple = true } = _a, divProps = __rest(_a, ["accept", "children", "multiple"]);
+    var { accept = DEFAULT_ACCEPT, children, multiple = true } = _a, divProps = __rest(_a, ["accept", "children", "multiple"]);
     const inputRef = useRef(null);
     const { onClick } = divProps, wrapperProps = __rest(divProps, ["onClick"]);
     const loadOptions = createLoadHandlers(divProps);

package/dist/tools/dragdrop/index.d.ts

@@ -1,4 +1,4 @@
 export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
-export type { DragDropLoaderProps, FileLoadOptions, FilePickerProps } from "./DragDropLoader";
-export { loadModel, parseModelFromFile } from "./modelLoader";
-export type { LoadedModel, ModelLoadResult, ProgressCallback } from "./modelLoader";
+export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
+export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
+export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/dist/tools/dragdrop/index.js

@@ -1,2 +1,2 @@
 export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
-export { loadModel, parseModelFromFile } from "./modelLoader";
+export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -1,11 +1,20 @@
-import type { Object3D } from "three";
+import type { Object3D, Texture } from "three";
 export type LoadedModel = Object3D;
+export type LoadedTexture = Texture;
 export type ModelLoadResult = {
     success: boolean;
     model?: LoadedModel;
     error?: unknown;
 };
+export type TextureLoadResult = {
+    success: boolean;
+    texture?: LoadedTexture;
+    error?: unknown;
+};
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
 export declare function canParseModelFile(file: File | string): boolean;
+export declare function canParseTextureFile(file: File | string): boolean;
 export declare function parseModelFromFile(file: File): Promise<ModelLoadResult>;
+export declare function parseTextureFromFile(file: File): Promise<TextureLoadResult>;
 export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;
+export declare function loadTexture(filename: string): Promise<TextureLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -7,12 +7,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { SRGBColorSpace, TextureLoader } from "three";
 import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 const fbxLoader = new FBXLoader();
+const textureLoader = new TextureLoader();
+const TEXTURE_FILE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".svg"];
 function normalizeModelPath(name) {
     return name.split(/[?#]/, 1)[0].toLowerCase();
 }
@@ -30,6 +33,11 @@ export function canParseModelFile(file) {
     const filename = typeof file === "string" ? file : file.name;
     return getModelFileKind(filename) !== null;
 }
+export function canParseTextureFile(file) {
+    const filename = typeof file === "string" ? file : file.name;
+    const normalizedName = normalizeModelPath(filename);
+    return TEXTURE_FILE_EXTENSIONS.some(extension => normalizedName.endsWith(extension));
+}
 function parseModelBuffer(arrayBuffer, sourceName) {
     const modelFileKind = getModelFileKind(sourceName);
     if (modelFileKind === "gltf") {
@@ -68,6 +76,19 @@ export function parseModelFromFile(file) {
         reader.readAsArrayBuffer(file);
     });
 }
+export function parseTextureFromFile(file) {
+    return new Promise(resolve => {
+        const url = URL.createObjectURL(file);
+        textureLoader.load(url, texture => {
+            texture.colorSpace = SRGBColorSpace;
+            resolve({ success: true, texture });
+            URL.revokeObjectURL(url);
+        }, undefined, error => {
+            resolve({ success: false, error });
+            URL.revokeObjectURL(url);
+        });
+    });
+}
 export function loadModel(filename, onProgress) {
     return __awaiter(this, void 0, void 0, function* () {
         try {
@@ -102,3 +123,21 @@ export function loadModel(filename, onProgress) {
         }
     });
 }
+export function loadTexture(filename) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            if (!canParseTextureFile(filename)) {
+                return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
+            }
+            return yield new Promise(resolve => {
+                textureLoader.load(filename, texture => {
+                    texture.colorSpace = SRGBColorSpace;
+                    resolve({ success: true, texture });
+                }, undefined, error => resolve({ success: false, error }));
+            });
+        }
+        catch (error) {
+            return { success: false, error };
+        }
+    });
+}

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -7,7 +7,7 @@ import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
 import { exportGLB, createModelNode, createImageNode } from "./utils";
-import { parseModelFromFile } from "../dragdrop";
+import { loadFiles } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -120,8 +120,6 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     }, []);
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
-        const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'bmp', 'svg'];
-        const MODEL_EXTS = ['glb', 'gltf', 'fbx'];
         function handleDragOver(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -131,39 +129,32 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             e.preventDefault();
             e.stopPropagation();
             const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
-            files.forEach(file => {
-                var _a, _b;
-                const ext = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-                if (!ext)
-                    return;
-                const baseName = file.name.replace(/\.[^.]+$/, '');
-                if (MODEL_EXTS.includes(ext)) {
-                    const modelPath = `models/${file.name}`;
+            void loadFiles(files, {
+                onModelLoaded: (model, filename) => {
+                    var _a;
+                    const modelPath = `models/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createModelNode(modelPath, baseName);
                     updatePrefab(prev => {
                         var _a;
                         return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
                     });
-                    parseModelFromFile(file).then(result => {
-                        var _a;
-                        if (result.success && result.model) {
-                            (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(modelPath, result.model);
-                        }
-                        else {
-                            console.error('Drop parse error:', result.error);
-                        }
-                    });
-                }
-                else if (IMAGE_EXTS.includes(ext)) {
-                    const texturePath = `textures/${file.name}`;
+                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(modelPath, model);
+                },
+                onTextureLoaded: (texture, filename) => {
+                    var _a;
+                    const texturePath = `textures/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createImageNode(texturePath, baseName);
                     updatePrefab(prev => {
                         var _a;
                         return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
                     });
-                    // Inject a blob URL texture so it renders immediately
-                    (_b = prefabRootRef.current) === null || _b === void 0 ? void 0 : _b.injectTexture(texturePath, file);
-                }
+                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectTexture(texturePath, texture);
+                },
+                onLoadError: error => {
+                    console.error('Drop asset error:', error);
+                },
             });
         }
         window.addEventListener('dragover', handleDragOver);

package/dist/tools/prefabeditor/PrefabRoot.d.ts

@@ -5,7 +5,7 @@ export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
     injectModel: (filename: string, model: Object3D) => void;
-    injectTexture: (filename: string, file: File) => void;
+    injectTexture: (filename: string, texture: Texture) => void;
     focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -40,15 +40,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const injectModel = useCallback((filename, model) => {
         setModels(m => (Object.assign(Object.assign({}, m), { [filename]: model })));
     }, []);
-    const injectTexture = useCallback((filename, file) => {
+    const injectTexture = useCallback((filename, texture) => {
         loading.current.add(filename);
-        const url = URL.createObjectURL(file);
-        const loader = new TextureLoader();
-        loader.load(url, tex => {
-            tex.colorSpace = SRGBColorSpace;
-            setTextures(t => (Object.assign(Object.assign({}, t), { [filename]: tex })));
-            URL.revokeObjectURL(url);
-        }, undefined, () => URL.revokeObjectURL(url));
+        setTextures(t => (Object.assign(Object.assign({}, t), { [filename]: texture })));
     }, []);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,57 +1,80 @@
 import { ChangeEvent, useRef } from "react";
 import type { DragEvent, HTMLAttributes, MouseEvent, ReactNode } from "react";
-import type { LoadedModel } from "./modelLoader";
-import { canParseModelFile, parseModelFromFile } from "./modelLoader";
+import type { LoadedModel, LoadedTexture } from "./modelLoader";
+import { canParseModelFile, canParseTextureFile, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
 
-export interface FileLoadOptions {
+export interface AssetLoadOptions {
     onModelLoaded?: (model: LoadedModel, filename: string, file: File) => void | Promise<void>;
-    onFileLoaded?: (file: File) => void | Promise<void>;
+    onTextureLoaded?: (texture: LoadedTexture, filename: string, file: File) => void | Promise<void>;
+    onUnhandledFile?: (file: File) => void | Promise<void>;
     onFilesLoaded?: (files: File[]) => void | Promise<void>;
-    onModelError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
-    parseModels?: boolean;
+    onLoadError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
 }
 
 type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onDragOver">;
 
-export interface DragDropLoaderProps extends FileLoadOptions, DivProps {
+export interface DragDropLoaderProps extends AssetLoadOptions, DivProps {
     children?: ReactNode;
 }
 
-export interface FilePickerProps extends FileLoadOptions, DivProps {
+export interface FilePickerProps extends AssetLoadOptions, DivProps {
     accept?: string;
     children?: ReactNode;
     multiple?: boolean;
 }
 
+const DEFAULT_ACCEPT = ".glb,.gltf,.fbx,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg";
+
 function getFiles(fileList?: FileList | null) {
     return fileList ? Array.from(fileList) : [];
 }
 
 export async function loadFiles(
     files: File[],
-    { onModelLoaded, onFileLoaded, onFilesLoaded, onModelError, parseModels = true }: FileLoadOptions,
+    { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }: AssetLoadOptions,
 ) {
     await Promise.all(
         files.map(async (file) => {
-            await onFileLoaded?.(file);
+            const shouldParseModel = canParseModelFile(file);
+            const shouldParseTexture = canParseTextureFile(file);
 
-            if (!parseModels || !canParseModelFile(file) || (!onModelLoaded && !onModelError)) {
-                return;
-            }
+            if (shouldParseModel) {
+                const result = await parseModelFromFile(file);
+
+                if (result.success && result.model) {
+                    await onModelLoaded?.(result.model, file.name, file);
+                    return;
+                }
 
-            const result = await parseModelFromFile(file);
+                if (onLoadError) {
+                    await onLoadError(result.error, file.name, file);
+                    return;
+                }
 
-            if (result.success && result.model) {
-                await onModelLoaded?.(result.model, file.name, file);
+                console.error("Model parse error:", result.error);
                 return;
             }
 
-            if (onModelError) {
-                await onModelError(result.error, file.name, file);
+            if (shouldParseTexture) {
+                const result = await parseTextureFromFile(file);
+
+                if (result.success && result.texture) {
+                    await onTextureLoaded?.(result.texture, file.name, file);
+                    return;
+                }
+
+                if (onLoadError) {
+                    await onLoadError(result.error, file.name, file);
+                    return;
+                }
+
+                console.error("Texture parse error:", result.error);
                 return;
             }
 
-            console.error("Model parse error:", result.error);
+            if (onUnhandledFile) {
+                await onUnhandledFile(file);
+            }
         }),
     );
 
@@ -62,14 +85,14 @@ function reportFileLoadError(error: unknown) {
     console.error("File load error:", error);
 }
 
-function createLoadHandlers(options: FileLoadOptions) {
+function createLoadHandlers(options: AssetLoadOptions) {
     return {
-        onFileLoaded: options.onFileLoaded,
         onFilesLoaded: options.onFilesLoaded,
-        onModelError: options.onModelError,
         onModelLoaded: options.onModelLoaded,
-        parseModels: options.parseModels,
-    } satisfies FileLoadOptions;
+        onTextureLoaded: options.onTextureLoaded,
+        onUnhandledFile: options.onUnhandledFile,
+        onLoadError: options.onLoadError,
+    } satisfies AssetLoadOptions;
 }
 
 export function DragDropLoader({
@@ -98,7 +121,7 @@ export function DragDropLoader({
 }
 
 export function FilePicker({
-    accept = ".glb,.gltf,.fbx",
+    accept = DEFAULT_ACCEPT,
     children,
     multiple = true,
     ...divProps

package/src/tools/dragdrop/index.ts

@@ -1,4 +1,4 @@
 export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
-export type { DragDropLoaderProps, FileLoadOptions, FilePickerProps } from "./DragDropLoader";
-export { loadModel, parseModelFromFile } from "./modelLoader";
-export type { LoadedModel, ModelLoadResult, ProgressCallback } from "./modelLoader";
+export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
+export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
+export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/src/tools/dragdrop/modelLoader.ts

@@ -1,7 +1,9 @@
-import type { Object3D } from "three";
+import type { Object3D, Texture } from "three";
+import { SRGBColorSpace, TextureLoader } from "three";
 import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
 
 export type LoadedModel = Object3D;
+export type LoadedTexture = Texture;
 
 export type ModelLoadResult = {
     success: boolean;
@@ -9,6 +11,12 @@ export type ModelLoadResult = {
     error?: unknown;
 };
 
+export type TextureLoadResult = {
+    success: boolean;
+    texture?: LoadedTexture;
+    error?: unknown;
+};
+
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
 
 const dracoLoader = new DRACOLoader();
@@ -18,8 +26,10 @@ const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 
 const fbxLoader = new FBXLoader();
+const textureLoader = new TextureLoader();
 
 type ModelFileKind = "gltf" | "fbx";
+const TEXTURE_FILE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".svg"] as const;
 
 function normalizeModelPath(name: string) {
     return name.split(/[?#]/, 1)[0].toLowerCase();
@@ -44,6 +54,13 @@ export function canParseModelFile(file: File | string) {
     return getModelFileKind(filename) !== null;
 }
 
+export function canParseTextureFile(file: File | string) {
+    const filename = typeof file === "string" ? file : file.name;
+    const normalizedName = normalizeModelPath(filename);
+
+    return TEXTURE_FILE_EXTENSIONS.some(extension => normalizedName.endsWith(extension));
+}
+
 function parseModelBuffer(arrayBuffer: ArrayBuffer, sourceName: string): Promise<ModelLoadResult> {
     const modelFileKind = getModelFileKind(sourceName);
 
@@ -94,6 +111,26 @@ export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
     });
 }
 
+export function parseTextureFromFile(file: File): Promise<TextureLoadResult> {
+    return new Promise(resolve => {
+        const url = URL.createObjectURL(file);
+
+        textureLoader.load(
+            url,
+            texture => {
+                texture.colorSpace = SRGBColorSpace;
+                resolve({ success: true, texture });
+                URL.revokeObjectURL(url);
+            },
+            undefined,
+            error => {
+                resolve({ success: false, error });
+                URL.revokeObjectURL(url);
+            },
+        );
+    });
+}
+
 export async function loadModel(
     filename: string,
     onProgress?: ProgressCallback,
@@ -143,3 +180,25 @@ export async function loadModel(
         return { success: false, error };
     }
 }
+
+export async function loadTexture(filename: string): Promise<TextureLoadResult> {
+    try {
+        if (!canParseTextureFile(filename)) {
+            return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
+        }
+
+        return await new Promise(resolve => {
+            textureLoader.load(
+                filename,
+                texture => {
+                    texture.colorSpace = SRGBColorSpace;
+                    resolve({ success: true, texture });
+                },
+                undefined,
+                error => resolve({ success: false, error }),
+            );
+        });
+    } catch (error) {
+        return { success: false, error };
+    }
+}

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -7,7 +7,7 @@ import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
 import { exportGLB, createModelNode, createImageNode } from "./utils";
-import { parseModelFromFile } from "../dragdrop";
+import { loadFiles } from "../dragdrop";
 
 export interface PrefabEditorRef {
     screenshot: () => void;
@@ -135,25 +135,21 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
 
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
-        const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'bmp', 'svg'];
-        const MODEL_EXTS = ['glb', 'gltf', 'fbx'];
-
         function handleDragOver(e: DragEvent) {
             e.preventDefault();
             e.stopPropagation();
         }
+
         function handleDrop(e: DragEvent) {
             e.preventDefault();
             e.stopPropagation();
-            const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
-            files.forEach(file => {
-                const ext = file.name.split('.').pop()?.toLowerCase();
-                if (!ext) return;
 
-                const baseName = file.name.replace(/\.[^.]+$/, '');
+            const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
 
-                if (MODEL_EXTS.includes(ext)) {
-                    const modelPath = `models/${file.name}`;
+            void loadFiles(files, {
+                onModelLoaded: (model, filename) => {
+                    const modelPath = `models/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createModelNode(modelPath, baseName);
 
                     updatePrefab(prev => ({
@@ -161,15 +157,11 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
                         root: { ...prev.root, children: [...(prev.root.children ?? []), newNode] }
                     }));
 
-                    parseModelFromFile(file).then(result => {
-                        if (result.success && result.model) {
-                            prefabRootRef.current?.injectModel(modelPath, result.model);
-                        } else {
-                            console.error('Drop parse error:', result.error);
-                        }
-                    });
-                } else if (IMAGE_EXTS.includes(ext)) {
-                    const texturePath = `textures/${file.name}`;
+                    prefabRootRef.current?.injectModel(modelPath, model);
+                },
+                onTextureLoaded: (texture, filename) => {
+                    const texturePath = `textures/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createImageNode(texturePath, baseName);
 
                     updatePrefab(prev => ({
@@ -177,9 +169,11 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
                         root: { ...prev.root, children: [...(prev.root.children ?? []), newNode] }
                     }));
 
-                    // Inject a blob URL texture so it renders immediately
-                    prefabRootRef.current?.injectTexture(texturePath, file);
-                }
+                    prefabRootRef.current?.injectTexture(texturePath, texture);
+                },
+                onLoadError: error => {
+                    console.error('Drop asset error:', error);
+                },
             });
         }
 

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -23,7 +23,7 @@ export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>; // RigidBody refs only populated when using physics
     injectModel: (filename: string, model: Object3D) => void;
-    injectTexture: (filename: string, file: File) => void;
+    injectTexture: (filename: string, texture: Texture) => void;
     focusNode: (nodeId: string) => void;
 }
 
@@ -59,15 +59,9 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
         setModels(m => ({ ...m, [filename]: model }));
     }, []);
 
-    const injectTexture = useCallback((filename: string, file: File) => {
+    const injectTexture = useCallback((filename: string, texture: Texture) => {
         loading.current.add(filename);
-        const url = URL.createObjectURL(file);
-        const loader = new TextureLoader();
-        loader.load(url, tex => {
-            tex.colorSpace = SRGBColorSpace;
-            setTextures(t => ({ ...t, [filename]: tex }));
-            URL.revokeObjectURL(url);
-        }, undefined, () => URL.revokeObjectURL(url));
+        setTextures(t => ({ ...t, [filename]: texture }));
     }, []);
 
     useImperativeHandle(ref, () => ({