react-three-game 0.0.21 → 0.0.23

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

@@ -1,30 +1,29 @@
 import React from "react";
-import { Object3D, Group } from "three";
+import { RigidBodyProps } from "@react-three/rapier";
+import { Object3D } from "three";
 export type InstanceData = {
     id: string;
+    meshPath: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    meshPath: string;
     physics?: {
-        type: 'dynamic' | 'fixed';
+        type: RigidBodyProps['type'];
     };
 };
 export declare function GameInstanceProvider({ children, models, onSelect, registerRef }: {
     children: React.ReactNode;
-    models: {
-        [filename: string]: Object3D;
-    };
+    models: Record<string, Object3D>;
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const GameInstance: React.ForwardRefExoticComponent<{
+export declare function GameInstance({ id, modelUrl, position, rotation, scale, physics }: {
     id: string;
     modelUrl: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
     physics?: {
-        type: "dynamic" | "fixed";
+        type: RigidBodyProps['type'];
     };
-} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+}): null;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,164 +1,137 @@
 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 { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged } from '@react-three/drei';
 import { InstancedRigidBodies } from "@react-three/rapier";
-import { Mesh, Matrix4 } 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) {
+import { useFrame } from "@react-three/fiber";
+import { Mesh, Matrix4, Euler, Quaternion, Vector3 } from "three";
+// --- Helpers ---
+const arraysEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+const instancesEqual = (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);
+        ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type) &&
+        arraysEqual(a.position, b.position) &&
+        arraysEqual(a.rotation, b.rotation) &&
+        arraysEqual(a.scale, b.scale);
+};
+// Reusable objects for matrix computation (avoid allocations in hot paths)
+const _matrix = new Matrix4();
+const _position = new Vector3();
+const _quaternion = new Quaternion();
+const _euler = new Euler();
+const _scale = new Vector3();
+function composeMatrix(position, rotation, scale, target = _matrix) {
+    _position.set(...position);
+    _quaternion.setFromEuler(_euler.set(...rotation));
+    _scale.set(...scale);
+    return target.compose(_position, _quaternion, _scale);
 }
+// --- Context ---
 const GameInstanceContext = createContext(null);
+// --- Provider ---
 export function GameInstanceProvider({ children, models, onSelect, registerRef }) {
     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];
+            if (idx === -1)
+                return [...prev, instance];
+            if (instancesEqual(prev[idx], instance))
+                return prev;
+            const updated = [...prev];
+            updated[idx] = instance;
+            return updated;
         });
     }, []);
     const removeInstance = useCallback((id) => {
-        setInstances(prev => {
-            if (!prev.find(i => i.id === id))
-                return prev;
-            return prev.filter(i => i.id !== id);
-        });
+        setInstances(prev => prev.filter(i => i.id !== id));
     }, []);
-    // Flatten all model meshes once (models → flat mesh parts)
-    const { flatMeshes, modelParts } = useMemo(() => {
-        const flatMeshes = {};
-        const modelParts = {};
+    // Extract mesh parts from models with baked local transforms
+    const { meshParts, partCounts } = useMemo(() => {
+        const meshParts = {};
+        const partCounts = {};
         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) => {
-                if (obj.isMesh) {
-                    const geom = obj.geometry.clone();
-                    const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
-                    geom.applyMatrix4(relativeTransform);
-                    const partKey = `${modelKey}__${partIndex}`;
-                    flatMeshes[partKey] = new Mesh(geom, obj.material);
+            model.traverse((child) => {
+                if (child.isMesh) {
+                    const mesh = child;
+                    const geometry = mesh.geometry.clone();
+                    geometry.applyMatrix4(mesh.matrixWorld.clone().premultiply(rootInverse));
+                    meshParts[`${modelKey}__${partIndex}`] = new Mesh(geometry, mesh.material);
                     partIndex++;
                 }
             });
-            modelParts[modelKey] = partIndex;
+            partCounts[modelKey] = partIndex;
         });
-        return { flatMeshes, modelParts };
+        return { meshParts, partCounts };
     }, [models]);
-    // Group instances by meshPath + physics type for batch rendering
+    // Cleanup cloned geometries
+    useEffect(() => () => {
+        Object.values(meshParts).forEach(mesh => mesh.geometry.dispose());
+    }, [meshParts]);
+    // Group instances by model + physics type
     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: [] };
+        instances.forEach(inst => {
+            var _a, _b, _c;
+            const physicsType = (_b = (_a = inst.physics) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'none';
+            const key = `${inst.meshPath}__${physicsType}`;
+            (_c = groups[key]) !== null && _c !== void 0 ? _c : (groups[key] = { physicsType, instances: [] });
             groups[key].instances.push(inst);
-        }
+        });
         return groups;
     }, [instances]);
-    return (_jsxs(GameInstanceContext.Provider, { value: {
-            addInstance,
-            removeInstance,
-            instances,
-            meshes: flatMeshes,
-            modelParts
-        }, children: [children, Object.entries(grouped).map(([key, group]) => {
-                if (group.physicsType === 'none')
-                    return null;
+    const contextValue = useMemo(() => ({ addInstance, removeInstance }), [addInstance, removeInstance]);
+    return (_jsxs(GameInstanceContext.Provider, { value: contextValue, children: [children, Object.entries(grouped).map(([key, group]) => {
+                var _a;
                 const modelKey = group.instances[0].meshPath;
-                const partCount = modelParts[modelKey] || 0;
+                const partCount = (_a = partCounts[modelKey]) !== null && _a !== void 0 ? _a : 0;
                 if (partCount === 0)
                     return null;
-                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes }, 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];
+                if (group.physicsType !== 'none') {
+                    return (_jsx(PhysicsInstances, { instances: group.instances, physicsType: group.physicsType, modelKey: modelKey, partCount: partCount, meshParts: meshParts }, key));
                 }
-                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 })) }, key));
+                const modelMeshes = Object.fromEntries(Array.from({ length: partCount }, (_, i) => [`${modelKey}__${i}`, meshParts[`${modelKey}__${i}`]]));
+                return (_jsx(Merged, { meshes: modelMeshes, castShadow: true, receiveShadow: true, children: (Components) => (_jsx(StaticInstances, { instances: group.instances, modelKey: modelKey, partCount: partCount, Components: Components, onSelect: onSelect, registerRef: registerRef })) }, key));
             })] }));
 }
-// Render physics-enabled instances using InstancedRigidBodies
-function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
-    const instances = useMemo(() => group.instances.map(inst => ({
-        key: inst.id,
-        position: inst.position,
-        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 mesh = flatMeshes[`${modelKey}__${i}`];
-            return (_jsx("instancedMesh", { args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
+// --- Physics Instances ---
+function PhysicsInstances({ instances, physicsType, modelKey, partCount, meshParts }) {
+    const meshRefs = useRef([]);
+    const rigidBodyInstances = useMemo(() => instances.map(({ id, position, rotation, scale }) => ({ key: id, position, rotation, scale })), [instances]);
+    // Sync visual matrices each frame (physics updates position/rotation, we need to apply scale)
+    useFrame(() => {
+        meshRefs.current.forEach(mesh => {
+            if (!mesh)
+                return;
+            instances.forEach((inst, i) => {
+                mesh.setMatrixAt(i, composeMatrix(inst.position, inst.rotation, inst.scale));
+            });
+            mesh.instanceMatrix.needsUpdate = true;
+        });
+    });
+    return (_jsx(InstancedRigidBodies, { instances: rigidBodyInstances, type: physicsType, colliders: physicsType === 'fixed' ? 'trimesh' : 'hull', children: Array.from({ length: partCount }, (_, i) => {
+            const mesh = meshParts[`${modelKey}__${i}`];
+            return mesh ? (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, instances.length], frustumCulled: false, castShadow: true, receiveShadow: true }, i)) : null;
         }) }));
 }
-// Render non-physics instances using Merged's per-instance groups
-function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef }) {
-    const clickValid = useRef(false);
-    const handlePointerDown = (e) => {
-        e.stopPropagation();
-        clickValid.current = true;
-    };
-    const handlePointerMove = () => {
-        if (clickValid.current)
-            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))) }));
+// --- Static Instances (non-physics) ---
+function StaticInstances({ instances, modelKey, partCount, Components, onSelect, registerRef }) {
+    const Parts = useMemo(() => Array.from({ length: partCount }, (_, i) => Components[`${modelKey}__${i}`]).filter(Boolean), [Components, modelKey, partCount]);
+    return (_jsx(_Fragment, { children: instances.map(inst => (_jsx(InstanceItem, { instance: inst, Parts: Parts, onSelect: onSelect, registerRef: registerRef }, inst.id))) }));
 }
-// GameInstance component: registers an instance for batch rendering (renders nothing itself)
-export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+// --- Single Instance ---
+function InstanceItem({ instance, Parts, onSelect, registerRef }) {
+    const moved = useRef(false);
+    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(); moved.current = false; }, onPointerMove: () => { moved.current = true; }, onPointerUp: e => { e.stopPropagation(); if (!moved.current)
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.id); }, children: Parts.map((Part, i) => _jsx(Part, {}, i)) }));
+}
+// --- GameInstance (declarative registration) ---
+export function GameInstance({ id, modelUrl, position, rotation, scale, physics }) {
     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,
@@ -168,13 +141,10 @@ export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation
         physics,
     }), [id, modelUrl, position, rotation, scale, physics]);
     useEffect(() => {
-        if (!addInstance || !removeInstance)
+        if (!ctx)
             return;
-        addInstance(instance);
-        return () => {
-            removeInstance(instance.id);
-        };
-    }, [addInstance, removeInstance, instance]);
-    // No visual rendering - provider handles all instanced visuals
+        ctx.addInstance(instance);
+        return () => ctx.removeInstance(id);
+    }, [ctx, instance, id]);
     return null;
-});
+}

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.23",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",