react-three-game 0.0.61 → 0.0.62

package/README.md

@@ -161,17 +161,73 @@ 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}
+      />
+    </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.
+- `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, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shared/GameCanvas.js

@@ -31,7 +31,7 @@ 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 } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated"]);
     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 }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
@@ -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,32 @@
-import { Prefab } from "./types";
+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;
     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, 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,71 @@ 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);
+    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);
+        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) => {
+        var _a;
+        const node = createModelNode(path, options === null || options === void 0 ? void 0 : options.name);
+        insertPrefabNode(node, options);
+        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(path, model);
+        return node;
+    };
+    const addTexture = (path, texture, options) => {
+        var _a;
+        const node = createImageNode(path, options === null || options === void 0 ? void 0 : options.name);
+        insertPrefabNode(node, options);
+        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectTexture(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 +160,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 +193,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,12 +213,16 @@ 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] }));
@@ -184,7 +238,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, { camera: { position: [0, 5, 15] }, canvasRef: canvasRef, 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/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.62",
   "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",