react-three-game 0.0.58 → 0.0.59

package/.github/copilot-instructions.md

@@ -44,7 +44,7 @@ const MyComponent: Component = {
 
 ## Usage Modes
 
-**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
 
 **PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
 

package/README.md

@@ -16,47 +16,58 @@ npx skills add https://github.com/prnthh/react-three-game-skill
 
 ## Usage Modes
 
-**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
 
 **PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
 
 ## Basic Usage
 
 ```jsx
-import { Physics } from '@react-three/rapier';
-import { GameCanvas, PrefabRoot } from 'react-three-game';
-
-<GameCanvas>
-  <Physics>
-    <PrefabRoot data={{
-      root: {
-        id: "scene",
-        children: [
-          {
-            id: "ground",
-            components: {
-              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
-              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
-              material: { type: "Material", properties: { color: "#3a3" } },
-              physics: { type: "Physics", properties: { type: "fixed" } }
-            }
-          },
-          {
-            id: "ball",
-            components: {
-              transform: { type: "Transform", properties: { position: [0, 5, 0] } },
-              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-              material: { type: "Material", properties: { color: "#f66" } },
-              physics: { type: "Physics", properties: { type: "dynamic" } }
-            }
-          }
-        ]
+import { Physics } from "@react-three/rapier";
+import { GameCanvas, PrefabRoot } from "react-three-game";
+
+const sceneData = {
+  root: {
+    id: "scene",
+    children: [
+      {
+        id: "ground",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
+          material: { type: "Material", properties: { color: "#3a3" } },
+          physics: { type: "Physics", properties: { type: "fixed" } }
+        }
+      },
+      {
+        id: "ball",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 5, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
+          material: { type: "Material", properties: { color: "#f66" } },
+          physics: { type: "Physics", properties: { type: "dynamic" } }
+        }
       }
-    }} />
-  </Physics>
-</GameCanvas>
+    ]
+  }
+};
+
+export default function Home() {
+  return (
+    <main className="flex h-screen w-screen">
+      <GameCanvas>
+        <Physics>
+          <ambientLight intensity={0.8} />
+          <PrefabRoot data={sceneData} />
+        </Physics>
+      </GameCanvas>
+    </main>
+  );
+}
 ```
 
+`GameCanvas` provides the library's WebGPU canvas setup.
+
 ## GameObject Schema
 
 ```typescript

package/dist/index.d.ts

@@ -16,5 +16,5 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, PhysicsEventPayload } from './tools/prefabeditor/GameEvents';
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export * from './tools/dragdrop';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/index.js

@@ -17,5 +17,5 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 // Backward compatibility aliases
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 // Asset Tools
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export * from './tools/dragdrop';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/tools/assetviewer/page.js

@@ -3,7 +3,7 @@ import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
 import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
-import { loadModel } from "../dragdrop/modelLoader";
+import { loadModel } from "../dragdrop";
 class ErrorBoundary extends ReactComponent {
     constructor(props) {
         super(props);

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

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

@@ -7,49 +7,86 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// DragDropLoader.tsx
-import { useEffect } from "react";
-import { parseModelFromFile } from "./modelLoader";
-function handleFiles(files, onModelLoaded) {
-    files.forEach((file) => __awaiter(this, void 0, void 0, function* () {
-        const result = yield parseModelFromFile(file);
-        if (result.success && result.model) {
-            onModelLoaded(result.model, file.name);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
         }
-        else {
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { canParseModelFile, parseModelFromFile } from "./modelLoader";
+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 }) {
+        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)) {
+                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));
+                return;
+            }
+            if (onModelError) {
+                yield onModelError(result.error, file.name, file);
+                return;
+            }
             console.error("Model parse error:", result.error);
-        }
-    }));
+        })));
+        yield (onFilesLoaded === null || onFilesLoaded === void 0 ? void 0 : onFilesLoaded(files));
+    });
 }
-export function DragDropLoader({ onModelLoaded }) {
-    useEffect(() => {
-        function handleDrop(e) {
-            var _a;
-            e.preventDefault();
-            e.stopPropagation();
-            const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
-            handleFiles(files, onModelLoaded);
-        }
-        function handleDragOver(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        window.addEventListener("drop", handleDrop);
-        window.addEventListener("dragover", handleDragOver);
-        return () => {
-            window.removeEventListener("drop", handleDrop);
-            window.removeEventListener("dragover", handleDragOver);
-        };
-    }, [onModelLoaded]);
-    return null;
+function reportFileLoadError(error) {
+    console.error("File load error:", error);
 }
-export function FilePicker({ onModelLoaded }) {
-    function onChange(e) {
-        const files = e.target.files ? Array.from(e.target.files) : [];
-        handleFiles(files, onModelLoaded);
+function createLoadHandlers(options) {
+    return {
+        onFileLoaded: options.onFileLoaded,
+        onFilesLoaded: options.onFilesLoaded,
+        onModelError: options.onModelError,
+        onModelLoaded: options.onModelLoaded,
+        parseModels: options.parseModels,
+    };
+}
+export function DragDropLoader(_a) {
+    var { children } = _a, divProps = __rest(_a, ["children"]);
+    const loadOptions = createLoadHandlers(divProps);
+    function handleDrop(event) {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        void loadFiles(getFiles((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files), loadOptions).catch(reportFileLoadError);
+    }
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    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"]);
+    const inputRef = useRef(null);
+    const { onClick } = divProps, wrapperProps = __rest(divProps, ["onClick"]);
+    const loadOptions = createLoadHandlers(divProps);
+    function onChange(event) {
+        void loadFiles(getFiles(event.target.files), loadOptions).catch(reportFileLoadError);
+        event.target.value = "";
+    }
+    function handleClick(event) {
+        var _a;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
     }
-    // Ref for the hidden input
-    const inputId = "file-picker-input";
-    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, type: "file", accept: ".glb,.gltf,.fbx", multiple: true, onChange: onChange, className: "hidden" }), _jsx("button", { className: "px-3 py-1 bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/40 hover:border-blue-400/60 text-blue-200 hover:text-blue-100 text-xs font-medium transition-all", type: "button", onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Select Files" })] }));
+    return (_jsxs("div", Object.assign({}, wrapperProps, { onClick: handleClick, children: [_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, onChange: onChange, hidden: true }), children !== null && children !== void 0 ? children : "Select Files"] })));
 }

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

@@ -0,0 +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";

package/dist/tools/dragdrop/index.js

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

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

@@ -1,12 +1,11 @@
+import type { Object3D } from "three";
+export type LoadedModel = Object3D;
 export type ModelLoadResult = {
     success: boolean;
-    model?: any;
-    error?: any;
+    model?: LoadedModel;
+    error?: unknown;
 };
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
+export declare function canParseModelFile(file: File | string): boolean;
 export declare function parseModelFromFile(file: File): Promise<ModelLoadResult>;
 export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -7,47 +7,62 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
-// Singleton loader instances
+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();
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
+function normalizeModelPath(name) {
+    return name.split(/[?#]/, 1)[0].toLowerCase();
+}
+function getModelFileKind(name) {
+    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) {
+    const filename = typeof file === "string" ? file : file.name;
+    return getModelFileKind(filename) !== null;
+}
+function parseModelBuffer(arrayBuffer, sourceName) {
+    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}`) });
+}
 export function parseModelFromFile(file) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         const reader = new FileReader();
-        reader.onload = (event) => {
+        reader.onload = event => {
             var _a;
             const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
             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);
@@ -56,33 +71,31 @@ export function parseModelFromFile(file) {
 export function loadModel(filename, onProgress) {
     return __awaiter(this, void 0, void 0, function* () {
         try {
-            // Use filename directly (should already include leading /)
             const fullPath = filename;
-            if (filename.endsWith('.glb') || filename.endsWith('.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);
+            const modelFileKind = getModelFileKind(filename);
+            if (modelFileKind === "gltf") {
+                return new Promise(resolve => {
+                    gltfLoader.load(fullPath, gltf => resolve({ success: true, model: gltf.scene }), progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
-                    }, (error) => resolve({ success: false, error }));
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
+                    }, error => resolve({ success: false, error }));
                 });
             }
-            else if (filename.endsWith('.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);
+            if (modelFileKind === "fbx") {
+                return new Promise(resolve => {
+                    fbxLoader.load(fullPath, model => resolve({ success: true, model }), progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
-                    }, (error) => resolve({ success: false, error }));
+                        const total = progressEvent.total || progressEvent.loaded;
+                        onProgress(filename, progressEvent.loaded, total);
+                    }, error => resolve({ success: false, error }));
                 });
             }
-            else {
-                return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
-            }
+            return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
         }
         catch (error) {
             return { success: false, error };

package/dist/tools/dragdrop/page.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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([]);
-    return (_jsxs(_Fragment, { children: [_jsx(DragDropLoader, { onModelLoaded: model => setModels(prev => [...prev, model]) }), _jsx("div", { className: "w-full items-center justify-items-center min-h-screen", style: { height: "100vh" }, children: _jsx(GameCanvas, { children: _jsxs(Physics, { children: [_jsx(RigidBody, { children: _jsxs("mesh", { castShadow: true, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: "orange" })] }) }), _jsx(RigidBody, { type: "fixed", children: _jsxs("mesh", { position: [0, -2, 0], scale: [10, 0.1, 10], receiveShadow: true, children: [_jsx("boxGeometry", {}), _jsx("meshStandardMaterial", { color: "gray" })] }) }), models.map((model, idx) => (_jsx("primitive", { object: model, position: [0, 0, 0] }, idx))), _jsx("ambientLight", { intensity: 0.5 }), _jsx("pointLight", { position: [10, 10, 10], castShadow: true, intensity: 1000 }), _jsx(OrbitControls, {})] }) }) })] }));
+    return (_jsx(DragDropLoader, { onModelLoaded: model => setModels(prev => [...prev, model]), className: "w-full items-center justify-items-center min-h-screen", style: { height: "100vh" }, children: _jsx("div", { className: "w-full items-center justify-items-center min-h-screen", style: { height: "100vh" }, children: _jsx(GameCanvas, { children: _jsxs(Physics, { children: [_jsx(RigidBody, { children: _jsxs("mesh", { castShadow: true, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: "orange" })] }) }), _jsx(RigidBody, { type: "fixed", children: _jsxs("mesh", { position: [0, -2, 0], scale: [10, 0.1, 10], receiveShadow: true, children: [_jsx("boxGeometry", {}), _jsx("meshStandardMaterial", { color: "gray" })] }) }), models.map((model, idx) => (_jsx("primitive", { object: model, position: [0, 0, 0] }, idx))), _jsx("ambientLight", { intensity: 0.5 }), _jsx("pointLight", { position: [10, 10, 10], castShadow: true, intensity: 1000 }), _jsx(OrbitControls, {})] }) }) }) }));
 }

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/modelLoader";
+import { parseModelFromFile } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -13,7 +13,7 @@ import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, us
 import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
 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 { EditorContext } from "./EditorContext";
@@ -120,8 +120,10 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 ? `${basePath}${file}`
                 : `${basePath}/${file}`;
             const res = yield loadModel(path);
-            res.success && res.model &&
-                setModels(m => (Object.assign(Object.assign({}, m), { [file]: res.model })));
+            const model = res.model;
+            if (res.success && model) {
+                setModels(m => (Object.assign(Object.assign({}, m), { [file]: model })));
+            }
         }));
         const loader = new TextureLoader();
         texturesToLoad.forEach(file => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-three-game",
-  "version": "0.0.58",
-  "description": "Batteries included React Three Fiber game engine",
+  "version": "0.0.59",
+  "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/react-three-game-skill/react-three-game/SKILL.md

@@ -124,6 +124,8 @@ Scenes are defined as JSON prefabs with a root node containing children:
 | SpotLight | `SpotLight` | `color`, `intensity`, `angle`, `penumbra`, `distance?`, `castShadow?` |
 | DirectionalLight | `DirectionalLight` | `color`, `intensity`, `castShadow?`, `targetOffset?: [x,y,z]` |
 | AmbientLight | `AmbientLight` | `color`, `intensity` |
+| Environment | `Environment` | `intensity`, `resolution` |
+| Camera | `Camera` | `fov`, `near`, `far`, `zoom` |
 | Text | `Text` | `text`, `font`, `size`, `depth`, `width`, `align`, `color` |
 
 ### Text Component
@@ -167,20 +169,23 @@ Use radians: `1.57` = 90°, `3.14` = 180°, `-1.57` = -90°
 
 ### Usage Modes
 
-**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
 
 ```jsx
+import { Canvas } from '@react-three/fiber';
 import { Physics } from '@react-three/rapier';
-import { GameCanvas, PrefabRoot } from 'react-three-game';
+import { PrefabRoot } from 'react-three-game';
 
-<GameCanvas>
+<Canvas>
   <Physics>
     <PrefabRoot data={prefabData} />
     <CustomComponent />
   </Physics>
-</GameCanvas>
+</Canvas>
 ```
 
+`GameCanvas` provides the library's WebGPU canvas setup.
+
 **PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children. Editor actions live under `Menu > File`, and exports under `Menu > Export`.
 
 ```jsx
@@ -231,6 +236,36 @@ function DynamicLight() {
 
 **Use cases**: Player controllers, AI behaviors, procedural animation, real-time effects.
 
+## World Scene Pattern
+
+The current world demo combines prefab-authored level geometry with runtime React behavior:
+
+- Static level layout, props, and collision live in prefab JSON.
+- `Environment` can wrap sky geometry or lighting content for a full scene backdrop.
+- `Camera` can live in the prefab so view-only scenes and editor scenes share the same authored viewpoint.
+- Runtime logic can use `useFrame` plus `updateNodeById` to animate prefab entities without abandoning the JSON scene model.
+
+```json
+{
+  "id": "environment",
+  "components": {
+    "environment": {
+      "type": "Environment",
+      "properties": { "intensity": 1, "resolution": 256 }
+    }
+  },
+  "children": [
+    {
+      "id": "sky",
+      "components": {
+        "geometry": { "type": "Geometry", "properties": { "geometryType": "sphere", "args": [100, 32, 16] } },
+        "material": { "type": "Material", "properties": { "texture": "/textures/skybox/skybox1.jpg", "side": "BackSide", "materialType": "basic" } }
+      }
+    }
+  ]
+}
+```
+
 ## Quick Reference Examples
 
 ```json
@@ -379,6 +414,26 @@ const MyComponent: Component = {
 registerComponent(MyComponent);
 ```
 
+Use the component in prefab JSON by adding a component entry whose `type` matches the registered component name:
+
+```json
+{
+  "components": {
+    "mycomponent": {
+      "type": "MyComponent",
+      "properties": {
+        "speed": 1
+      }
+    }
+  }
+}
+```
+
+Rules:
+- Call `registerComponent(MyComponent)` before rendering `<PrefabEditor>` or `<PrefabRoot>` with prefab data that uses it.
+- `type` must match the registered component name exactly (`name: 'MyComponent'` -> `"type": "MyComponent"`).
+- Use `View` to render visible content, wrap `children`, or add runtime behavior with hooks like `useFrame`.
+
 **Field types**: `vector3`, `number`, `string`, `color`, `boolean`, `select`, `custom`
 
 ## Game Events

package/react-three-game-skill/react-three-game/rules/ADVANCED_PHYSICS.md

@@ -48,6 +48,7 @@ Complete reference for `Physics` component properties:
 | `lockRotations` | `boolean` | `false` | Freeze rotation |
 | `enabledTranslations` | `[bool, bool, bool]` | `[true, true, true]` | Lock per axis (X, Y, Z) |
 | `enabledRotations` | `[bool, bool, bool]` | `[true, true, true]` | Lock rotation per axis |
+| `colliders` | `'hull'` \| `'trimesh'` \| `'cuboid'` \| `'ball'` | auto | Collider shape override (`fixed` defaults to `trimesh`, others to `hull`) |
 | `ccd` | `boolean` | `false` | Continuous collision detection (fast objects) |
 | `sensor` | `boolean` | `false` | Trigger only, no collision response |
 | `activeCollisionTypes` | `'all'` | - | Enable kinematic/fixed collision detection (default: dynamic only) |
@@ -284,21 +285,21 @@ Objects will **slide off** the tilted surface.
 
 ## Instanced Physics
 
-When using `"instanced": true` on models, physics behaves differently than standard objects. **All instances of the same model share a single `InstancedRigidBodies` component** for optimal GPU performance.
+When using `"instanced": true` on models, physics behaves differently than standard objects. Physics instancing is designed for batched `fixed` and `dynamic` bodies, where instances of the same model share an `InstancedRigidBodies` path for better performance.
 
 ### Standard vs Instanced Physics
 
 | Aspect | Standard Physics | Instanced Physics |
 |--------|------------------|-------------------|
-| RigidBody Component | Individual `<RigidBody>` per object | Single `<InstancedRigidBodies>` for all instances |
+| RigidBody Component | Individual `<RigidBody>` per object | Single `<InstancedRigidBodies>` group per model + supported physics type |
 | Ref Access | `rigidBodyRefs.get(nodeId)` returns single RigidBody | Not accessible via `rigidBodyRefs` |
 | Force Application | Direct per-object | Must access via InstancedRigidBodies ref |
-| Collider Type | `hull` (dynamic) or `trimesh` (fixed) | Same, auto-selected |
+| Collider Type | `hull` (dynamic) or `trimesh` (fixed) | Auto-selected by instanced physics path |
 | Performance | One draw call per object | One draw call for all instances |
 
 ### Defining Instanced Objects
 
-Set `"instanced": true` in the model component. **All instances of the same model+physics type are automatically batched**:
+Set `"instanced": true` in the model component. **Instances with the same model path and supported physics type are automatically batched**:
 
 ```json
 {
@@ -326,7 +327,7 @@ Add multiple instances - they'll be automatically batched:
 
 ### Force Application on Instanced Objects
 
-**Instanced physics bodies are not individually accessible.** For objects requiring force/impulse control, use non-instanced physics (`"instanced": false` or omit the property).
+**Instanced physics bodies are not individually accessible.** For objects requiring force/impulse control, kinematic motion, or per-body refs, use non-instanced physics (`"instanced": false` or omit the property).
 
 ### When to Use Instanced Physics
 
@@ -345,6 +346,7 @@ Add multiple instances - they'll be automatically batched:
 ### Performance Notes
 
 - **Batching**: All instances with the same `filename` and `physics.type` are rendered in a single draw call
+- **Supported body types**: The instanced physics path is intended for `fixed` and `dynamic` bodies; use standard non-instanced physics for kinematic bodies
 - **Scale handling**: Visual scale is applied per-instance, but collider scale may differ
 - **Transform updates**: Use `updateNodeById` to move instances (triggers re-sync)
 - **Memory**: One set of GPU buffers shared across all instances

package/src/index.ts

@@ -50,7 +50,7 @@ export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
 
 // Asset Tools
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export * from './tools/dragdrop';
 export {
   TextureListViewer,
   ModelListViewer,

package/src/tools/assetviewer/page.tsx

@@ -2,7 +2,7 @@ import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
-import { loadModel } from "../dragdrop/modelLoader";
+import { loadModel } from "../dragdrop";
 
 class ErrorBoundary extends ReactComponent<{ onError?: () => void; children: React.ReactNode }, { hasError: boolean }> {
     constructor(props: any) {

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,73 +1,136 @@
-// DragDropLoader.tsx
-import { useEffect, ChangeEvent } from "react";
-import { parseModelFromFile } from "./modelLoader";
+import { ChangeEvent, useRef } from "react";
+import type { DragEvent, HTMLAttributes, MouseEvent, ReactNode } from "react";
+import type { LoadedModel } from "./modelLoader";
+import { canParseModelFile, parseModelFromFile } from "./modelLoader";
 
-interface DragDropLoaderProps {
-    onModelLoaded: (model: any, filename: string) => void;
+export interface FileLoadOptions {
+    onModelLoaded?: (model: LoadedModel, filename: string, file: File) => void | Promise<void>;
+    onFileLoaded?: (file: File) => void | Promise<void>;
+    onFilesLoaded?: (files: File[]) => void | Promise<void>;
+    onModelError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
+    parseModels?: boolean;
 }
 
-function handleFiles(files: File[], onModelLoaded: (model: any, filename: string) => void) {
-    files.forEach(async (file) => {
-        const result = await parseModelFromFile(file);
-        if (result.success && result.model) {
-            onModelLoaded(result.model, file.name);
-        } else {
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onDragOver">;
+
+export interface DragDropLoaderProps extends FileLoadOptions, DivProps {
+    children?: ReactNode;
+}
+
+export interface FilePickerProps extends FileLoadOptions, DivProps {
+    accept?: string;
+    children?: ReactNode;
+    multiple?: boolean;
+}
+
+function getFiles(fileList?: FileList | null) {
+    return fileList ? Array.from(fileList) : [];
+}
+
+export async function loadFiles(
+    files: File[],
+    { onModelLoaded, onFileLoaded, onFilesLoaded, onModelError, parseModels = true }: FileLoadOptions,
+) {
+    await Promise.all(
+        files.map(async (file) => {
+            await onFileLoaded?.(file);
+
+            if (!parseModels || !canParseModelFile(file) || (!onModelLoaded && !onModelError)) {
+                return;
+            }
+
+            const result = await parseModelFromFile(file);
+
+            if (result.success && result.model) {
+                await onModelLoaded?.(result.model, file.name, file);
+                return;
+            }
+
+            if (onModelError) {
+                await onModelError(result.error, file.name, file);
+                return;
+            }
+
             console.error("Model parse error:", result.error);
-        }
-    });
+        }),
+    );
+
+    await onFilesLoaded?.(files);
 }
 
-export function DragDropLoader({ onModelLoaded }: DragDropLoaderProps) {
-    useEffect(() => {
-        function handleDrop(e: DragEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-            const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
-            handleFiles(files, onModelLoaded);
-        }
-        function handleDragOver(e: DragEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        window.addEventListener("drop", handleDrop);
-        window.addEventListener("dragover", handleDragOver);
-        return () => {
-            window.removeEventListener("drop", handleDrop);
-            window.removeEventListener("dragover", handleDragOver);
-        };
-    }, [onModelLoaded]);
-    return null;
+function reportFileLoadError(error: unknown) {
+    console.error("File load error:", error);
 }
 
-// FilePicker component
-interface FilePickerProps {
-    onModelLoaded: (model: any, filename: string) => void;
+function createLoadHandlers(options: FileLoadOptions) {
+    return {
+        onFileLoaded: options.onFileLoaded,
+        onFilesLoaded: options.onFilesLoaded,
+        onModelError: options.onModelError,
+        onModelLoaded: options.onModelLoaded,
+        parseModels: options.parseModels,
+    } satisfies FileLoadOptions;
 }
 
-export function FilePicker({ onModelLoaded }: FilePickerProps) {
-    function onChange(e: ChangeEvent<HTMLInputElement>) {
-        const files = e.target.files ? Array.from(e.target.files) : [];
-        handleFiles(files, onModelLoaded);
+export function DragDropLoader({
+    children,
+    ...divProps
+}: DragDropLoaderProps) {
+    const loadOptions = createLoadHandlers(divProps);
+
+    function handleDrop(event: DragEvent<HTMLDivElement>) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        void loadFiles(getFiles(event.dataTransfer?.files), loadOptions).catch(reportFileLoadError);
+    }
+
+    function handleDragOver(event: DragEvent<HTMLDivElement>) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    return (
+        <div {...divProps} onDrop={handleDrop} onDragOver={handleDragOver}>
+            {children}
+        </div>
+    );
+}
+
+export function FilePicker({
+    accept = ".glb,.gltf,.fbx",
+    children,
+    multiple = true,
+    ...divProps
+}: FilePickerProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { onClick, ...wrapperProps } = divProps;
+    const loadOptions = createLoadHandlers(divProps);
+
+    function onChange(event: ChangeEvent<HTMLInputElement>) {
+        void loadFiles(getFiles(event.target.files), loadOptions).catch(reportFileLoadError);
+        event.target.value = "";
+    }
+
+    function handleClick(event: MouseEvent<HTMLDivElement>) {
+        onClick?.(event);
+
+        if (!event.defaultPrevented) {
+            inputRef.current?.click();
+        }
     }
-    // Ref for the hidden input
-    const inputId = "file-picker-input";
+
     return (
-        <>
+        <div {...wrapperProps} onClick={handleClick}>
             <input
-                id={inputId}
+                ref={inputRef}
                 type="file"
-                accept=".glb,.gltf,.fbx"
-                multiple
+                accept={accept}
+                multiple={multiple}
                 onChange={onChange}
-                className="hidden"
+                hidden
             />
-            <button
-                className="px-3 py-1 bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/40 hover:border-blue-400/60 text-blue-200 hover:text-blue-100 text-xs font-medium transition-all"
-                type="button"
-                onClick={() => document.getElementById(inputId)?.click()}
-            >
-                Select Files
-            </button>
-        </>
+            {children ?? "Select Files"}
+        </div>
     );
 }

package/src/tools/dragdrop/index.ts

@@ -0,0 +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";

package/src/tools/dragdrop/modelLoader.ts

@@ -1,14 +1,16 @@
-import { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
+import type { Object3D } from "three";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+
+export type LoadedModel = Object3D;
 
 export type ModelLoadResult = {
     success: boolean;
-    model?: any;
-    error?: any;
+    model?: LoadedModel;
+    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/");
 
@@ -17,37 +19,76 @@ gltfLoader.setDRACOLoader(dracoLoader);
 
 const fbxLoader = new FBXLoader();
 
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
+type ModelFileKind = "gltf" | "fbx";
+
+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;
+}
+
+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}`) });
+}
+
 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);
     });
@@ -55,45 +96,49 @@ export function parseModelFromFile(file: File): Promise<ModelLoadResult> {
 
 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}`) };
         }
+
+        return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
     } 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 { parseModelFromFile } from "../dragdrop";
 
 export interface PrefabEditorRef {
     screenshot: () => void;

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";
@@ -155,8 +155,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();