react-three-game 0.0.35 → 0.0.37

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

@@ -19,6 +19,7 @@ export declare function GameInstanceProvider({ children, models, onSelect, regis
     selectedId?: string | null;
     editMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function useInstanceCheck(id: string): boolean;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
     modelUrl: string;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -50,6 +50,9 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             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(() => {
@@ -97,7 +100,8 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             removeInstance,
             instances,
             meshes: flatMeshes,
-            modelParts
+            modelParts,
+            hasInstance
         }, children: [children, Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType === 'none')
                     return null;
@@ -105,7 +109,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0)
                     return null;
-                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes }, key));
+                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;
@@ -123,8 +127,9 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             })] }));
 }
 // Render physics-enabled instances using InstancedRigidBodies
-function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
+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,
@@ -151,14 +156,47 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
             });
             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';
-    return (_jsx(InstancedRigidBodies, { instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+    // 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 }, i));
-        }) }));
+            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 }) {
@@ -184,6 +222,12 @@ function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef
             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);
@@ -196,7 +240,7 @@ export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation
         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/dist/tools/prefabeditor/PrefabEditor.js

@@ -97,7 +97,7 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
             lastDataRef.current = JSON.stringify(prefab);
         }
     });
-    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, 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, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath, onSave: () => saveJson(loadedPrefab, "prefab"), onLoad: handleLoad, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
+    return _jsxs(_Fragment, { 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, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, 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, 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, filename) => {
     const a = document.createElement('a');

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

@@ -1,4 +1,5 @@
 import { Group, Matrix4, Object3D, Texture } from "three";
+import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
@@ -6,6 +7,7 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     transformMode?: "translate" | "rotate" | "scale";
     basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
@@ -14,6 +16,7 @@ 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>;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -15,7 +15,7 @@ import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, V
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
-import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { updateNode } from "./utils";
 /* -------------------------------------------------- */
 /* Setup */
@@ -25,7 +25,7 @@ const IDENTITY = new Matrix4();
 /* -------------------------------------------------- */
 /* PrefabRoot */
 /* -------------------------------------------------- */
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, transformMode, basePath = "" }, ref) => {
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const loading = useRef(new Set());
@@ -36,6 +36,19 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         if (id === selectedId)
             setSelectedObject(obj);
     }, [selectedId]);
+    // Suppress TransformControls scene graph warnings during transitions
+    useEffect(() => {
+        const originalError = console.error;
+        console.error = (...args) => {
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) {
+                return; // Suppress this specific error
+            }
+            originalError.apply(console, args);
+        };
+        return () => {
+            console.error = originalError;
+        };
+    }, []);
     useEffect(() => {
         var _a;
         setSelectedObject(selectedId ? (_a = objectRefs.current[selectedId]) !== null && _a !== void 0 ? _a : null : null);
@@ -93,7 +106,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         });
     }, [data, models, textures]);
     /* ---------------- Render ---------------- */
-    return (_jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] }))] }));
+    return (_jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] }))] }));
 });
 /* -------------------------------------------------- */
 /* Renderer Switch */
@@ -103,9 +116,26 @@ export function GameObjectRenderer(props) {
     const node = props.gameObject;
     if (!node || node.hidden || node.disabled)
         return null;
-    return ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced)
-        ? _jsx(InstancedNode, Object.assign({}, props))
-        : _jsx(StandardNode, Object.assign({}, props));
+    const isInstanced = (_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced;
+    const prevInstancedRef = useRef(undefined);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    useEffect(() => {
+        // Detect instanced mode change
+        if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
+            setIsTransitioning(true);
+            // Wait for cleanup, then allow new mode to render
+            const timer = setTimeout(() => setIsTransitioning(false), 100);
+            return () => clearTimeout(timer);
+        }
+        prevInstancedRef.current = isInstanced;
+    }, [isInstanced]);
+    // Don't render during transition to avoid physics conflicts
+    if (isTransitioning)
+        return null;
+    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    return isInstanced
+        ? _jsx(InstancedNode, Object.assign({}, props), key)
+        : _jsx(StandardNode, Object.assign({}, props), key);
 }
 /* -------------------------------------------------- */
 /* InstancedNode (terminal) */
@@ -113,24 +143,50 @@ export function GameObjectRenderer(props) {
 function isPhysicsProps(v) {
     return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
 }
-function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position, rotation, scale } = decompose(world);
+    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    // Get local transform for proxy group (used by transform controls)
+    const localTransform = getNodeTransformProps(gameObject);
     const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
         ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
         : undefined;
-    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename, position: position, rotation: rotation, scale: scale, physics: editMode ? undefined : physicsProps }));
+    const groupRef = useRef(null);
+    const clickValid = useRef(false);
+    useEffect(() => {
+        if (editMode) {
+            registerRef(gameObject.id, groupRef.current);
+            return () => registerRef(gameObject.id, null);
+        }
+    }, [gameObject.id, registerRef, editMode]);
+    const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
+    // In edit mode, create a proxy group at the same position for transform controls
+    // The GameInstance still needs the actual position so it renders correctly
+    if (editMode) {
+        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.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(gameObject.id);
+                            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+                        }
+                        clickValid.current = false;
+                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps })] }));
+    }
+    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
 }
 /* -------------------------------------------------- */
 /* StandardNode */
 /* -------------------------------------------------- */
-function StandardNode({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
-    var _a, _b, _c;
+function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+    var _a, _b, _c, _d, _e, _f;
     const groupRef = useRef(null);
+    const helperRef = useRef(null);
     const clickValid = useRef(false);
     const isSelected = selectedId === gameObject.id;
-    const helperRef = groupRef;
+    // Check if this object still exists as an instance (to prevent physics overlap)
+    const stillInstanced = useInstanceCheck(gameObject.id);
+    // Use helperRef for BoxHelper (shows actual content bounds at correct position)
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     useEffect(() => {
         registerRef(gameObject.id, groupRef.current);
@@ -145,20 +201,29 @@ function StandardNode({ gameObject, selectedId, onSelect, registerRef, loadedMod
         if (clickValid.current) {
             e.stopPropagation();
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
         }
         clickValid.current = false;
     };
-    const inner = (_jsxs("group", Object.assign({ ref: groupRef }, getNodeTransformProps(gameObject), { onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => (_jsx(GameObjectRenderer, { child, gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] })));
-    const physics = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.physics;
-    const ready = !((_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) ||
+    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
+    const ready = !((_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) ||
         loadedModels[gameObject.components.model.properties.filename];
-    if (physics && !editMode && ready) {
-        const def = getComponent("Physics");
-        return (def === null || def === void 0 ? void 0 : def.View)
-            ? _jsx(def.View, { properties: physics.properties, children: inner })
-            : inner;
+    const hasPhysics = physics && ready && !stillInstanced;
+    const transform = getNodeTransformProps(gameObject);
+    // Prepare physics wrapper if needed
+    const physicsDef = hasPhysics ? getComponent("Physics") : null;
+    const isInstanced = (_e = (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.instanced;
+    const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { child, gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
+    // In edit mode, use proxy group pattern
+    if (editMode) {
+        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey)) : null] }));
+    }
+    // In play mode, apply transform directly to content
+    if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
+        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey));
     }
-    return inner;
+    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
 }
 function walk(node, fn) {
     var _a;

package/dist/tools/prefabeditor/components/PhysicsComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
 import { Label } from "./Input";
 function PhysicsComponentEditor({ component, onUpdate }) {
@@ -15,13 +15,14 @@ function PhysicsComponentEditor({ component, onUpdate }) {
     };
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Collider" }), _jsxs("select", { style: selectStyle, value: collider, onChange: e => onUpdate({ collider: e.target.value }), children: [_jsx("option", { value: "hull", children: "Hull (convex)" }), _jsx("option", { value: "trimesh", children: "Trimesh (exact)" }), _jsx("option", { value: "cuboid", children: "Cuboid (box)" }), _jsx("option", { value: "ball", children: "Ball (sphere)" })] })] })] }));
 }
-function PhysicsComponentView({ properties, editMode, children }) {
-    if (editMode)
-        return _jsx(_Fragment, { children: children });
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }) {
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
-    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
-    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
-    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, children: children }, rbKey));
+    // In edit mode, include position/rotation in key to force remount when transform changes
+    // This ensures the RigidBody debug visualization updates even when physics is paused
+    const rbKey = editMode
+        ? `${properties.type || 'dynamic'}_${colliders}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${properties.type || 'dynamic'}_${colliders}`;
+    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, position: position, rotation: rotation, scale: scale, children: children }, rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',

package/package.json

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

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

@@ -97,7 +97,7 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: {
 
     return <>
         <GameCanvas>
-            <Physics paused={editMode}>
+            <Physics debug={editMode} paused={editMode}>
                 <ambientLight intensity={1.5} />
                 <gridHelper args={[10, 10]} position={[0, -1, 0]} />
                 <PrefabRoot

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -9,7 +9,7 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
-import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
 
@@ -31,9 +31,10 @@ export const PrefabRoot = forwardRef<Group, {
     onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     transformMode?: "translate" | "rotate" | "scale";
     basePath?: string;
-}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, transformMode, basePath = "" }, ref) => {
 
     const [models, setModels] = useState<Record<string, Object3D>>({});
     const [textures, setTextures] = useState<Record<string, Texture>>({});
@@ -46,6 +47,20 @@ export const PrefabRoot = forwardRef<Group, {
         if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
+    // Suppress TransformControls scene graph warnings during transitions
+    useEffect(() => {
+        const originalError = console.error;
+        console.error = (...args: any[]) => {
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) {
+                return; // Suppress this specific error
+            }
+            originalError.apply(console, args);
+        };
+        return () => {
+            console.error = originalError;
+        };
+    }, []);
+
     useEffect(() => {
         setSelectedObject(selectedId ? objectRefs.current[selectedId] ?? null : null);
     }, [selectedId]);
@@ -134,6 +149,7 @@ export const PrefabRoot = forwardRef<Group, {
                     gameObject={data.root}
                     selectedId={selectedId}
                     onSelect={editMode ? onSelect : undefined}
+                    onClick={onClick}
                     registerRef={registerRef}
                     loadedModels={models}
                     loadedTextures={textures}
@@ -166,9 +182,29 @@ export const PrefabRoot = forwardRef<Group, {
 export function GameObjectRenderer(props: RendererProps) {
     const node = props.gameObject;
     if (!node || node.hidden || node.disabled) return null;
-    return node.components?.model?.properties?.instanced
-        ? <InstancedNode {...props} />
-        : <StandardNode {...props} />;
+
+    const isInstanced = node.components?.model?.properties?.instanced;
+    const prevInstancedRef = useRef<boolean | undefined>(undefined);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+
+    useEffect(() => {
+        // Detect instanced mode change
+        if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
+            setIsTransitioning(true);
+            // Wait for cleanup, then allow new mode to render
+            const timer = setTimeout(() => setIsTransitioning(false), 100);
+            return () => clearTimeout(timer);
+        }
+        prevInstancedRef.current = isInstanced;
+    }, [isInstanced]);
+
+    // Don't render during transition to avoid physics conflicts
+    if (isTransitioning) return null;
+
+    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    return isInstanced
+        ? <InstancedNode key={key} {...props} />
+        : <StandardNode key={key} {...props} />;
 }
 
 /* -------------------------------------------------- */
@@ -178,23 +214,79 @@ function isPhysicsProps(v: any): v is PhysicsProps {
     return v?.type === "fixed" || v?.type === "dynamic";
 }
 
-function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode }: RendererProps) {
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }: RendererProps) {
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position, rotation, scale } = decompose(world);
+    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+
+    // Get local transform for proxy group (used by transform controls)
+    const localTransform = getNodeTransformProps(gameObject);
+
     const physicsProps = isPhysicsProps(
         gameObject.components?.physics?.properties
     )
         ? gameObject.components?.physics?.properties
         : undefined;
 
+    const groupRef = useRef<Group>(null);
+    const clickValid = useRef(false);
+
+    useEffect(() => {
+        if (editMode) {
+            registerRef(gameObject.id, groupRef.current);
+            return () => registerRef(gameObject.id, null);
+        }
+    }, [gameObject.id, registerRef, editMode]);
+
+    const modelUrl = gameObject.components?.model?.properties?.filename;
+
+    // In edit mode, create a proxy group at the same position for transform controls
+    // The GameInstance still needs the actual position so it renders correctly
+    if (editMode) {
+        return (
+            <>
+                {/* Proxy group for transform controls - uses LOCAL transform */}
+                <group
+                    ref={groupRef}
+                    position={localTransform.position}
+                    rotation={localTransform.rotation}
+                    scale={localTransform.scale}
+                    onPointerDown={(e) => { e.stopPropagation(); clickValid.current = true; }}
+                    onPointerMove={() => { clickValid.current = false; }}
+                    onPointerUp={(e) => {
+                        if (clickValid.current) {
+                            e.stopPropagation();
+                            onSelect?.(gameObject.id);
+                            onClick?.(e, gameObject);
+                        }
+                        clickValid.current = false;
+                    }}
+                >
+                    {/* Tiny invisible mesh for raycasting/selection */}
+                    <mesh visible={false}>
+                        <boxGeometry args={[0.01, 0.01, 0.01]} />
+                    </mesh>
+                </group>
+                {/* Actual instance rendered by provider - uses WORLD transform */}
+                <GameInstance
+                    id={gameObject.id}
+                    modelUrl={modelUrl}
+                    position={worldPosition}
+                    rotation={worldRotation}
+                    scale={worldScale}
+                    physics={physicsProps}
+                />
+            </>
+        );
+    }
+
     return (
         <GameInstance
             id={gameObject.id}
             modelUrl={gameObject.components?.model?.properties?.filename}
-            position={position}
-            rotation={rotation}
-            scale={scale}
-            physics={editMode ? undefined : physicsProps}
+            position={worldPosition}
+            rotation={worldRotation}
+            scale={worldScale}
+            physics={physicsProps}
         />
     );
 }
@@ -207,6 +299,7 @@ function StandardNode({
     gameObject,
     selectedId,
     onSelect,
+    onClick,
     registerRef,
     loadedModels,
     loadedTextures,
@@ -215,12 +308,16 @@ function StandardNode({
 }: RendererProps) {
 
     const groupRef = useRef<Object3D | null>(null);
+    const helperRef = useRef<Object3D | null>(null);
     const clickValid = useRef(false);
     const isSelected = selectedId === gameObject.id;
-    const helperRef = groupRef as React.RefObject<Object3D>;
 
+    // Check if this object still exists as an instance (to prevent physics overlap)
+    const stillInstanced = useInstanceCheck(gameObject.id);
+
+    // Use helperRef for BoxHelper (shows actual content bounds at correct position)
     useHelper(
-        editMode && isSelected ? helperRef : null,
+        editMode && isSelected ? helperRef as React.RefObject<Object3D> : null,
         BoxHelper,
         "cyan"
     );
@@ -241,17 +338,27 @@ function StandardNode({
         if (clickValid.current) {
             e.stopPropagation();
             onSelect?.(gameObject.id);
+            onClick?.(e, gameObject);
         }
         clickValid.current = false;
     };
 
+    const physics = gameObject.components?.physics;
+    const ready = !gameObject.components?.model ||
+        loadedModels[gameObject.components.model.properties.filename];
+    const hasPhysics = physics && ready && !stillInstanced;
+    const transform = getNodeTransformProps(gameObject);
+
+    // Prepare physics wrapper if needed
+    const physicsDef = hasPhysics ? getComponent("Physics") : null;
+    const isInstanced = gameObject.components?.model?.properties?.instanced;
+    const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
+
     const inner = (
         <group
-            ref={groupRef}
-            {...getNodeTransformProps(gameObject)}
-            onPointerDown={onDown}
-            onPointerMove={() => (clickValid.current = false)}
-            onPointerUp={onUp}
+            onPointerDown={editMode ? onDown : undefined}
+            onPointerMove={editMode ? () => (clickValid.current = false) : undefined}
+            onPointerUp={editMode ? onUp : undefined}
         >
             {renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix)}
             {gameObject.children?.map(child => (
@@ -261,6 +368,7 @@ function StandardNode({
                     gameObject={child}
                     selectedId={selectedId}
                     onSelect={onSelect}
+                    onClick={onClick}
                     registerRef={registerRef}
                     loadedModels={loadedModels}
                     loadedTextures={loadedTextures}
@@ -271,18 +379,73 @@ function StandardNode({
         </group>
     );
 
-    const physics = gameObject.components?.physics;
-    const ready = !gameObject.components?.model ||
-        loadedModels[gameObject.components.model.properties.filename];
+    // In edit mode, use proxy group pattern
+    if (editMode) {
+        return (
+            <>
+                {/* Proxy group for transform controls - uses LOCAL transform */}
+                <group
+                    ref={groupRef}
+                    position={transform.position}
+                    rotation={transform.rotation}
+                    scale={transform.scale}
+                >
+                    {/* Tiny invisible mesh for raycasting/selection */}
+                    <mesh visible={false}>
+                        <boxGeometry args={[0.01, 0.01, 0.01]} />
+                    </mesh>
+                </group>
+                {/* Helper group for BoxHelper - same transform as proxy, contains actual geometry */}
+                <group
+                    ref={helperRef}
+                    position={transform.position}
+                    rotation={transform.rotation}
+                    scale={transform.scale}
+                >
+                    {inner}
+                </group>
+                {/* Actual content with physics wrapper if needed */}
+                {hasPhysics && physicsDef?.View ? (
+                    <physicsDef.View
+                        key={physicsKey}
+                        properties={physics.properties}
+                        position={transform.position}
+                        rotation={transform.rotation}
+                        scale={transform.scale}
+                        editMode={editMode}
+                    >{inner}</physicsDef.View>
+                ) : null}
+            </>
+        );
+    }
 
-    if (physics && !editMode && ready) {
-        const def = getComponent("Physics");
-        return def?.View
-            ? <def.View properties={physics.properties}>{inner}</def.View>
-            : inner;
+    // In play mode, apply transform directly to content
+    if (hasPhysics && physicsDef?.View) {
+        return (
+            <physicsDef.View
+                key={physicsKey}
+                properties={physics.properties}
+                position={transform.position}
+                rotation={transform.rotation}
+                scale={transform.scale}
+                editMode={editMode}
+            >{inner}</physicsDef.View>
+        );
     }
 
-    return inner;
+    return (
+        <group
+            ref={groupRef}
+            position={transform.position}
+            rotation={transform.rotation}
+            scale={transform.scale}
+            onPointerDown={onDown}
+            onPointerMove={() => (clickValid.current = false)}
+            onPointerUp={onUp}
+        >
+            {inner}
+        </group>
+    );
 }
 
 /* -------------------------------------------------- */
@@ -293,6 +456,7 @@ interface RendererProps {
     gameObject: GameObjectType; // ← no longer optional
     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>;

package/src/tools/prefabeditor/components/PhysicsComponent.tsx

@@ -1,7 +1,9 @@
-import { RigidBody } from "@react-three/rapier";
+import { RigidBody, RapierRigidBody } from "@react-three/rapier";
 import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
 import { Component } from "./ComponentRegistry";
 import { Label } from "./Input";
+import { Quaternion, Euler } from 'three';
 
 export interface PhysicsProps {
     type: "fixed" | "dynamic";
@@ -52,18 +54,29 @@ interface PhysicsViewProps {
     properties: { type?: 'dynamic' | 'fixed'; collider?: string };
     editMode?: boolean;
     children?: ReactNode;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+    scale?: [number, number, number];
 }
 
-function PhysicsComponentView({ properties, editMode, children }: PhysicsViewProps) {
-    if (editMode) return <>{children}</>;
-
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }: PhysicsViewProps) {
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
-    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
-    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
+    // In edit mode, include position/rotation in key to force remount when transform changes
+    // This ensures the RigidBody debug visualization updates even when physics is paused
+    const rbKey = editMode
+        ? `${properties.type || 'dynamic'}_${colliders}_${position?.join(',')}_${rotation?.join(',')}`
+        : `${properties.type || 'dynamic'}_${colliders}`;
 
     return (
-        <RigidBody key={rbKey} type={properties.type} colliders={colliders as any}>
+        <RigidBody
+            key={rbKey}
+            type={properties.type}
+            colliders={colliders as any}
+            position={position}
+            rotation={rotation}
+            scale={scale}
+        >
             {children}
         </RigidBody>
     );