react-three-game 0.0.58 → 0.0.60

package/src/tools/dragdrop/modelLoader.ts

@@ -1,14 +1,24 @@
-import { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
+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;
-    model?: any;
-    error?: any;
+    model?: LoadedModel;
+    error?: unknown;
+};
+
+export type TextureLoadResult = {
+    success: boolean;
+    texture?: LoadedTexture;
+    error?: unknown;
 };
 
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
 
-// Singleton loader instances
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 
@@ -16,84 +26,178 @@ 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();
+}
+
+function getModelFileKind(name: string): ModelFileKind | null {
+    const normalizedName = normalizeModelPath(name);
+
+    if (normalizedName.endsWith(".glb") || normalizedName.endsWith(".gltf")) {
+        return "gltf";
+    }
+
+    if (normalizedName.endsWith(".fbx")) {
+        return "fbx";
+    }
+
+    return null;
+}
+
+export function canParseModelFile(file: File | string) {
+    const filename = typeof file === "string" ? file : file.name;
+    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);
+
+    if (modelFileKind === "gltf") {
+        return new Promise(resolve => {
+            gltfLoader.parse(
+                arrayBuffer,
+                "",
+                gltf => {
+                    resolve({ success: true, model: gltf.scene });
+                },
+                error => {
+                    resolve({ success: false, error });
+                },
+            );
+        });
+    }
+
+    if (modelFileKind === "fbx") {
+        try {
+            const model = fbxLoader.parse(arrayBuffer, "");
+            return Promise.resolve({ success: true, model });
+        } catch (error) {
+            return Promise.resolve({ success: false, error });
+        }
+    }
+
+    return Promise.resolve({ success: false, error: new Error(`Unsupported file format: ${sourceName}`) });
+}
 
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
 export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         const reader = new FileReader();
-        reader.onload = (event) => {
+
+        reader.onload = event => {
             const arrayBuffer = event.target?.result as ArrayBuffer;
+
             if (!arrayBuffer) {
-                resolve({ success: false, error: new Error('Failed to read file') });
+                resolve({ success: false, error: new Error("Failed to read file") });
                 return;
             }
-            const name = file.name.toLowerCase();
-            if (name.endsWith('.glb') || name.endsWith('.gltf')) {
-                gltfLoader.parse(arrayBuffer, '', (gltf) => {
-                    resolve({ success: true, model: gltf.scene });
-                }, (error) => {
-                    resolve({ success: false, error });
-                });
-            } else if (name.endsWith('.fbx')) {
-                try {
-                    const model = fbxLoader.parse(arrayBuffer, '');
-                    resolve({ success: true, model });
-                } catch (error) {
-                    resolve({ success: false, error });
-                }
-            } else {
-                resolve({ success: false, error: new Error(`Unsupported file format: ${file.name}`) });
-            }
+
+            void parseModelBuffer(arrayBuffer, file.name).then(resolve);
         };
+
         reader.onerror = () => resolve({ success: false, error: reader.error });
         reader.readAsArrayBuffer(file);
     });
 }
 
+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
+    onProgress?: ProgressCallback,
 ): Promise<ModelLoadResult> {
     try {
-        // Use filename directly (should already include leading /)
         const fullPath = filename;
+        const modelFileKind = getModelFileKind(filename);
 
-        if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
-            return new Promise((resolve) => {
+        if (modelFileKind === "gltf") {
+            return new Promise(resolve => {
                 gltfLoader.load(
                     fullPath,
-                    (gltf) => resolve({ success: true, model: gltf.scene }),
-                    (progressEvent) => {
-                        if (onProgress) {
-                            // Use loaded as total if total is not available
-                            const total = progressEvent.total || progressEvent.loaded;
-                            onProgress(filename, progressEvent.loaded, total);
+                    gltf => resolve({ success: true, model: gltf.scene }),
+                    progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
+
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
                     },
-                    (error) => resolve({ success: false, error })
+                    error => resolve({ success: false, error }),
                 );
             });
-        } else if (filename.endsWith('.fbx')) {
-            return new Promise((resolve) => {
+        }
+
+        if (modelFileKind === "fbx") {
+            return new Promise(resolve => {
                 fbxLoader.load(
                     fullPath,
-                    (model) => resolve({ success: true, model }),
-                    (progressEvent) => {
-                        if (onProgress) {
-                            // Use loaded as total if total is not available
-                            const total = progressEvent.total || progressEvent.loaded;
-                            onProgress(filename, progressEvent.loaded, total);
+                    model => resolve({ success: true, model }),
+                    progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
+
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
                     },
-                    (error) => resolve({ success: false, error })
+                    error => resolve({ success: false, error }),
                 );
             });
-        } else {
+        }
+
+        return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
+    } catch (error) {
+        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/dragdrop/page.tsx

@@ -3,15 +3,18 @@
 import { Physics, RigidBody } from "@react-three/rapier";
 import { OrbitControls } from "@react-three/drei";
 import { useState } from "react";
-import { DragDropLoader } from "./DragDropLoader";
+import { DragDropLoader } from "./index";
 import GameCanvas from "../../shared/GameCanvas";
 
 export default function Home() {
     const [models, setModels] = useState<any[]>([]);
 
     return (
-        <>
-            <DragDropLoader onModelLoaded={model => setModels(prev => [...prev, model])} />
+        <DragDropLoader
+            onModelLoaded={model => setModels(prev => [...prev, model])}
+            className="w-full items-center justify-items-center min-h-screen"
+            style={{ height: "100vh" }}
+        >
             <div className="w-full items-center justify-items-center min-h-screen" style={{ height: "100vh" }}>
                 <GameCanvas>
                     <Physics>
@@ -37,6 +40,6 @@ export default function Home() {
                     </Physics>
                 </GameCanvas>
             </div>
-        </>
+        </DragDropLoader>
     );
 }

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/modelLoader";
+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

@@ -6,7 +6,7 @@ import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
 import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
-import { loadModel } from "../dragdrop/modelLoader";
+import { loadModel } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { focusCameraOnObject, updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
@@ -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, () => ({
@@ -155,8 +149,11 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
                     : `${basePath}/${file}`;
 
             const res = await loadModel(path);
-            res.success && res.model &&
-                setModels(m => ({ ...m, [file]: res.model }));
+            const model = res.model;
+
+            if (res.success && model) {
+                setModels(m => ({ ...m, [file]: model }));
+            }
         });
 
         const loader = new TextureLoader();