react-three-game 0.0.41 → 0.0.44

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { Merged, useHelper } from '@react-three/drei';
+import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4, Vector3, Quaternion, Euler, BoxHelper } from "three";
+// Helper functions for comparison
+function arrayEquals(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+function instanceEquals(a, b) {
+    var _a, _b;
+    return a.id === b.id &&
+        a.meshPath === b.meshPath &&
+        arrayEquals(a.position, b.position) &&
+        arrayEquals(a.rotation, b.rotation) &&
+        arrayEquals(a.scale, b.scale) &&
+        ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type);
+}
+const GameInstanceContext = createContext(null);
+export function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }) {
+    const [instances, setInstances] = useState([]);
+    const addInstance = useCallback((instance) => {
+        setInstances(prev => {
+            const idx = prev.findIndex(i => i.id === instance.id);
+            if (idx !== -1) {
+                // Update existing if changed
+                if (instanceEquals(prev[idx], instance)) {
+                    return prev;
+                }
+                const copy = [...prev];
+                copy[idx] = instance;
+                return copy;
+            }
+            // Add new
+            return [...prev, instance];
+        });
+    }, []);
+    const removeInstance = useCallback((id) => {
+        setInstances(prev => {
+            if (!prev.find(i => i.id === id))
+                return prev;
+            return prev.filter(i => i.id !== id);
+        });
+    }, []);
+    const hasInstance = useCallback((id) => {
+        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(() => {
+        const flatMeshes = {};
+        const modelParts = {};
+        Object.entries(models).forEach(([modelKey, model]) => {
+            model.updateWorldMatrix(false, true);
+            const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
+            let partIndex = 0;
+            model.traverse((obj) => {
+                if (obj.isMesh) {
+                    // Clone geometry and bake relative transform
+                    const geom = obj.geometry.clone();
+                    geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
+                    const partKey = `${modelKey}__${partIndex}`;
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
+                    partIndex++;
+                }
+            });
+            modelParts[modelKey] = partIndex;
+        });
+        return { flatMeshes, modelParts };
+    }, [models]);
+    // Cleanup geometries when models change
+    useEffect(() => {
+        return () => {
+            Object.values(flatMeshes).forEach(mesh => mesh.geometry.dispose());
+        };
+    }, [flatMeshes]);
+    // Group instances by meshPath + physics type for batch rendering
+    const grouped = useMemo(() => {
+        var _a;
+        const groups = {};
+        for (const inst of instances) {
+            const type = ((_a = inst.physics) === null || _a === void 0 ? void 0 : _a.type) || 'none';
+            const key = `${inst.meshPath}__${type}`;
+            if (!groups[key])
+                groups[key] = { physicsType: type, instances: [] };
+            groups[key].instances.push(inst);
+        }
+        return groups;
+    }, [instances]);
+    return (_jsxs(GameInstanceContext.Provider, { value: {
+            addInstance,
+            removeInstance,
+            instances,
+            meshes: flatMeshes,
+            modelParts,
+            hasInstance
+        }, children: [children, Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType === 'none')
+                    return null;
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0)
+                    return null;
+                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes, onSelect: onSelect, editMode: editMode }, key));
+            }), Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType !== 'none')
+                    return null;
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0)
+                    return null;
+                // Create mesh subset for this specific model
+                const meshesForModel = {};
+                for (let i = 0; i < partCount; i++) {
+                    const partKey = `${modelKey}__${i}`;
+                    meshesForModel[partKey] = flatMeshes[partKey];
+                }
+                return (_jsx(Merged, { meshes: meshesForModel, castShadow: true, receiveShadow: true, children: (instancesMap) => (_jsx(NonPhysicsInstancedGroup, { modelKey: modelKey, group: group, partCount: partCount, instancesMap: instancesMap, onSelect: onSelect, registerRef: registerRef, selectedId: selectedId, editMode: editMode })) }, key));
+            })] }));
+}
+// Render physics-enabled instances using InstancedRigidBodies
+function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect, editMode }) {
+    const meshRefs = useRef([]);
+    const rigidBodiesRef = useRef(null);
+    const instances = useMemo(() => group.instances.map(inst => ({
+        key: inst.id,
+        position: inst.position,
+        rotation: inst.rotation,
+        scale: inst.scale,
+    })), [group.instances]);
+    // Apply scale to visual meshes (InstancedRigidBodies only scales colliders, not visuals)
+    useEffect(() => {
+        const matrix = new Matrix4();
+        const pos = new Vector3();
+        const quat = new Quaternion();
+        const euler = new Euler();
+        const scl = new Vector3();
+        meshRefs.current.forEach(mesh => {
+            if (!mesh)
+                return;
+            group.instances.forEach((inst, i) => {
+                pos.set(...inst.position);
+                euler.set(...inst.rotation);
+                quat.setFromEuler(euler);
+                scl.set(...inst.scale);
+                matrix.compose(pos, quat, scl);
+                mesh.setMatrixAt(i, matrix);
+            });
+            mesh.instanceMatrix.needsUpdate = true;
+        });
+        // Update rigid body positions when instances change
+        if (rigidBodiesRef.current) {
+            try {
+                group.instances.forEach((inst, i) => {
+                    var _a;
+                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a.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) => {
+        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 (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+            const mesh = flatMeshes[`${modelKey}__${i}`];
+            if (!mesh)
+                return null;
+            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: editMode ? handleClick : undefined }, i));
+        }) }, rigidBodyKey));
+}
+// Render non-physics instances using Merged (instancing without rigid bodies)
+function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef, selectedId, editMode }) {
+    // Pre-compute which Instance components exist for this model
+    const InstanceComponents = useMemo(() => Array.from({ length: partCount }, (_, i) => instancesMap[`${modelKey}__${i}`]).filter(Boolean), [instancesMap, modelKey, partCount]);
+    return (_jsx(_Fragment, { children: group.instances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, InstanceComponents: InstanceComponents, onSelect: onSelect, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
+}
+// Individual instance item with its own click state
+function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef, selectedId, editMode }) {
+    const clickValid = useRef(false);
+    const groupRef = useRef(null);
+    const isSelected = selectedId === instance.id;
+    // Use BoxHelper when object is selected in edit mode
+    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+    useEffect(() => {
+        registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, groupRef.current);
+    }, [instance.id, registerRef]);
+    return (_jsx("group", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+            if (clickValid.current) {
+                e.stopPropagation();
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.id);
+            }
+            clickValid.current = false;
+        }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
+}
+// Hook to check if an instance exists
+export function useInstanceCheck(id) {
+    var _a;
+    const ctx = useContext(GameInstanceContext);
+    return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.hasInstance(id)) !== null && _a !== void 0 ? _a : false;
+}
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
+export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+    const ctx = useContext(GameInstanceContext);
+    const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
+    const removeInstance = ctx === null || ctx === void 0 ? void 0 : ctx.removeInstance;
+    const instance = useMemo(() => ({
+        id,
+        meshPath: modelUrl,
+        position,
+        rotation,
+        scale,
+        physics,
+    }), [id, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), JSON.stringify(physics)]);
+    useEffect(() => {
+        if (!addInstance || !removeInstance)
+            return;
+        addInstance(instance);
+        return () => {
+            removeInstance(instance.id);
+        };
+    }, [addInstance, removeInstance, instance]);
+    // No visual rendering - provider handles all instanced visuals
+    return null;
+});

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

@@ -0,0 +1,16 @@
+import { Prefab } from "./types";
+import { PrefabRootRef } from "./PrefabRoot";
+export interface PrefabEditorRef {
+    screenshot: () => void;
+    exportGLB: () => void;
+    prefab: Prefab;
+    setPrefab: (prefab: Prefab) => void;
+    rootRef: React.RefObject<PrefabRootRef | null>;
+}
+declare const PrefabEditor: import("react").ForwardRefExoticComponent<{
+    basePath?: string;
+    initialPrefab?: Prefab;
+    onPrefabChange?: (prefab: Prefab) => void;
+    children?: React.ReactNode;
+} & import("react").RefAttributes<PrefabEditorRef>>;
+export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import GameCanvas from "../../shared/GameCanvas";
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import PrefabRoot 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";
+const DEFAULT_PREFAB = {
+    id: "prefab-default",
+    name: "New Prefab",
+    root: {
+        id: "root",
+        components: {
+            transform: {
+                type: "Transform",
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            }
+        }
+    }
+};
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, children }, ref) => {
+    const [editMode, setEditMode] = useState(true);
+    const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
+    const [selectedId, setSelectedId] = useState(null);
+    const [transformMode, setTransformMode] = useState("translate");
+    const [snapResolution, setSnapResolution] = useState(0);
+    const [history, setHistory] = useState([loadedPrefab]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const throttleRef = useRef(null);
+    const lastDataRef = useRef(JSON.stringify(loadedPrefab));
+    const prefabRootRef = useRef(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        if (initialPrefab)
+            setLoadedPrefab(initialPrefab);
+    }, [initialPrefab]);
+    const updatePrefab = (newPrefab) => {
+        setLoadedPrefab(newPrefab);
+        const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
+        onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
+    };
+    const applyHistory = (index) => {
+        setHistoryIndex(index);
+        lastDataRef.current = JSON.stringify(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);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!(e.ctrlKey || e.metaKey))
+                return;
+            if (e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                undo();
+            }
+            else if ((e.shiftKey && e.key === 'z') || e.key === 'y') {
+                e.preventDefault();
+                redo();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [historyIndex, history]);
+    useEffect(() => {
+        const currentStr = JSON.stringify(loadedPrefab);
+        if (currentStr === lastDataRef.current)
+            return;
+        if (throttleRef.current)
+            clearTimeout(throttleRef.current);
+        throttleRef.current = setTimeout(() => {
+            lastDataRef.current = currentStr;
+            setHistory(prev => {
+                const newHistory = [...prev.slice(0, historyIndex + 1), loadedPrefab];
+                return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
+            });
+            setHistoryIndex(prev => Math.min(prev + 1, 49));
+        }, 500);
+        return () => { if (throttleRef.current)
+            clearTimeout(throttleRef.current); };
+    }, [loadedPrefab]);
+    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 = () => {
+        var _a;
+        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 });
+    };
+    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 _jsxs(EditorContext.Provider, { value: {
+            transformMode,
+            setTransformMode,
+            snapResolution,
+            setSnapResolution,
+            onScreenshot: handleScreenshot,
+            onExportGLB: handleExportGLB
+        }, children: [_jsx(GameCanvas, { children: _jsxs(Physics, { debug: editMode, paused: editMode, 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] }) }), _jsx("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _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/PrefabRoot.d.ts

@@ -0,0 +1,28 @@
+import { Group, Matrix4, Object3D, Texture } from "three";
+import { ThreeEvent } from "@react-three/fiber";
+import { Prefab, GameObject as GameObjectType } from "./types";
+export interface PrefabRootRef {
+    root: Group | null;
+}
+export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
+    editMode?: boolean;
+    data: Prefab;
+    onPrefabChange?: (data: Prefab) => void;
+    selectedId?: string | null;
+    onSelect?: (id: string | null) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    basePath?: string;
+} & import("react").RefAttributes<PrefabRootRef>>;
+export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
+interface RendererProps {
+    gameObject: GameObjectType;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    registerRef: (id: string, obj: Object3D | null) => void;
+    loadedModels: Record<string, Object3D>;
+    loadedTextures: Record<string, Texture>;
+    editMode?: boolean;
+    parentMatrix?: Matrix4;
+}
+export default PrefabRoot;