react-three-game 0.0.21 → 0.0.22

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -51,19 +51,19 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         });
     }, []);
     // 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]) => {
-            const root = model;
-            root.updateWorldMatrix(false, true);
-            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
+            model.updateWorldMatrix(false, true);
+            const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
             let partIndex = 0;
-            root.traverse((obj) => {
+            model.traverse((obj) => {
                 if (obj.isMesh) {
+                    // Clone geometry and bake relative transform
                     const geom = obj.geometry.clone();
-                    const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
-                    geom.applyMatrix4(relativeTransform);
+                    geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
                     const partKey = `${modelKey}__${partIndex}`;
                     flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
@@ -73,6 +73,12 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         });
         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;
@@ -124,35 +130,30 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
         rotation: inst.rotation,
         scale: inst.scale,
     })), [group.instances]);
-    return (_jsx(InstancedRigidBodies, { instances: instances, colliders: group.physicsType === 'fixed' ? 'trimesh' : 'hull', type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+    const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
+    return (_jsx(InstancedRigidBodies, { 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", { args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
         }) }));
 }
 // Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef }) {
+    // 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 }, inst.id))) }));
+}
+// Individual instance item with its own click state
+function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef }) {
     const clickValid = useRef(false);
-    const handlePointerDown = (e) => {
-        e.stopPropagation();
-        clickValid.current = true;
-    };
-    const handlePointerMove = () => {
-        if (clickValid.current)
+    return (_jsx("group", { ref: (el) => registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, el), 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;
-    };
-    const handlePointerUp = (e, id) => {
-        if (clickValid.current) {
-            e.stopPropagation();
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(id);
-        }
-        clickValid.current = false;
-    };
-    return (_jsx(_Fragment, { children: group.instances.map(inst => (_jsx("group", { ref: (el) => { registerRef === null || registerRef === void 0 ? void 0 : registerRef(inst.id, el); }, position: inst.position, rotation: inst.rotation, scale: inst.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: (e) => handlePointerUp(e, inst.id), children: Array.from({ length: partCount }).map((_, i) => {
-                const Instance = instancesMap[`${modelKey}__${i}`];
-                if (!Instance)
-                    return null;
-                return _jsx(Instance, {}, i);
-            }) }, inst.id))) }));
+        }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
 }
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -146,26 +146,17 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
     // --- 5. Render children recursively (always relative transforms) ---
     const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
-    // --- 6. Common props for the wrapper element ---
-    const wrapperProps = {
-        position: transformProps.position,
-        rotation: transformProps.rotation,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-    };
-    // --- 7. Check if physics is needed ---
+    // --- 6. Inner content group with full transform ---
+    const innerGroup = (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [core, children] }));
+    // --- 7. Wrap with physics if needed (RigidBody as outer parent, no transform) ---
     const physics = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.physics;
-    const hasPhysics = physics && !editMode;
-    // --- 8. Final structure: RigidBody outside with position/rotation, scale inside ---
-    if (hasPhysics) {
+    if (physics && !editMode) {
         const physicsDef = getComponent('Physics');
         if (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) {
-            return (_jsx(physicsDef.View, Object.assign({ properties: physics.properties, ref: (obj) => registerRef(gameObject.id, obj) }, wrapperProps, { children: _jsxs("group", { scale: transformProps.scale, children: [core, children] }) })));
+            return (_jsx(physicsDef.View, { properties: physics.properties, children: innerGroup }));
         }
     }
-    // --- 9. No physics - standard group wrapper ---
-    return (_jsxs("group", Object.assign({ ref: (el) => registerRef(gameObject.id, el), scale: transformProps.scale }, wrapperProps, { children: [core, children] })));
+    return innerGroup;
 }
 // Helper: render an instanced GameInstance (terminal node)
 function renderInstancedNode(gameObject, worldMatrix, ctx) {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import { CameraHelper, Object3D, Vector3 } from "three";
+import { useFrame } from "@react-three/fiber";
+import { Vector3 } from "three";
 function DirectionalLightComponentEditor({ component, onUpdate }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const props = {
@@ -32,60 +32,24 @@ function DirectionalLightView({ properties, editMode }) {
     const shadowCameraLeft = (_j = properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30;
     const shadowCameraRight = (_k = properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30;
     const targetOffset = (_l = properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0];
-    const { scene } = useThree();
     const directionalLightRef = useRef(null);
-    const targetRef = useRef(new Object3D());
-    const cameraHelperRef = useRef(null);
-    // Add target to scene once
+    const targetRef = useRef(null);
+    // Set up light target reference when both refs are ready
     useEffect(() => {
-        const target = targetRef.current;
-        scene.add(target);
-        return () => {
-            scene.remove(target);
-        };
-    }, [scene]);
-    // Set up light target reference once
-    useEffect(() => {
-        if (directionalLightRef.current) {
+        if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
         }
     }, []);
-    // Update target position and mark shadow for update when light moves or offset changes
+    // Update target world position based on light position + offset
     useFrame(() => {
-        if (!directionalLightRef.current)
+        if (!directionalLightRef.current || !targetRef.current)
             return;
         const lightWorldPos = new Vector3();
         directionalLightRef.current.getWorldPosition(lightWorldPos);
-        const newTargetPos = new Vector3(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
-        // Only update if position actually changed
-        if (!targetRef.current.position.equals(newTargetPos)) {
-            targetRef.current.position.copy(newTargetPos);
-            if (directionalLightRef.current.shadow) {
-                directionalLightRef.current.shadow.needsUpdate = true;
-            }
-        }
-        // Update camera helper in edit mode
-        if (editMode && cameraHelperRef.current) {
-            cameraHelperRef.current.update();
-        }
+        // Target is positioned relative to light's world position
+        targetRef.current.position.set(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
     });
-    // Create/destroy camera helper for edit mode
-    useEffect(() => {
-        var _a;
-        if (editMode && ((_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow.camera)) {
-            const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
-            cameraHelperRef.current = helper;
-            scene.add(helper);
-            return () => {
-                if (cameraHelperRef.current) {
-                    scene.remove(cameraHelperRef.current);
-                    cameraHelperRef.current.dispose();
-                    cameraHelperRef.current = null;
-                }
-            };
-        }
-    }, [editMode, scene]);
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize": [shadowMapSize, shadowMapSize], "shadow-bias": -0.001, "shadow-normalBias": 0.02, children: _jsx("orthographicCamera", { attach: "shadow-camera", near: shadowCameraNear, far: shadowCameraFar, top: shadowCameraTop, bottom: shadowCameraBottom, left: shadowCameraLeft, right: shadowCameraRight }) }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])

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

@@ -53,7 +53,7 @@ function MaterialComponentView({ properties, loadedTextures, isSelected }) {
     }
     const { color, wireframe = false } = properties;
     const displayColor = isSelected ? "cyan" : color;
-    return _jsx("meshStandardMaterial", { color: displayColor, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture, side: DoubleSide }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture');
+    return (_jsx("meshStandardMaterial", { color: displayColor, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture, side: DoubleSide }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
 }
 const MaterialComponent = {
     name: 'Material',

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer } from '../../assetviewer/page';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
     const [modelFiles, setModelFiles] = useState([]);
     useEffect(() => {
@@ -22,19 +22,23 @@ function ModelComponentView({ properties, loadedModels, children }) {
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced)
         return _jsx(_Fragment, { children: children });
-    if (loadedModels && loadedModels[properties.filename]) {
-        const clonedModel = loadedModels[properties.filename].clone();
-        // Enable shadows on all meshes in the model
-        clonedModel.traverse((obj) => {
+    const sourceModel = loadedModels === null || loadedModels === void 0 ? void 0 : loadedModels[properties.filename];
+    // Clone model once and set up shadows - memoized to avoid cloning on every render
+    const clonedModel = useMemo(() => {
+        if (!sourceModel)
+            return null;
+        const clone = sourceModel.clone();
+        clone.traverse((obj) => {
             if (obj.isMesh) {
                 obj.castShadow = true;
                 obj.receiveShadow = true;
             }
         });
-        return _jsx("primitive", { object: clonedModel, children: children });
-    }
-    // Model not loaded yet - render children only
-    return _jsx(_Fragment, { children: children });
+        return clone;
+    }, [sourceModel]);
+    if (!clonedModel)
+        return _jsx(_Fragment, { children: children });
+    return _jsx("primitive", { object: clonedModel, children: children });
 }
 const ModelComponent = {
     name: 'Model',

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
 const selectClass = "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50";
@@ -17,12 +6,11 @@ function PhysicsComponentEditor({ component, onUpdate }) {
     const { type, collider = 'hull' } = component.properties;
     return (_jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Type" }), _jsxs("select", { className: selectClass, value: type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] }), _jsx("label", { className: `${labelClass} mt-2`, children: "Collider" }), _jsxs("select", { className: selectClass, 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(_a) {
-    var { properties, editMode, children } = _a, rigidBodyProps = __rest(_a, ["properties", "editMode", "children"]);
+function PhysicsComponentView({ properties, editMode, children }) {
     if (editMode)
         return _jsx(_Fragment, { children: children });
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
-    return (_jsx(RigidBody, Object.assign({ type: properties.type, colliders: colliders }, rigidBodyProps, { children: children })));
+    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, children: children }));
 }
 const PhysicsComponent = {
     name: 'Physics',

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

@@ -27,7 +27,7 @@ function SpotLightView({ properties, editMode }) {
             spotLightRef.current.target = targetRef.current;
         }
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

package/package.json

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

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -81,22 +81,21 @@ export function GameInstanceProvider({
     }, []);
 
     // Flatten all model meshes once (models → flat mesh parts)
+    // Note: Geometry is cloned with baked transforms for instancing
     const { flatMeshes, modelParts } = useMemo(() => {
         const flatMeshes: Record<string, Mesh> = {};
         const modelParts: Record<string, number> = {};
 
         Object.entries(models).forEach(([modelKey, model]) => {
-            const root = model;
-            root.updateWorldMatrix(false, true);
-            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
+            model.updateWorldMatrix(false, true);
+            const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
 
             let partIndex = 0;
-
-            root.traverse((obj: any) => {
+            model.traverse((obj: any) => {
                 if (obj.isMesh) {
+                    // Clone geometry and bake relative transform
                     const geom = obj.geometry.clone();
-                    const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
-                    geom.applyMatrix4(relativeTransform);
+                    geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
 
                     const partKey = `${modelKey}__${partIndex}`;
                     flatMeshes[partKey] = new Mesh(geom, obj.material);
@@ -109,6 +108,13 @@ export function GameInstanceProvider({
         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(() => {
         const groups: Record<string, { physicsType: string, instances: InstanceData[] }> = {};
@@ -213,21 +219,24 @@ function InstancedRigidGroup({
         [group.instances]
     );
 
+    const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
+
     return (
         <InstancedRigidBodies
             instances={instances}
-            colliders={group.physicsType === 'fixed' ? 'trimesh' : 'hull'}
+            colliders={colliders}
             type={group.physicsType as 'dynamic' | 'fixed'}
         >
             {Array.from({ length: partCount }).map((_, i) => {
                 const mesh = flatMeshes[`${modelKey}__${i}`];
+                if (!mesh) return null;
                 return (
                     <instancedMesh
                         key={i}
                         args={[mesh.geometry, mesh.material, group.instances.length]}
                         castShadow
                         receiveShadow
-                        frustumCulled={false}
+                        frustumCulled={false} // Required: culling first instance hides all
                     />
                 );
             })}
@@ -251,49 +260,62 @@ function NonPhysicsInstancedGroup({
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
 }) {
-    const clickValid = useRef(false);
-
-    const handlePointerDown = (e: any) => {
-        e.stopPropagation();
-        clickValid.current = true;
-    };
-
-    const handlePointerMove = () => {
-        if (clickValid.current) clickValid.current = false;
-    };
-
-    const handlePointerUp = (e: any, id: string) => {
-        if (clickValid.current) {
-            e.stopPropagation();
-            onSelect?.(id);
-        }
-        clickValid.current = false;
-    };
+    // 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 (
         <>
             {group.instances.map(inst => (
-                <group
+                <InstanceGroupItem
                     key={inst.id}
-                    ref={(el) => { registerRef?.(inst.id, el as unknown as Object3D | null); }}
-                    position={inst.position}
-                    rotation={inst.rotation}
-                    scale={inst.scale}
-                    onPointerDown={handlePointerDown}
-                    onPointerMove={handlePointerMove}
-                    onPointerUp={(e) => handlePointerUp(e, inst.id)}
-                >
-                    {Array.from({ length: partCount }).map((_, i) => {
-                        const Instance = instancesMap[`${modelKey}__${i}`];
-                        if (!Instance) return null;
-                        return <Instance key={i} />;
-                    })}
-                </group>
+                    instance={inst}
+                    InstanceComponents={InstanceComponents}
+                    onSelect={onSelect}
+                    registerRef={registerRef}
+                />
             ))}
         </>
     );
 }
 
+// Individual instance item with its own click state
+function InstanceGroupItem({
+    instance,
+    InstanceComponents,
+    onSelect,
+    registerRef
+}: {
+    instance: InstanceData;
+    InstanceComponents: React.ComponentType<any>[];
+    onSelect?: (id: string | null) => void;
+    registerRef?: (id: string, obj: Object3D | null) => void;
+}) {
+    const clickValid = useRef(false);
+
+    return (
+        <group
+            ref={(el) => registerRef?.(instance.id, el)}
+            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?.(instance.id);
+                }
+                clickValid.current = false;
+            }}
+        >
+            {InstanceComponents.map((Instance, i) => <Instance key={i} />)}
+        </group>
+    );
+}
+
 
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef<Group, {

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -237,49 +237,36 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 6. Common props for the wrapper element ---
-    const wrapperProps = {
-        position: transformProps.position,
-        rotation: transformProps.rotation,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-    };
+    // --- 6. Inner content group with full transform ---
+    const innerGroup = (
+        <group
+            ref={(el) => registerRef(gameObject.id, el)}
+            position={transformProps.position}
+            rotation={transformProps.rotation}
+            scale={transformProps.scale}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+        >
+            {core}
+            {children}
+        </group>
+    );
 
-    // --- 7. Check if physics is needed ---
+    // --- 7. Wrap with physics if needed (RigidBody as outer parent, no transform) ---
     const physics = gameObject.components?.physics;
-    const hasPhysics = physics && !editMode;
-
-    // --- 8. Final structure: RigidBody outside with position/rotation, scale inside ---
-    if (hasPhysics) {
+    if (physics && !editMode) {
         const physicsDef = getComponent('Physics');
         if (physicsDef?.View) {
             return (
-                <physicsDef.View
-                    properties={physics.properties}
-                    ref={(obj: Object3D | null) => registerRef(gameObject.id, obj)}
-                    {...wrapperProps}
-                >
-                    <group scale={transformProps.scale}>
-                        {core}
-                        {children}
-                    </group>
+                <physicsDef.View properties={physics.properties}>
+                    {innerGroup}
                 </physicsDef.View>
             );
         }
     }
 
-    // --- 9. No physics - standard group wrapper ---
-    return (
-        <group
-            ref={(el) => registerRef(gameObject.id, el)}
-            scale={transformProps.scale}
-            {...wrapperProps}
-        >
-            {core}
-            {children}
-        </group>
-    );
+    return innerGroup;
 }
 
 // Helper: render an instanced GameInstance (terminal node)

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

@@ -1,7 +1,7 @@
 import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import { CameraHelper, DirectionalLight, Object3D, Vector3 } from "three";
+import { useFrame } from "@react-three/fiber";
+import { DirectionalLight, Object3D, Vector3 } from "three";
 
 function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
     const props = {
@@ -190,71 +190,31 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
     const shadowCameraRight = properties.shadowCameraRight ?? 30;
     const targetOffset = properties.targetOffset ?? [0, -5, 0];
 
-    const { scene } = useThree();
     const directionalLightRef = useRef<DirectionalLight>(null);
-    const targetRef = useRef<Object3D>(new Object3D());
-    const cameraHelperRef = useRef<CameraHelper | null>(null);
+    const targetRef = useRef<Object3D>(null);
 
-    // Add target to scene once
+    // Set up light target reference when both refs are ready
     useEffect(() => {
-        const target = targetRef.current;
-        scene.add(target);
-        return () => {
-            scene.remove(target);
-        };
-    }, [scene]);
-
-    // Set up light target reference once
-    useEffect(() => {
-        if (directionalLightRef.current) {
+        if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
         }
     }, []);
 
-    // Update target position and mark shadow for update when light moves or offset changes
+    // Update target world position based on light position + offset
     useFrame(() => {
-        if (!directionalLightRef.current) return;
+        if (!directionalLightRef.current || !targetRef.current) return;
 
         const lightWorldPos = new Vector3();
         directionalLightRef.current.getWorldPosition(lightWorldPos);
 
-        const newTargetPos = new Vector3(
+        // Target is positioned relative to light's world position
+        targetRef.current.position.set(
             lightWorldPos.x + targetOffset[0],
             lightWorldPos.y + targetOffset[1],
             lightWorldPos.z + targetOffset[2]
         );
-
-        // Only update if position actually changed
-        if (!targetRef.current.position.equals(newTargetPos)) {
-            targetRef.current.position.copy(newTargetPos);
-            if (directionalLightRef.current.shadow) {
-                directionalLightRef.current.shadow.needsUpdate = true;
-            }
-        }
-
-        // Update camera helper in edit mode
-        if (editMode && cameraHelperRef.current) {
-            cameraHelperRef.current.update();
-        }
     });
 
-    // Create/destroy camera helper for edit mode
-    useEffect(() => {
-        if (editMode && directionalLightRef.current?.shadow.camera) {
-            const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
-            cameraHelperRef.current = helper;
-            scene.add(helper);
-
-            return () => {
-                if (cameraHelperRef.current) {
-                    scene.remove(cameraHelperRef.current);
-                    cameraHelperRef.current.dispose();
-                    cameraHelperRef.current = null;
-                }
-            };
-        }
-    }, [editMode, scene]);
-
     return (
         <>
             <directionalLight
@@ -262,20 +222,19 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
                 color={color}
                 intensity={intensity}
                 castShadow={castShadow}
-                shadow-mapSize={[shadowMapSize, shadowMapSize]}
+                shadow-mapSize-width={shadowMapSize}
+                shadow-mapSize-height={shadowMapSize}
+                shadow-camera-near={shadowCameraNear}
+                shadow-camera-far={shadowCameraFar}
+                shadow-camera-top={shadowCameraTop}
+                shadow-camera-bottom={shadowCameraBottom}
+                shadow-camera-left={shadowCameraLeft}
+                shadow-camera-right={shadowCameraRight}
                 shadow-bias={-0.001}
                 shadow-normalBias={0.02}
-            >
-                <orthographicCamera
-                    attach="shadow-camera"
-                    near={shadowCameraNear}
-                    far={shadowCameraFar}
-                    top={shadowCameraTop}
-                    bottom={shadowCameraBottom}
-                    left={shadowCameraLeft}
-                    right={shadowCameraRight}
-                />
-            </directionalLight>
+            />
+            {/* Target object - rendered declaratively in scene graph */}
+            <object3D ref={targetRef} />
             {editMode && (
                 <>
                     {/* Light source indicator */}

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

@@ -130,14 +130,16 @@ function MaterialComponentView({ properties, loadedTextures, isSelected }: { pro
     const { color, wireframe = false } = properties;
     const displayColor = isSelected ? "cyan" : color;
 
-    return <meshStandardMaterial
-        key={finalTexture?.uuid ?? 'no-texture'}
-        color={displayColor}
-        wireframe={wireframe}
-        map={finalTexture}
-        transparent={!!finalTexture}
-        side={DoubleSide}
-    />;
+    return (
+        <meshStandardMaterial
+            key={finalTexture?.uuid ?? 'no-texture'}
+            color={displayColor}
+            wireframe={wireframe}
+            map={finalTexture}
+            transparent={!!finalTexture}
+            side={DoubleSide}
+        />
+    );
 }
 
 const MaterialComponent: Component = {

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

@@ -1,5 +1,5 @@
 import { ModelListViewer } from '../../assetviewer/page';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Component } from './ComponentRegistry';
 
 function ModelComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
@@ -49,20 +49,24 @@ function ModelComponentView({ properties, loadedModels, children }: { properties
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced) return <>{children}</>;
 
-    if (loadedModels && loadedModels[properties.filename]) {
-        const clonedModel = loadedModels[properties.filename].clone();
-        // Enable shadows on all meshes in the model
-        clonedModel.traverse((obj: any) => {
+    const sourceModel = loadedModels?.[properties.filename];
+
+    // Clone model once and set up shadows - memoized to avoid cloning on every render
+    const clonedModel = useMemo(() => {
+        if (!sourceModel) return null;
+        const clone = sourceModel.clone();
+        clone.traverse((obj: any) => {
             if (obj.isMesh) {
                 obj.castShadow = true;
                 obj.receiveShadow = true;
             }
         });
-        return <primitive object={clonedModel}>{children}</primitive>;
-    }
+        return clone;
+    }, [sourceModel]);
+
+    if (!clonedModel) return <>{children}</>;
 
-    // Model not loaded yet - render children only
-    return <>{children}</>;
+    return <primitive object={clonedModel}>{children}</primitive>;
 }
 
 const ModelComponent: Component = {

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

@@ -1,4 +1,4 @@
-import { RigidBody, RigidBodyProps } from "@react-three/rapier";
+import { RigidBody } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 
 const selectClass = "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50";
@@ -25,18 +25,19 @@ function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpd
     );
 }
 
-interface PhysicsViewProps extends Omit<RigidBodyProps, 'type' | 'colliders'> {
-    properties: { type: RigidBodyProps['type']; collider?: string };
+interface PhysicsViewProps {
+    properties: { type: 'dynamic' | 'fixed'; collider?: string };
     editMode?: boolean;
+    children?: React.ReactNode;
 }
 
-function PhysicsComponentView({ properties, editMode, children, ...rigidBodyProps }: PhysicsViewProps) {
+function PhysicsComponentView({ properties, editMode, children }: PhysicsViewProps) {
     if (editMode) return <>{children}</>;
 
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
     return (
-        <RigidBody type={properties.type} colliders={colliders as any} {...rigidBodyProps}>
+        <RigidBody type={properties.type} colliders={colliders as any}>
             {children}
         </RigidBody>
     );

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

@@ -113,6 +113,8 @@ function SpotLightView({ properties, editMode }: { properties: any; editMode?: b
                 penumbra={penumbra}
                 distance={distance}
                 castShadow={castShadow}
+                shadow-mapSize-width={1024}
+                shadow-mapSize-height={1024}
                 shadow-bias={-0.0001}
                 shadow-normalBias={0.02}
             />