react-three-game 0.0.57 → 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,58 +16,78 @@ 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
+interface Prefab {
+  id?: string;
+  name?: string;
+  root: GameObject;
+}
+
 interface GameObject {
   id: string;
+  name?: string;
   disabled?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
+`disabled` is the canonical visibility toggle in the current schema. Transforms are local to the parent node.
+
 ## Built-in Components
 
 | Component | Key Properties |
@@ -110,7 +130,7 @@ const Rotator: Component = {
 registerComponent(Rotator); // before rendering PrefabEditor
 ```
 
-**Wrapper** components accept `children` (animations, controllers). **Leaf** components don't (lights, particles).
+Components may render visible content, wrap child content, or contribute runtime behavior. Keep those semantics explicit in the component `View` rather than relying on hidden tree rules.
 
 ### Schema-Driven Field Types
 
@@ -152,12 +172,16 @@ import { PrefabEditor } from 'react-three-game';
 </PrefabEditor>
 ```
 
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Import/export JSON. Physics only runs in play mode.
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
+
+Editor menu structure:
+- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
+- `Menu > Export`: `GLB`, `PNG`
 
 ## Internals
 
 - **Transforms**: Local in JSON, world computed via matrix multiplication
-- **Instancing**: `model.properties.instanced = true` → `<Merged>` + `<InstancedRigidBodies>`
+- **Instancing**: `model.properties.instanced = true` switches the node to the batched instance path (`<Merged>` / `<InstancedRigidBodies>`) instead of the standard model render path
 - **Models**: GLB/GLTF (Draco) and FBX auto-load from `filename`
 
 ## Tree Utilities

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, {})] }) }) }) }));
 }