react-three-game 0.0.36 → 0.0.38

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}

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -40,6 +40,7 @@ type GameInstanceContextType = {
     instances: InstanceData[];
     meshes: Record<string, Mesh>;
     modelParts?: Record<string, number>;
+    hasInstance: (id: string) => boolean;
 };
 const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
 
@@ -84,6 +85,10 @@ export function GameInstanceProvider({
         });
     }, []);
 
+    const hasInstance = useCallback((id: string) => {
+        return instances.some(i => i.id === id);
+    }, [instances]);
+
     // Flatten all model meshes once (models → flat mesh parts)
     // Note: Geometry is cloned with baked transforms for instancing
     const { flatMeshes, modelParts } = useMemo(() => {
@@ -138,7 +143,8 @@ export function GameInstanceProvider({
                 removeInstance,
                 instances,
                 meshes: flatMeshes,
-                modelParts
+                modelParts,
+                hasInstance
             }}
         >
             {/* Render normal prefab hierarchy (non-instanced objects) */}
@@ -158,6 +164,8 @@ export function GameInstanceProvider({
                         modelKey={modelKey}
                         partCount={partCount}
                         flatMeshes={flatMeshes}
+                        onSelect={onSelect}
+                        editMode={editMode}
                     />
                 );
             })}
@@ -208,14 +216,19 @@ function InstancedRigidGroup({
     group,
     modelKey,
     partCount,
-    flatMeshes
+    flatMeshes,
+    onSelect,
+    editMode
 }: {
     group: { physicsType: string, instances: InstanceData[] },
     modelKey: string,
     partCount: number,
-    flatMeshes: Record<string, Mesh>
+    flatMeshes: Record<string, Mesh>,
+    onSelect?: (id: string | null) => void,
+    editMode?: boolean
 }) {
     const meshRefs = useRef<(InstancedMesh | null)[]>([]);
+    const rigidBodiesRef = useRef<any>(null);
 
     const instances = useMemo(
         () => group.instances.map(inst => ({
@@ -248,12 +261,48 @@ function InstancedRigidGroup({
             });
             mesh.instanceMatrix.needsUpdate = true;
         });
+
+        // Update rigid body positions when instances change
+        if (rigidBodiesRef.current) {
+            try {
+                group.instances.forEach((inst, i) => {
+                    const body = rigidBodiesRef.current?.at(i);
+                    if (body && body.setTranslation && body.setRotation) {
+                        pos.set(...inst.position);
+                        euler.set(...inst.rotation);
+                        quat.setFromEuler(euler);
+                        body.setTranslation(pos, false);
+                        body.setRotation(quat, false);
+                    }
+                });
+            } catch (error) {
+                // Ignore errors when switching between instanced/non-instanced states
+                console.warn('Failed to update rigidbody positions:', error);
+            }
+        }
     }, [group.instances]);
 
     const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
 
+    // Handle click on instanced mesh in edit mode
+    const handleClick = (e: any) => {
+        if (!editMode || !onSelect) return;
+        e.stopPropagation();
+
+        // Get the instance index from the intersection
+        const instanceId = e.instanceId;
+        if (instanceId !== undefined && group.instances[instanceId]) {
+            onSelect(group.instances[instanceId].id);
+        }
+    };
+
+    // Add key to force remount when instance count changes significantly (helps with cleanup)
+    const rigidBodyKey = `rb_${modelKey}_${group.physicsType}_${group.instances.length}`;
+
     return (
         <InstancedRigidBodies
+            key={rigidBodyKey}
+            ref={rigidBodiesRef}
             instances={instances}
             colliders={colliders}
             type={group.physicsType as 'dynamic' | 'fixed'}
@@ -269,6 +318,7 @@ function InstancedRigidGroup({
                         castShadow
                         receiveShadow
                         frustumCulled={false}
+                        onClick={editMode ? handleClick : undefined}
                     />
                 );
             })}
@@ -368,6 +418,12 @@ function InstanceGroupItem({
 }
 
 
+// Hook to check if an instance exists
+export function useInstanceCheck(id: string): boolean {
+    const ctx = useContext(GameInstanceContext);
+    return ctx?.hasInstance(id) ?? false;
+}
+
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef<Group, {
     id: string;
@@ -395,7 +451,7 @@ export const GameInstance = React.forwardRef<Group, {
         rotation,
         scale,
         physics,
-    }), [id, modelUrl, position, rotation, scale, physics]);
+    }), [id, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), JSON.stringify(physics)]);
 
     useEffect(() => {
         if (!addInstance || !removeInstance) return;

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 paused={editMode}>
+            <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;