react-three-game 0.0.61 → 0.0.63

package/README.md

@@ -3,7 +3,7 @@
 JSON-first 3D game engine. React Three Fiber + WebGPU + Rapier Physics.
 
 ```bash
-npm i react-three-game @react-three/fiber @react-three/rapier three
+npm i react-three-game @react-three/drei @react-three/fiber @react-three/rapier three
 ```
 
 ![Prefab Editor](assets/editor.gif)
@@ -102,8 +102,10 @@ interface GameObject {
 ## Custom Components
 
 ```tsx
+import { useRef } from 'react';
 import { Component, registerComponent, FieldRenderer, FieldDefinition } from 'react-three-game';
 import { useFrame } from '@react-three/fiber';
+import type { Group } from 'three';
 
 const rotatorFields: FieldDefinition[] = [
   { name: 'speed', type: 'number', label: 'Speed', step: 0.1 },
@@ -161,17 +163,75 @@ The `FieldRenderer` component auto-generates editor UI from a field schema:
 ## Prefab Editor
 
 ```jsx
+import { useRef } from 'react';
 import { PrefabEditor } from 'react-three-game';
 
 // Standalone editor
 <PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
 
+// Canvas-only editing mode (keeps canvas selection/gizmos, hides hierarchy + inspector + toolbar)
+<PrefabEditor initialPrefab={sceneData} showUI={false} />
+
 // With custom R3F components
 <PrefabEditor initialPrefab={sceneData}>
   <CustomComponent />
 </PrefabEditor>
 ```
 
+### Embedded / Headless Editor
+
+```tsx
+import { useRef } from 'react';
+import type { Object3D } from 'three';
+import { PrefabEditor, type PrefabEditorRef } from 'react-three-game';
+
+export function EmbeddedEditor({ prefab, onPrefabChange }: {
+  prefab: any;
+  onPrefabChange: (nextPrefab: any) => void;
+}) {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  function loadScene(nextPrefab: any) {
+    editorRef.current?.replacePrefab(nextPrefab);
+  }
+
+  function importRuntimeModel(model: Object3D) {
+    editorRef.current?.addModel('models/runtime/chair.glb', model, {
+      name: 'Chair',
+      parentId: 'root',
+    });
+  }
+
+  return (
+    <div style={{ position: 'relative', height: 600 }}>
+      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10 }}>
+        <button onClick={() => loadScene(prefab)}>Reload Scene</button>
+        <button onClick={() => editorRef.current?.exportGLBData()}>Export GLB Data</button>
+      </div>
+
+      <PrefabEditor
+        ref={editorRef}
+        initialPrefab={prefab}
+        onPrefabChange={onPrefabChange}
+        showUI={false}
+        physics={false}
+        enableWindowDrop={false}
+        canvasProps={{ style: { height: '100%', width: '100%' } }}
+      />
+    </div>
+  );
+}
+```
+
+`showUI={false}` hides the built-in editor chrome but keeps canvas selection, transform controls, and scene interaction. For embedded tools, use the editor ref instead of reaching through `rootRef`:
+
+- `replacePrefab(prefab)` replaces the current scene through the editor state pipeline and resets editor history/selection.
+- `addModel(path, model, options?)` creates a model node and injects the runtime asset in one step.
+- `addTexture(path, texture, options?)` creates a textured plane node and injects the runtime texture in one step.
+- `exportGLBData()` returns the GLB `ArrayBuffer` without triggering a download.
+- `canvasProps` forwards canvas-level sizing, camera, event, and style props to `GameCanvas`.
+- `setPrefab(prefab)` remains as a backward-compatible alias for `replacePrefab(prefab)`.
+
 Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
 
 Editor menu structure:

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { registerComponent } from './tools/prefabeditor/components/ComponentRegi
 export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 export * from './tools/prefabeditor/utils';
 export type { ExportGLBOptions } from './tools/prefabeditor/utils';
-export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorAssetOptions, PrefabEditorProps, PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';

package/dist/shared/GameCanvas.d.ts

@@ -4,6 +4,7 @@ interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
     loader?: boolean;
     children: React.ReactNode;
     glConfig?: WebGPURendererParameters;
+    canvasRef?: React.RefObject<HTMLCanvasElement | null>;
 }
-export default function GameCanvas({ loader, children, glConfig, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
+export default function GameCanvas({ loader, children, glConfig, canvasRef, onCreated, style, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shared/GameCanvas.js

@@ -31,9 +31,9 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 export default function GameCanvas(_a) {
-    var { loader = false, children, glConfig } = _a, props = __rest(_a, ["loader", "children", "glConfig"]);
+    var { loader = false, children, glConfig, canvasRef, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated", "style"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none', userSelect: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
                     shadowMap: true, antialias: true }, glConfig));
@@ -41,5 +41,10 @@ export default function GameCanvas(_a) {
                     setFrameloop("always");
                 });
                 return renderer;
-            }) }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
+            }), onCreated: (state) => {
+                if (canvasRef) {
+                    canvasRef.current = state.gl.domElement;
+                }
+                onCreated === null || onCreated === void 0 ? void 0 : onCreated(state);
+            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
 }

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

@@ -1,18 +1,34 @@
-import { Prefab } from "./types";
+import GameCanvas from "../../shared/GameCanvas";
+import { Object3D, Texture } from "three";
+import { GameObject, Prefab } from "./types";
 import { PrefabRootRef } from "./PrefabRoot";
+import type { ExportGLBOptions } from "./utils";
+export interface PrefabEditorAssetOptions {
+    name?: string;
+    parentId?: string;
+    select?: boolean;
+}
 export interface PrefabEditorRef {
     screenshot: () => void;
-    exportGLB: () => void;
+    exportGLB: (options?: ExportGLBOptions) => Promise<ArrayBuffer | object | undefined>;
+    exportGLBData: () => Promise<ArrayBuffer | undefined>;
     prefab: Prefab;
     setPrefab: (prefab: Prefab) => void;
+    replacePrefab: (prefab: Prefab) => void;
+    addModel: (path: string, model: Object3D, options?: PrefabEditorAssetOptions) => GameObject;
+    addTexture: (path: string, texture: Texture, options?: PrefabEditorAssetOptions) => GameObject;
     rootRef: React.RefObject<PrefabRootRef | null>;
 }
-declare const PrefabEditor: import("react").ForwardRefExoticComponent<{
+export interface PrefabEditorProps {
     basePath?: string;
     initialPrefab?: Prefab;
     physics?: boolean;
     onPrefabChange?: (prefab: Prefab) => void;
+    showUI?: boolean;
+    enableWindowDrop?: boolean;
+    canvasProps?: Omit<React.ComponentProps<typeof GameCanvas>, 'children' | 'canvasRef'>;
     uiPlugins?: React.ReactNode[] | React.ReactNode;
     children?: React.ReactNode;
-} & import("react").RefAttributes<PrefabEditorRef>>;
+}
+declare const PrefabEditor: import("react").ForwardRefExoticComponent<PrefabEditorProps & import("react").RefAttributes<PrefabEditorRef>>;
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
@@ -6,7 +15,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { exportGLB, createModelNode, createImageNode } from "./utils";
+import { createImageNode, createModelNode, exportGLB as exportSceneGLB, exportGLBData, insertNode } from "./utils";
 import { loadFiles } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
@@ -21,7 +30,7 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, uiPlugins, children }, ref) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
@@ -35,20 +44,73 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const lastDataRef = useRef(JSON.stringify(loadedPrefab));
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
+    const onPrefabChangeRef = useRef(onPrefabChange);
+    const pendingPrefabChangeRef = useRef(null);
+    const [injectedModels, setInjectedModels] = useState({});
+    const [injectedTextures, setInjectedTextures] = useState({});
+    useEffect(() => {
+        onPrefabChangeRef.current = onPrefabChange;
+    }, [onPrefabChange]);
+    const replacePrefab = (prefab, options) => {
+        if (throttleRef.current)
+            clearTimeout(throttleRef.current);
+        lastDataRef.current = JSON.stringify(prefab);
+        pendingPrefabChangeRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? null : prefab;
+        setSelectedId(null);
+        setInjectedModels({});
+        setInjectedTextures({});
+        setHistory([prefab]);
+        setHistoryIndex(0);
+        setLoadedPrefab(prefab);
+    };
     useEffect(() => {
         if (initialPrefab)
-            setLoadedPrefab(initialPrefab);
+            replacePrefab(initialPrefab, { notifyChange: false });
     }, [initialPrefab]);
     const updatePrefab = (newPrefab) => {
-        setLoadedPrefab(newPrefab);
-        const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
-        onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
+        setLoadedPrefab(prev => {
+            const resolved = typeof newPrefab === 'function' ? newPrefab(prev) : newPrefab;
+            if (Object.is(resolved, prev)) {
+                pendingPrefabChangeRef.current = null;
+                return prev;
+            }
+            pendingPrefabChangeRef.current = resolved;
+            return resolved;
+        });
+    };
+    useEffect(() => {
+        var _a;
+        if (pendingPrefabChangeRef.current !== loadedPrefab)
+            return;
+        (_a = onPrefabChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPrefabChangeRef, loadedPrefab);
+        pendingPrefabChangeRef.current = null;
+    }, [loadedPrefab]);
+    const insertPrefabNode = (node, options) => {
+        updatePrefab(prev => {
+            return Object.assign(Object.assign({}, prev), { root: insertNode(prev.root, node, options === null || options === void 0 ? void 0 : options.parentId) });
+        });
+        if ((options === null || options === void 0 ? void 0 : options.select) !== false) {
+            setSelectedId(node.id);
+        }
+        return node;
+    };
+    const addModel = (path, model, options) => {
+        const node = createModelNode(path, options === null || options === void 0 ? void 0 : options.name);
+        insertPrefabNode(node, options);
+        setInjectedModels(prev => (Object.assign(Object.assign({}, prev), { [path]: model })));
+        return node;
+    };
+    const addTexture = (path, texture, options) => {
+        const node = createImageNode(path, options === null || options === void 0 ? void 0 : options.name);
+        insertPrefabNode(node, options);
+        setInjectedTextures(prev => (Object.assign(Object.assign({}, prev), { [path]: texture })));
+        return node;
     };
     const applyHistory = (index) => {
         setHistoryIndex(index);
         lastDataRef.current = JSON.stringify(history[index]);
+        pendingPrefabChangeRef.current = history[index];
         setLoadedPrefab(history[index]);
-        onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(history[index]);
     };
     const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
     const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
@@ -100,26 +162,28 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             URL.revokeObjectURL(url);
         });
     };
-    const handleExportGLB = () => {
+    const handleExportGLB = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (options = {}) {
         var _a;
         const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
         if (!sceneRoot)
             return;
-        exportGLB(sceneRoot, {
-            filename: `${loadedPrefab.name || 'scene'}.glb`
-        });
-    };
+        return exportSceneGLB(sceneRoot, Object.assign({ filename: `${loadedPrefab.name || 'scene'}.glb` }, options));
+    });
+    const handleExportGLBData = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
+        if (!sceneRoot)
+            return;
+        return exportGLBData(sceneRoot);
+    });
     const handleFocusNode = (nodeId) => {
         var _a;
         (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.focusNode(nodeId);
     };
-    useEffect(() => {
-        const canvas = document.querySelector('canvas');
-        if (canvas)
-            canvasRef.current = canvas;
-    }, []);
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
+        if (!enableWindowDrop)
+            return;
         function handleDragOver(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -131,26 +195,14 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
             void loadFiles(files, {
                 onModelLoaded: (model, filename) => {
-                    var _a;
-                    const modelPath = `models/${filename}`;
-                    const baseName = filename.replace(/\.[^.]+$/, '');
-                    const newNode = createModelNode(modelPath, baseName);
-                    updatePrefab(prev => {
-                        var _a;
-                        return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
+                    addModel(`models/${filename}`, model, {
+                        name: filename.replace(/\.[^.]+$/, '')
                     });
-                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(modelPath, model);
                 },
                 onTextureLoaded: (texture, filename) => {
-                    var _a;
-                    const texturePath = `textures/${filename}`;
-                    const baseName = filename.replace(/\.[^.]+$/, '');
-                    const newNode = createImageNode(texturePath, baseName);
-                    updatePrefab(prev => {
-                        var _a;
-                        return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
+                    addTexture(`textures/${filename}`, texture, {
+                        name: filename.replace(/\.[^.]+$/, '')
                     });
-                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectTexture(texturePath, texture);
                 },
                 onLoadError: error => {
                     console.error('Drop asset error:', error);
@@ -163,15 +215,19 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             window.removeEventListener('dragover', handleDragOver);
             window.removeEventListener('drop', handleDrop);
         };
-    }, [loadedPrefab]);
+    }, [enableWindowDrop]);
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,
+        exportGLBData: handleExportGLBData,
         prefab: loadedPrefab,
-        setPrefab: setLoadedPrefab,
+        setPrefab: replacePrefab,
+        replacePrefab,
+        addModel,
+        addTexture,
         rootRef: prefabRootRef
     }), [loadedPrefab]);
-    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath }), children] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
     return _jsxs(EditorContext.Provider, { value: {
             transformMode,
             setTransformMode,
@@ -184,7 +240,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             onFocusNode: handleFocusNode,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, children: [_jsx(GameCanvas, { camera: { position: [0, 5, 15] }, children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content }), _jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
+        }, children: [_jsx(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] }))] });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -4,8 +4,6 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
-    injectModel: (filename: string, model: Object3D) => void;
-    injectTexture: (filename: string, texture: Texture) => void;
     focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
@@ -16,6 +14,8 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     basePath?: string;
+    injectedModels?: Record<string, Object3D>;
+    injectedTextures?: Record<string, Texture>;
 } & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
 import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
@@ -19,7 +19,7 @@ import { focusCameraOnObject, updateNode } from "./utils";
 import { EditorContext } from "./EditorContext";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "", injectedModels = {}, injectedTextures = {} }, ref) => {
     var _a, _b, _c, _d;
     // optional editor context
     const editorContext = useContext(EditorContext);
@@ -37,18 +37,11 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
     const controlsRef = useRef(null);
-    const injectModel = useCallback((filename, model) => {
-        setModels(m => (Object.assign(Object.assign({}, m), { [filename]: model })));
-    }, []);
-    const injectTexture = useCallback((filename, texture) => {
-        loading.current.add(filename);
-        setTextures(t => (Object.assign(Object.assign({}, t), { [filename]: texture })));
-    }, []);
+    const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
+    const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
-        injectModel,
-        injectTexture,
         focusNode: (nodeId) => {
             const object = objectRefs.current[nodeId];
             const controls = controlsRef.current;
@@ -57,7 +50,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 return;
             focusCameraOnObject(object, camera, controls.target, () => { var _a; return (_a = controls.update) === null || _a === void 0 ? void 0 : _a.call(controls); });
         }
-    }), [injectModel, injectTexture]);
+    }), []);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
         if (id === selectedId)
@@ -107,7 +100,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 texturesToLoad.add(node.components.material.properties.normalMapTexture);
         });
         modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
-            if (models[file] || loading.current.has(file))
+            if (availableModels[file] || loading.current.has(file))
                 return;
             loading.current.add(file);
             const path = file.startsWith("/")
@@ -121,7 +114,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         }));
         const loader = new TextureLoader();
         texturesToLoad.forEach(file => {
-            if (textures[file] || loading.current.has(file) || failedTextures.current.has(file))
+            if (availableTextures[file] || loading.current.has(file) || failedTextures.current.has(file))
                 return;
             loading.current.add(file);
             // Handle full URLs (http/https) or regular paths
@@ -139,8 +132,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 failedTextures.current.add(file);
             });
         });
-    }, [data, models, textures]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
+    }, [data, availableModels, availableTextures, basePath]);
+    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
 });
 export function GameObjectRenderer(props) {
     var _a, _b, _c;

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

@@ -36,6 +36,8 @@ export declare function findByComponent(root: GameObject, componentType: string)
 export declare function flatten(root: GameObject): GameObject[];
 /** Immutably update a node by ID */
 export declare function updateNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject;
+/** Immutably insert a node under a parent ID, defaulting to the root when the parent is missing */
+export declare function insertNode(root: GameObject, node: GameObject, parentId?: string): GameObject;
 /** Immutably delete a node by ID */
 export declare function deleteNode(root: GameObject, id: string): GameObject | null;
 /** Deep clone a node with new IDs */

package/dist/tools/prefabeditor/utils.js

@@ -184,6 +184,21 @@ export function updateNode(root, id, update) {
         return root;
     return Object.assign(Object.assign({}, root), { children: root.children.map(child => updateNode(child, id, update)) });
 }
+/** Immutably insert a node under a parent ID, defaulting to the root when the parent is missing */
+export function insertNode(root, node, parentId) {
+    var _a, _b;
+    if (!parentId || parentId === root.id) {
+        return Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), node] });
+    }
+    const nextRoot = updateNode(root, parentId, parent => {
+        var _a;
+        return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), node] }));
+    });
+    if (nextRoot === root) {
+        return Object.assign(Object.assign({}, root), { children: [...((_b = root.children) !== null && _b !== void 0 ? _b : []), node] });
+    }
+    return nextRoot;
+}
 /** Immutably delete a node by ID */
 export function deleteNode(root, id) {
     if (root.id === id)

package/package.json

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