react-three-game 0.0.46 → 0.0.47

package/.gitmodules

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

package/README.md

@@ -9,6 +9,11 @@ npm i react-three-game @react-three/fiber @react-three/rapier three
 ![Prefab Editor](assets/editor.gif)
 ![Architecture](assets/architecture.png)
 
+## Agent Skill
+```bash
+npx skills add https://github.com/prnthh/react-three-game-skill
+```
+
 ## Usage
 
 ```jsx

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } 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 { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -6,7 +6,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+import { exportGLB } from "./utils";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -102,18 +102,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, chil
         const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
         if (!sceneRoot)
             return;
-        const exporter = new GLTFExporter();
-        exporter.parse(sceneRoot, (result) => {
-            const blob = new Blob([result], { type: 'application/octet-stream' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `${loadedPrefab.name || 'scene'}.glb`;
-            a.click();
-            URL.revokeObjectURL(url);
-        }, (error) => {
-            console.error('Error exporting GLB:', error);
-        }, { binary: true });
+        exportGLB(sceneRoot, {
+            filename: `${loadedPrefab.name || 'scene'}.glb`
+        });
     };
     useEffect(() => {
         const canvas = document.querySelector('canvas');

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

@@ -1,8 +1,28 @@
 import { GameObject, Prefab } from "./types";
+import { Object3D } from 'three';
+export interface ExportGLBOptions {
+    filename?: string;
+    binary?: boolean;
+    onComplete?: (result: ArrayBuffer | object) => void;
+    onError?: (error: any) => void;
+}
 /** Save a prefab as JSON file */
 export declare function saveJson(data: Prefab, filename: string): void;
 /** Load a prefab from JSON file */
 export declare function loadJson(): Promise<Prefab | undefined>;
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOptions): Promise<ArrayBuffer | object>;
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */

package/dist/tools/prefabeditor/utils.js

@@ -1,3 +1,13 @@
+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 { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 /** Save a prefab as JSON file */
 export function saveJson(data, filename) {
     const a = document.createElement('a');
@@ -34,6 +44,47 @@ export function loadJson() {
         input.click();
     });
 }
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export function exportGLB(sceneRoot, options = {}) {
+    const { filename = 'scene.glb', binary = true, onComplete, onError } = options;
+    return new Promise((resolve, reject) => {
+        const exporter = new GLTFExporter();
+        exporter.parse(sceneRoot, (result) => {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(result);
+            resolve(result);
+            // Trigger download if filename is provided
+            if (filename) {
+                const blob = new Blob([result], { type: binary ? 'application/octet-stream' : 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+        }, (error) => {
+            console.error('Error exporting GLB:', error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            reject(error);
+        }, { binary });
+    });
+}
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export function exportGLBData(sceneRoot) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const result = yield exportGLB(sceneRoot, { filename: '', binary: true });
+        return result;
+    });
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/react-three-game-skill/.gitattributes

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

package/{skill → react-three-game-skill/react-three-game}/SKILL.md

@@ -1,14 +1,63 @@
+---
+name: react-three-game
+description: react-three-game, a JSON-first 3D game engine built on React Three Fiber, WebGPU, and Rapier Physics.
+---
+
 # react-three-game
 
-A Claude Code skill for working with react-three-game, a JSON-first 3D game engine built on React Three Fiber, WebGPU, and Rapier Physics.
+Instructions for the agent to follow when this skill is activated.
+
+## When to use
+
+generate 3D scenes, games and physics simulations in React.
 
-## When to Use This Skill
+## Agent Workflow: JSON → GLB
 
-Use this skill when:
-- Creating or modifying 3D game scenes with react-three-game
-- Working with prefab JSON structures
-- Setting up physics-enabled game objects
-- Creating custom components with editor UI (see Editor Mode section)
+Agents can programmatically generate 3D assets:
+
+1. Create a JSON prefab following the GameObject schema
+2. Load it in `PrefabEditor` to render the Three.js scene
+3. Export the scene to GLB format using `exportGLB` or `exportGLBData`
+
+```tsx
+import { useRef, useEffect } from 'react';
+import { PrefabEditor, exportGLBData } from 'react-three-game';
+import type { PrefabEditorRef } from 'react-three-game';
+
+const jsonPrefab = {
+  root: {
+    id: "scene",
+    children: [
+      {
+        id: "cube",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 0, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "box", args: [1, 1, 1] } },
+          material: { type: "Material", properties: { color: "#ff0000" } }
+        }
+      }
+    ]
+  }
+};
+
+function AgentExporter() {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      const sceneRoot = editorRef.current?.rootRef.current?.root;
+      if (!sceneRoot) return;
+      
+      const glbData = await exportGLBData(sceneRoot);
+      // glbData is an ArrayBuffer ready for upload/storage
+    }, 1000); // Wait for scene to render
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  return <PrefabEditor ref={editorRef} initialPrefab={jsonPrefab} />;
+}
+```
 
 ## Core Concepts
 
@@ -120,7 +169,7 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 ### Tree Manipulation Utilities
 
 ```typescript
-import { findNode, updateNode, updateNodeById, deleteNode, cloneNode } from 'react-three-game';
+import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, saveJson, loadJson, exportGLB, exportGLBData } from 'react-three-game';
 
 // Update a node by ID (optimized - avoids unnecessary object creation)
 const updated = updateNodeById(root, nodeId, node => ({ ...node, disabled: true }));
@@ -133,6 +182,14 @@ const afterDelete = deleteNode(root, nodeId);
 
 // Clone a node
 const cloned = cloneNode(node);
+
+// Save/load JSON
+saveJson(prefab, 'my-scene');
+const loaded = await loadJson();
+
+// Export to GLB
+await exportGLB(sceneRoot, { filename: 'my-scene.glb' });
+const glbData = await exportGLBData(sceneRoot); // Returns ArrayBuffer
 ```
 
 ## Building Game Levels
@@ -360,6 +417,66 @@ The `PrefabEditorRef` provides:
 - `setPrefab(prefab)` - update the prefab
 - `screenshot()` - save canvas as PNG
 - `exportGLB()` - export scene as GLB
+- `rootRef` - reference to the Three.js scene root for programmatic GLB export
+
+### Programmatic GLB Export
+
+Export Three.js scenes to GLB format from JSON prefabs:
+
+```tsx
+import { useRef, useEffect } from 'react';
+import { PrefabEditor, exportGLB, exportGLBData } from 'react-three-game';
+import type { PrefabEditorRef } from 'react-three-game';
+
+function ExportScene() {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  const handleExport = async () => {
+    const sceneRoot = editorRef.current?.rootRef.current?.root;
+    if (!sceneRoot) return;
+
+    // Option 1: Export and trigger browser download
+    await exportGLB(sceneRoot, { 
+      filename: 'my-scene.glb',
+      binary: true,
+      onComplete: (result) => console.log('Export complete'),
+      onError: (error) => console.error('Export failed', error)
+    });
+
+    // Option 2: Get raw ArrayBuffer without downloading
+    const glbData = await exportGLBData(sceneRoot);
+    // Upload to server, save to file system, etc.
+  };
+
+  return (
+    <>
+      <PrefabEditor ref={editorRef} initialPrefab={jsonPrefab} />
+      <button onClick={handleExport}>Export GLB</button>
+    </>
+  );
+}
+```
+
+**Export Options:**
+- `filename` - Output filename (triggers download if provided)
+- `binary` - Export as binary GLB (true) or JSON glTF (false)
+- `onComplete` - Callback when export succeeds
+- `onError` - Callback when export fails
+
+**Common Agent Pattern:**
+```tsx
+useEffect(() => {
+  // Wait for scene to fully render
+  const timer = setTimeout(async () => {
+    const sceneRoot = editorRef.current?.rootRef.current?.root;
+    if (sceneRoot) {
+      const glbData = await exportGLBData(sceneRoot);
+      // Process the ArrayBuffer
+    }
+  }, 1000);
+  return () => clearTimeout(timer);
+}, []);
+```
 
 ### Live Node Updates with useFrame
 
@@ -489,3 +606,4 @@ npm run dev     # tsc --watch + docs site
 npm run build   # build to /dist
 npm run release # build + publish
 ```
+

package/src/index.ts

@@ -26,6 +26,7 @@ export {
 
 // Prefab Editor - Styles & Utils
 export * from './tools/prefabeditor/utils';
+export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 
 // Prefab Editor - Types
 export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -6,8 +6,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
-import { Group } from "three";
+import { exportGLB } from "./utils";
 
 export interface PrefabEditorRef {
     screenshot: () => void;
@@ -115,23 +114,9 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         const sceneRoot = prefabRootRef.current?.root;
         if (!sceneRoot) return;
 
-        const exporter = new GLTFExporter();
-        exporter.parse(
-            sceneRoot,
-            (result) => {
-                const blob = new Blob([result as ArrayBuffer], { type: 'application/octet-stream' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `${loadedPrefab.name || 'scene'}.glb`;
-                a.click();
-                URL.revokeObjectURL(url);
-            },
-            (error) => {
-                console.error('Error exporting GLB:', error);
-            },
-            { binary: true }
-        );
+        exportGLB(sceneRoot, {
+            filename: `${loadedPrefab.name || 'scene'}.glb`
+        });
     };
 
     useEffect(() => {

package/src/tools/prefabeditor/utils.ts

@@ -1,4 +1,13 @@
 import { GameObject, Prefab } from "./types";
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+import { Object3D } from 'three';
+
+export interface ExportGLBOptions {
+    filename?: string;
+    binary?: boolean;
+    onComplete?: (result: ArrayBuffer | object) => void;
+    onError?: (error: any) => void;
+}
 
 /** Save a prefab as JSON file */
 export function saveJson(data: Prefab, filename: string) {
@@ -33,6 +42,66 @@ export function loadJson(): Promise<Prefab | undefined> {
     });
 }
 
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export function exportGLB(
+    sceneRoot: Object3D,
+    options: ExportGLBOptions = {}
+): Promise<ArrayBuffer | object> {
+    const {
+        filename = 'scene.glb',
+        binary = true,
+        onComplete,
+        onError
+    } = options;
+
+    return new Promise((resolve, reject) => {
+        const exporter = new GLTFExporter();
+
+        exporter.parse(
+            sceneRoot,
+            (result) => {
+                onComplete?.(result);
+                resolve(result);
+
+                // Trigger download if filename is provided
+                if (filename) {
+                    const blob = new Blob(
+                        [result as ArrayBuffer],
+                        { type: binary ? 'application/octet-stream' : 'application/json' }
+                    );
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = filename;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                }
+            },
+            (error) => {
+                console.error('Error exporting GLB:', error);
+                onError?.(error);
+                reject(error);
+            },
+            { binary }
+        );
+    });
+}
+
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export async function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer> {
+    const result = await exportGLB(sceneRoot, { filename: '', binary: true });
+    return result as ArrayBuffer;
+}
+
 /** Find a node by ID in the tree */
 export function findNode(root: GameObject, id: string): GameObject | null {
     if (root.id === id) return root;

package/skill/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@react-three-game/skills",
-  "version": "0.0.1",
-  "description": "Agent skill for working with react-three-game - a JSON-first 3D game engine",
-  "repository": {
-    "url": "https://github.com/prnth/react-three-game/tree/main/skill"
-  },
-  "keywords": [
-    "agentic",
-    "skill",
-    "react-three-fiber",
-    "game-engine",
-    "3d",
-    "webgpu"
-  ],
-  "license": "MIT"
-}