react-three-game 0.0.37 → 0.0.39

package/src/helpers/SoundManager.ts

@@ -0,0 +1,130 @@
+ 
+class SoundManager {
+  private static _instance: SoundManager | null = null
+
+  public context: AudioContext
+  private buffers = new Map<string, AudioBuffer>()
+
+  private masterGain: GainNode
+  private sfxGain: GainNode
+  private musicGain: GainNode
+
+  private constructor() {
+    const AudioCtx =
+      window.AudioContext || (window as any).webkitAudioContext
+
+    this.context = new AudioCtx()
+
+    this.masterGain = this.context.createGain()
+    this.sfxGain = this.context.createGain()
+    this.musicGain = this.context.createGain()
+
+    this.sfxGain.connect(this.masterGain)
+    this.musicGain.connect(this.masterGain)
+    this.masterGain.connect(this.context.destination)
+
+    this.masterGain.gain.value = 1
+    this.sfxGain.gain.value = 1
+    this.musicGain.gain.value = 1
+  }
+
+  /** Singleton accessor */
+  static get instance(): SoundManager {
+    if (typeof window === 'undefined') {
+      // Return a dummy instance for SSR
+      return new Proxy({} as SoundManager, {
+        get: () => () => {}
+      })
+    }
+    if (!SoundManager._instance) {
+      SoundManager._instance = new SoundManager()
+    }
+    return SoundManager._instance
+  }
+
+  /** Required once after user gesture (browser) */
+  resume() {
+    if (this.context.state !== "running") {
+      this.context.resume()
+    }
+  }
+
+  /** Preload a sound from URL */
+  async load(path: string, url: string) {
+    if (this.buffers.has(path)) return
+
+    const res = await fetch(url)
+    const arrayBuffer = await res.arrayBuffer()
+    const buffer = await this.context.decodeAudioData(arrayBuffer)
+
+    this.buffers.set(path, buffer)
+  }
+
+  /** Play from already-loaded buffer (fails silently if not loaded) */
+  playSync(
+    path: string,
+    {
+      volume = 1,
+      playbackRate = 1,
+      detune = 0,
+      pitch = 1,
+    }: {
+      volume?: number
+      playbackRate?: number
+      detune?: number
+      pitch?: number
+    } = {}
+  ) {
+    this.resume()
+
+    const buffer = this.buffers.get(path)
+    if (!buffer) return
+
+    const src = this.context.createBufferSource()
+    const gain = this.context.createGain()
+
+    src.buffer = buffer
+    src.playbackRate.value = playbackRate * pitch
+    src.detune.value = detune
+
+    gain.gain.value = volume
+
+    src.connect(gain)
+    gain.connect(this.sfxGain)
+
+    src.start()
+  }
+
+  /** Load and play SFX - accepts file path directly */
+  async play(
+    path: string,
+    options?: {
+      volume?: number
+      playbackRate?: number
+      detune?: number
+      pitch?: number
+    }
+  ) {
+    // Auto-load from path if not already loaded
+    if (!this.buffers.has(path)) {
+      await this.load(path, path)
+    }
+
+    this.playSync(path, options)
+  }
+
+  /** Volume controls */
+  setMasterVolume(v: number) {
+    this.masterGain.gain.value = v
+  }
+
+  setSfxVolume(v: number) {
+    this.sfxGain.gain.value = v
+  }
+
+  setMusicVolume(v: number) {
+    this.musicGain.gain.value = v
+  }
+}
+
+export const sound = SoundManager.instance

package/src/index.ts

@@ -1,7 +1,18 @@
-// Components
+// Core Components
 export { default as GameCanvas } from './shared/GameCanvas';
+
+// Prefab Editor
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
+export * as editorStyles from './tools/prefabeditor/styles';
+export * from './tools/prefabeditor/utils';
+
+// Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export {
   TextureListViewer,
@@ -9,17 +20,7 @@ export {
   SoundListViewer,
   SharedCanvas,
 } from './tools/assetviewer/page';
-
-// Component Registry
-export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
-
-// Editor Styles & Utils
-export * as editorStyles from './tools/prefabeditor/styles';
-export * from './tools/prefabeditor/utils';
+export { sound as soundManager } from './helpers/SoundManager';
 
 // Helpers
 export * from './helpers';
-
-// Types
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/src/shared/GameCanvas.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Canvas, extend } from "@react-three/fiber";
+import { Canvas, extend, CanvasProps } from "@react-three/fiber";
 import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
 import { Suspense, useState } from "react";
 import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
@@ -15,8 +15,13 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 
+interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
+    loader?: boolean;
+    children: React.ReactNode;
+    glConfig?: WebGPURendererParameters;
+}
 
-export default function GameCanvas({ loader = false, children, ...props }: { loader?: boolean, children: React.ReactNode, props?: WebGPURendererParameters }) {
+export default function GameCanvas({ loader = false, children, glConfig, ...props }: GameCanvasProps) {
     const [frameloop, setFrameloop] = useState<"never" | "always">("never");
 
     return <>
@@ -30,7 +35,7 @@ export default function GameCanvas({ loader = false, children, ...props }: { loa
                     // @ts-expect-error futuristic
                     shadowMap: true,
                     antialias: true,
-                    ...props,
+                    ...glConfig,
                 });
                 await renderer.init().then(() => {
                     setFrameloop("always");
@@ -40,6 +45,7 @@ export default function GameCanvas({ loader = false, children, ...props }: { loa
             camera={{
                 position: [0, 1, 5],
             }}
+            {...props}
         >
             <Suspense>
                 {children}

package/src/tools/prefabeditor/EditorContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+interface EditorContextType {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (resolution: number) => void;
+    onScreenshot?: () => void;
+    onExportGLB?: () => void;
+}
+
+export const EditorContext = createContext<EditorContextType | null>(null);
+
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within EditorContext.Provider");
+    }
+    return context;
+}

package/src/tools/prefabeditor/EditorTree.tsx

@@ -2,15 +2,14 @@ import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { useEditorContext } from './EditorContext';
 
 export default function EditorTree({
     prefabData,
     setPrefabData,
     selectedId,
     setSelectedId,
-    onSave,
-    onLoad,
     onUndo,
     onRedo,
     canUndo,
@@ -20,8 +19,6 @@ export default function EditorTree({
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
@@ -212,23 +209,11 @@ export default function EditorTree({
                                     ⋮
                                 </button>
                                 {fileMenuOpen && (
-                                    <div
-                                        style={{ ...menu.container, top: 28, right: 0 }}
-                                        onClick={(e) => e.stopPropagation()}
-                                    >
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onLoad?.(); setFileMenuOpen(false); }}
-                                        >
-                                            📥 Load
-                                        </button>
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onSave?.(); setFileMenuOpen(false); }}
-                                        >
-                                            💾 Save
-                                        </button>
-                                    </div>
+                                    <FileMenu
+                                        prefabData={prefabData}
+                                        setPrefabData={setPrefabData}
+                                        onClose={() => setFileMenuOpen(false)}
+                                    />
                                 )}
                             </div>
                         </div>
@@ -261,3 +246,79 @@ export default function EditorTree({
         </>
     );
 }
+
+function FileMenu({
+    prefabData,
+    setPrefabData,
+    onClose
+}: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+
+    const handleLoad = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    };
+
+    const handleSave = () => {
+        saveJson(prefabData, "prefab");
+        onClose();
+    };
+
+    const handleLoadIntoScene = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, prev.root.id, root => ({
+                ...root,
+                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
+            }))
+        }));
+        onClose();
+    };
+
+    return (
+        <div
+            style={{ ...menu.container, top: 28, right: 0 }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <button
+                style={menu.item}
+                onClick={handleLoad}
+            >
+                📥 Load Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleSave}
+            >
+                💾 Save Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleLoadIntoScene}
+            >
+                📂 Load into Scene
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onScreenshot?.(); onClose(); }}
+            >
+                📸 Screenshot
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onExportGLB?.(); onClose(); }}
+            >
+                📦 Export GLB
+            </button>
+        </div>
+    );
+}

package/src/tools/prefabeditor/EditorUI.tsx

@@ -4,17 +4,14 @@ import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, inspector } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
+import { useEditorContext } from './EditorContext';
 
 function EditorUI({
     prefabData,
     setPrefabData,
     selectedId,
     setSelectedId,
-    transformMode,
-    setTransformMode,
     basePath,
-    onSave,
-    onLoad,
     onUndo,
     onRedo,
     canUndo,
@@ -24,17 +21,14 @@ function EditorUI({
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
     basePath?: string;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
     canRedo?: boolean;
 }) {
     const [collapsed, setCollapsed] = useState(false);
+    const { transformMode, setTransformMode } = useEditorContext();
 
     const updateNodeHandler = (updater: (n: GameObjectType) => GameObjectType) => {
         if (!prefabData || !setPrefabData || !selectedId) return;
@@ -81,8 +75,6 @@ function EditorUI({
                 setPrefabData={setPrefabData}
                 selectedId={selectedId}
                 setSelectedId={setSelectedId}
-                onSave={onSave}
-                onLoad={onLoad}
                 onUndo={onUndo}
                 onRedo={onRedo}
                 canUndo={canUndo}
@@ -119,12 +111,19 @@ function NodeInspector({
     }, [Object.keys(node.components || {}).join(',')]);
 
     return <div style={inspector.content} className="prefab-scroll">
-        {/* Node ID */}
+        {/* Node Name */}
         <div style={base.section}>
-            <div style={base.label}>Node ID</div>
+            <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
+                <div style={{ fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }}>
+                    {node.id}
+                </div>
+                <button style={{ ...base.btn, ...base.btnDanger }} title="Delete Node" onClick={deleteNode}>❌</button>
+            </div>
+
             <input
                 style={base.input}
                 value={node.name ?? ""}
+                placeholder='Node name'
                 onChange={e =>
                     updateNode(n => ({ ...n, name: e.target.value }))
                 }
@@ -135,7 +134,6 @@ function NodeInspector({
         <div style={base.section}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                 <div style={base.label}>Components</div>
-                <button style={{ ...base.btn, ...base.btnDanger }} onClick={deleteNode}>Delete Node</button>
             </div>
 
             {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
@@ -151,6 +149,7 @@ function NodeInspector({
                             <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
                             <button
                                 style={{ ...base.btn, padding: '2px 6px' }}
+                                title="Remove Component"
                                 onClick={() => updateNode(n => {
                                     const { [key]: _, ...rest } = n.components || {};
                                     return { ...n, components: rest };
@@ -162,6 +161,7 @@ function NodeInspector({
                         {def.Editor && (
                             <def.Editor
                                 component={comp}
+                                node={node}
                                 onUpdate={(newProps: any) => updateNode(n => ({
                                     ...n,
                                     components: {
@@ -182,7 +182,6 @@ function NodeInspector({
         {/* Add Component */}
         {available.length > 0 && (
             <div>
-                <div style={base.label}>Add Component</div>
                 <div style={base.row}>
                     <select
                         style={{ ...base.input, flex: 1 }}
@@ -207,6 +206,7 @@ function NodeInspector({
                                 }));
                             }
                         }}
+                        title="Add Component"
                     >
                         +
                     </button>

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -1,12 +1,23 @@
 "use client";
 
 import GameCanvas from "../../shared/GameCanvas";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import { Prefab } from "./types";
-import PrefabRoot from "./PrefabRoot";
+import PrefabRoot, { PrefabRootRef } from "./PrefabRoot";
 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";
+
+export interface PrefabEditorRef {
+    screenshot: () => void;
+    exportGLB: () => void;
+    prefab: Prefab;
+    setPrefab: (prefab: Prefab) => void;
+    rootRef: React.RefObject<PrefabRootRef | null>;
+}
 
 const DEFAULT_PREFAB: Prefab = {
     id: "prefab-default",
@@ -22,20 +33,23 @@ const DEFAULT_PREFAB: Prefab = {
     }
 };
 
-const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: {
+const PrefabEditor = forwardRef<PrefabEditorRef, {
     basePath?: string;
     initialPrefab?: Prefab;
     onPrefabChange?: (prefab: Prefab) => void;
     children?: React.ReactNode;
-}) => {
+}>(({ basePath, initialPrefab, onPrefabChange, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
+    const [snapResolution, setSnapResolution] = useState(0);
     const [history, setHistory] = useState<Prefab[]>([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const throttleRef = useRef<NodeJS.Timeout | null>(null);
     const lastDataRef = useRef(JSON.stringify(loadedPrefab));
+    const prefabRootRef = useRef<PrefabRootRef>(null);
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
     useEffect(() => {
         if (initialPrefab) setLoadedPrefab(initialPrefab);
@@ -84,29 +98,76 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: {
         return () => { if (throttleRef.current) clearTimeout(throttleRef.current); };
     }, [loadedPrefab]);
 
-    const handleLoad = async () => {
-        const prefab = await loadJson();
-        if (prefab) {
-            setLoadedPrefab(prefab);
-            onPrefabChange?.(prefab);
-            setHistory([prefab]);
-            setHistoryIndex(0);
-            lastDataRef.current = JSON.stringify(prefab);
-        }
+    const handleScreenshot = () => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        canvas.toBlob((blob) => {
+            if (!blob) return;
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${loadedPrefab.name || 'screenshot'}.png`;
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+    };
+
+    const handleExportGLB = () => {
+        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 }
+        );
     };
 
-    return <>
+    useEffect(() => {
+        const canvas = document.querySelector('canvas');
+        if (canvas) canvasRef.current = canvas;
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        screenshot: handleScreenshot,
+        exportGLB: handleExportGLB,
+        prefab: loadedPrefab,
+        setPrefab: setLoadedPrefab,
+        rootRef: prefabRootRef
+    }), [loadedPrefab]);
+
+    return <EditorContext.Provider value={{
+        transformMode,
+        setTransformMode,
+        snapResolution,
+        setSnapResolution,
+        onScreenshot: handleScreenshot,
+        onExportGLB: handleExportGLB
+    }}>
         <GameCanvas>
             <Physics debug={editMode} paused={editMode}>
                 <ambientLight intensity={1.5} />
                 <gridHelper args={[10, 10]} position={[0, -1, 0]} />
                 <PrefabRoot
+                    ref={prefabRootRef}
                     data={loadedPrefab}
                     editMode={editMode}
                     onPrefabChange={updatePrefab}
                     selectedId={selectedId}
                     onSelect={setSelectedId}
-                    transformMode={transformMode}
                     basePath={basePath}
                 />
                 {children}
@@ -123,47 +184,15 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: {
             setPrefabData={updatePrefab}
             selectedId={selectedId}
             setSelectedId={setSelectedId}
-            transformMode={transformMode}
-            setTransformMode={setTransformMode}
             basePath={basePath}
-            onSave={() => saveJson(loadedPrefab, "prefab")}
-            onLoad={handleLoad}
             onUndo={undo}
             onRedo={redo}
             canUndo={historyIndex > 0}
             canRedo={historyIndex < history.length - 1}
         />}
-    </>
-}
-
-
-const saveJson = (data: Prefab, filename: string) => {
-    const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    a.download = `${filename || 'prefab'}.json`;
-    a.click();
-};
-
-const loadJson = () => new Promise<Prefab | undefined>(resolve => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json,application/json';
-    input.onchange = e => {
-        const file = (e.target as HTMLInputElement).files?.[0];
-        if (!file) return resolve(undefined);
-        const reader = new FileReader();
-        reader.onload = e => {
-            try {
-                const text = e.target?.result;
-                if (typeof text === 'string') resolve(JSON.parse(text) as Prefab);
-            } catch (err) {
-                console.error('Error parsing prefab JSON:', err);
-                resolve(undefined);
-            }
-        };
-        reader.readAsText(file);
-    };
-    input.click();
+    </EditorContext.Provider>
 });
 
+PrefabEditor.displayName = "PrefabEditor";
+
 export default PrefabEditor;