react-three-game 0.0.60 → 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,14 +1,20 @@
 {
   "name": "react-three-game",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "watch": "tsc --watch",
+    "clean": "rm -rf dist",
+    "watch": "npm run clean && tsc --watch",
     "dev": "concurrently \"npm run watch\" \"cd docs && npm run dev\"",
-    "build": "tsc",
+    "build": "npm run clean && tsc",
     "release": "npm run build && npm publish --access public"
   },
   "keywords": [],

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/.github/copilot-instructions.md

@@ -1,83 +0,0 @@
-# react-three-game - AI Coding Agent Instructions
-
-## Project Overview
-AI-native 3D game engine where **scenes are JSON prefabs**. Unity-like GameObject+Component architecture built on React Three Fiber + WebGPU.
-
-## Monorepo Structure
-- **`/src`** → Library source, builds to `/dist`, published as `react-three-game`
-- **`/docs`** → Next.js 16 site, imports library via `"react-three-game": "file:.."`
-- **`npm run dev`** → Runs `tsc --watch` + Next.js concurrently (hot reload works)
-
-## Prefab JSON Schema
-```typescript
-// See docs/app/samples/*.json for examples
-interface Prefab { id?: string; name?: string; root: GameObject; }
-interface GameObject {
-  id: string;                    // Use crypto.randomUUID() for new nodes
-  disabled?: boolean;
-  components?: Record<string, { type: string; properties: any }>;
-  children?: GameObject[];
-}
-```
-**Transforms are LOCAL** (parent-relative). Rotations in radians. Colors as CSS strings.
-
-## Component System (`src/tools/prefabeditor/components/`)
-Every component has `Editor` (inspector UI) + optional `View` (Three.js render):
-```typescript
-const MyComponent: Component = {
-  name: 'MyComponent',  // TitleCase for registry, lowercase key in JSON
-  Editor: ({ component, onUpdate }) => <input onChange={e => onUpdate({ value: e.target.value })} />,
-  View: ({ properties, children }) => <group>{children}</group>,  // Wrapper components accept children
-  defaultProperties: { value: 0 }
-};
-```
-**To add a component:** Create file → export from `components/index.ts` → auto-registered in `PrefabRoot.tsx`.
-
-## Key Files
-| File | Purpose |
-|------|---------|
-| `src/index.ts` | All public exports - add new features here |
-| `src/tools/prefabeditor/PrefabRoot.tsx` | Pure renderer - renders prefab as Three.js objects for R3F integration |
-| `src/tools/prefabeditor/PrefabEditor.tsx` | Managed scene with editor UI and play/pause controls for physics |
-| `src/tools/prefabeditor/utils.ts` | Tree helpers: `findNode`, `updateNode`, `deleteNode`, `cloneNode` |
-| `src/shared/GameCanvas.tsx` | WebGPU renderer setup (use `MeshStandardNodeMaterial`) |
-
-## Usage Modes
-
-**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.
-
-## Critical Patterns
-
-### Tree Manipulation (Immutable)
-```typescript
-import { updateNode, findNode, deleteNode } from 'react-three-game';
-const newRoot = updateNode(root, nodeId, node => ({ ...node, components: { ...node.components, physics: {...} } }));
-```
-
-### WebGPU Materials
-Use node materials only: `MeshStandardNodeMaterial`, `MeshBasicNodeMaterial` (not `MeshStandardMaterial`).
-
-### Physics Wrapping
-`PhysicsComponent.View` wraps children in `<RigidBody>` only when `editMode=false`. Edit mode pauses physics.
-
-### Model Instancing
-Set `model.properties.instanced = true` → uses `InstanceProvider.tsx` for batched rendering with physics.
-
-## Built-in Components
-`Transform`, `Geometry` (box/sphere/plane/cylinder), `Material` (color/texture), `Physics` (dynamic/fixed), `Model` (GLB/FBX), `SpotLight`, `DirectionalLight`, `AmbientLight`, `Text`
-
-## Custom Components (User-space)
-See `docs/app/demo/editor/RotatorComponent.tsx` for runtime behavior example using `useFrame`. Register with `registerComponent()` before rendering `<PrefabEditor>`.
-
-## Development Workflow
-1. **Edit library**: Modify `/src`, auto-rebuilds via `tsc --watch`
-2. **Test in docs**: Changes reflect at `http://localhost:3000`
-3. **Add sample prefabs**: `docs/app/samples/*.json`
-4. **Release**: `npm run release` (builds + publishes)
-
-## Conventions
-- Component keys: lowercase in JSON (`"transform"`), TitleCase in registry (`"Transform"`)
-- Asset paths: Relative to `/public` (e.g., `models/cars/taxi/model.glb`)
-- All Three.js renders must be inside `<GameCanvas>` (WebGPU init required)

package/.github/workflows/nextjs.yml

@@ -1,99 +0,0 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-        with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            docs/.next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-      - name: Install root dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build library
-        run: npm run build
-      - name: Install docs dependencies
-        working-directory: ./docs
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build Next.js docs
-        working-directory: ./docs
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./docs/out
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.gitmodules

@@ -1,3 +0,0 @@
-[submodule "react-three-game-skill"]
-	path = react-three-game-skill
-	url = https://github.com/prnthh/react-three-game-skill

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

@@ -1 +0,0 @@
-export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/tools/dragdrop/page.js

@@ -1,11 +0,0 @@
-"use client";
-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 "./index";
-import GameCanvas from "../../shared/GameCanvas";
-export default function Home() {
-    const [models, setModels] = useState([]);
-    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, {})] }) }) }) }));
-}