react-three-game 0.0.25 → 0.0.27

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

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

package/dist/tools/prefabeditor/InstanceProvider.js

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

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -9,9 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MapControls, TransformControls } from "@react-three/drei";
+import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
-import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4 } from "three";
+import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4, BoxHelper } from "three";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
@@ -105,7 +105,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         });
         loadAssets();
     }, [data, loadedModels, loadedTextures]);
-    return _jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: loadedModels, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: new Matrix4() }) }), editMode && _jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedId && selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] })] });
+    return _jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: loadedModels, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, selectedId: selectedId, editMode: editMode, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: new Matrix4() }) }), editMode && _jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedId && selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] })] });
 });
 function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = new Matrix4(), }) {
     var _a, _b, _c, _d, _e;
@@ -146,8 +146,15 @@ 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. 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] }));
+    // --- 6. Inner content group with full transform and selection helper ---
+    const groupRef = useRef(null);
+    const isSelected = selectedId === gameObject.id;
+    // Show BoxHelper when selected in edit mode
+    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+    useEffect(() => {
+        registerRef(gameObject.id, groupRef.current);
+    }, [gameObject.id, registerRef]);
+    const innerGroup = (_jsxs("group", { ref: groupRef, 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;
     if (physics && !editMode) {
@@ -183,7 +190,6 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
-        isSelected: ctx.selectedId === gameObject.id,
         editMode: ctx.editMode,
         parentMatrix,
         registerRef: ctx.registerRef,

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

@@ -25,7 +25,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 import { useMemo } from 'react';
 import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace } from 'three';
 // View for Material component
-function MaterialComponentView({ properties, loadedTextures, isSelected }) {
+function MaterialComponentView({ properties, loadedTextures }) {
     var _a;
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
@@ -52,8 +52,7 @@ function MaterialComponentView({ properties, loadedTextures, isSelected }) {
         return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
     }
     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: color, 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/package.json

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

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -1,159 +1,198 @@
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
-import { Merged } from '@react-three/drei';
-import { InstancedRigidBodies, RigidBodyProps } from "@react-three/rapier";
-import { Mesh, Matrix4, Object3D, Quaternion, Vector3, InstancedMesh } from "three";
+import { Merged, useHelper } from '@react-three/drei';
+import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4, Object3D, Group, Vector3, Quaternion, Euler, InstancedMesh, BoxHelper } from "three";
 
 // --- Types ---
 export type InstanceData = {
     id: string;
-    meshPath: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    physics?: { type: RigidBodyProps['type'] };
+    meshPath: string;
+    physics?: { type: 'dynamic' | 'fixed' };
 };
 
-type GroupedInstances = Record<string, {
-    physicsType: string;
-    instances: InstanceData[];
-}>;
+// Helper functions for comparison
+function arrayEquals(a: number[], b: number[]): boolean {
+    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: InstanceData, b: InstanceData): boolean {
+    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.physics?.type === b.physics?.type;
+}
+
+// --- Context ---
 type GameInstanceContextType = {
     addInstance: (instance: InstanceData) => void;
     removeInstance: (id: string) => void;
+    instances: InstanceData[];
+    meshes: Record<string, Mesh>;
+    modelParts?: Record<string, number>;
 };
-
-// --- Helpers ---
-const tupleEqual = (a: readonly number[], b: readonly number[]) =>
-    a.length === b.length && a.every((v, i) => v === b[i]);
-
-const instanceChanged = (a: InstanceData, b: InstanceData) =>
-    a.meshPath !== b.meshPath ||
-    a.physics?.type !== b.physics?.type ||
-    !tupleEqual(a.position, b.position) ||
-    !tupleEqual(a.rotation, b.rotation) ||
-    !tupleEqual(a.scale, b.scale);
-
-function extractMeshParts(model: Object3D): Mesh[] {
-    model.updateWorldMatrix(false, true);
-    const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
-    const parts: Mesh[] = [];
-
-    model.traverse(child => {
-        if ((child as Mesh).isMesh) {
-            const mesh = child as Mesh;
-            const geometry = mesh.geometry.clone();
-            geometry.applyMatrix4(mesh.matrixWorld.clone().premultiply(rootInverse));
-            parts.push(new Mesh(geometry, mesh.material));
-        }
-    });
-
-    return parts;
-}
-
-// --- Context ---
 const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
 
-// --- Provider ---
 export function GameInstanceProvider({
     children,
     models,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
-    children: React.ReactNode;
-    models: Record<string, Object3D>;
-    onSelect?: (id: string | null) => void;
-    registerRef?: (id: string, obj: Object3D | null) => void;
+    children: React.ReactNode,
+    models: { [filename: string]: Object3D },
+    onSelect?: (id: string | null) => void,
+    registerRef?: (id: string, obj: Object3D | null) => void,
+    selectedId?: string | null,
+    editMode?: boolean
 }) {
     const [instances, setInstances] = useState<InstanceData[]>([]);
 
     const addInstance = useCallback((instance: InstanceData) => {
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
-            if (idx === -1) return [...prev, instance];
-            if (!instanceChanged(prev[idx], instance)) return prev;
-            const updated = [...prev];
-            updated[idx] = instance;
-            return updated;
+            if (idx !== -1) {
+                // Update existing if changed
+                if (instanceEquals(prev[idx], instance)) {
+                    return prev;
+                }
+                const copy = [...prev];
+                copy[idx] = instance;
+                return copy;
+            }
+            // Add new
+            return [...prev, instance];
         });
     }, []);
 
     const removeInstance = useCallback((id: string) => {
-        setInstances(prev => prev.filter(i => i.id !== id));
+        setInstances(prev => {
+            if (!prev.find(i => i.id === id)) return prev;
+            return prev.filter(i => i.id !== id);
+        });
     }, []);
 
-    // Extract mesh parts from models with baked local transforms
-    const { meshParts, partCounts } = useMemo(() => {
-        const meshParts: Record<string, Mesh> = {};
-        const partCounts: Record<string, number> = {};
+    // 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 parts = extractMeshParts(model);
-            parts.forEach((mesh, i) => {
-                meshParts[`${modelKey}__${i}`] = mesh;
+            model.updateWorldMatrix(false, true);
+            const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
+
+            let partIndex = 0;
+            model.traverse((obj: any) => {
+                if (obj.isMesh) {
+                    // Clone geometry and bake relative transform
+                    const geom = obj.geometry.clone();
+                    geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
+
+                    const partKey = `${modelKey}__${partIndex}`;
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
+                    partIndex++;
+                }
             });
-            partCounts[modelKey] = parts.length;
+            modelParts[modelKey] = partIndex;
         });
 
-        return { meshParts, partCounts };
+        return { flatMeshes, modelParts };
     }, [models]);
 
-    // Cleanup cloned geometries
-    useEffect(() => () => {
-        Object.values(meshParts).forEach(mesh => mesh.geometry.dispose());
-    }, [meshParts]);
-
-    // Group instances by model + physics type
-    const grouped = useMemo<GroupedInstances>(() => {
-        const groups: GroupedInstances = {};
-        instances.forEach(inst => {
-            const physicsType = inst.physics?.type ?? 'none';
-            const key = `${inst.meshPath}__${physicsType}`;
-            groups[key] ??= { physicsType, instances: [] };
+    // 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[] }> = {};
+        for (const inst of instances) {
+            const type = inst.physics?.type || 'none';
+            const key = `${inst.meshPath}__${type}`;
+            if (!groups[key]) groups[key] = { physicsType: type, instances: [] };
             groups[key].instances.push(inst);
-        });
+        }
         return groups;
     }, [instances]);
 
-    const contextValue = useMemo(() => ({ addInstance, removeInstance }), [addInstance, removeInstance]);
-
     return (
-        <GameInstanceContext.Provider value={contextValue}>
+        <GameInstanceContext.Provider
+            value={{
+                addInstance,
+                removeInstance,
+                instances,
+                meshes: flatMeshes,
+                modelParts
+            }}
+        >
+            {/* Render normal prefab hierarchy (non-instanced objects) */}
             {children}
 
+            {/* Render physics-enabled instanced groups using InstancedRigidBodies */}
             {Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType === 'none') return null;
                 const modelKey = group.instances[0].meshPath;
-                const partCount = partCounts[modelKey] ?? 0;
+                const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0) return null;
 
-                if (group.physicsType !== 'none') {
-                    return (
-                        <PhysicsInstances
-                            key={key}
-                            instances={group.instances}
-                            physicsType={group.physicsType as RigidBodyProps['type']}
-                            modelKey={modelKey}
-                            partCount={partCount}
-                            meshParts={meshParts}
-                        />
-                    );
-                }
-
-                const modelMeshes = Object.fromEntries(
-                    Array.from({ length: partCount }, (_, i) => [`${modelKey}__${i}`, meshParts[`${modelKey}__${i}`]])
+                return (
+                    <InstancedRigidGroup
+                        key={key}
+                        group={group}
+                        modelKey={modelKey}
+                        partCount={partCount}
+                        flatMeshes={flatMeshes}
+                    />
                 );
+            })}
+
+            {/* Render non-physics instanced visuals using Merged (one per model type) */}
+            {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: Record<string, Mesh> = {};
+                for (let i = 0; i < partCount; i++) {
+                    const partKey = `${modelKey}__${i}`;
+                    meshesForModel[partKey] = flatMeshes[partKey];
+                }
 
                 return (
-                    <Merged key={key} meshes={modelMeshes} castShadow receiveShadow>
-                        {(Components: Record<string, React.ComponentType>) => (
-                            <StaticInstances
-                                instances={group.instances}
+                    <Merged
+                        key={key}
+                        meshes={meshesForModel}
+                        castShadow
+                        receiveShadow
+                    >
+                        {(instancesMap: any) => (
+                            <NonPhysicsInstancedGroup
                                 modelKey={modelKey}
+                                group={group}
                                 partCount={partCount}
-                                Components={Components}
+                                instancesMap={instancesMap}
                                 onSelect={onSelect}
                                 registerRef={registerRef}
+                                selectedId={selectedId}
+                                editMode={editMode}
                             />
                         )}
                     </Merged>
@@ -163,150 +202,190 @@ export function GameInstanceProvider({
     );
 }
 
-// --- Physics Instances ---
-// InstancedRigidBodies manages position/rotation from physics simulation.
-// We apply scale once when instances change via useEffect.
-function PhysicsInstances({
-    instances,
-    physicsType,
+// Render physics-enabled instances using InstancedRigidBodies
+function InstancedRigidGroup({
+    group,
     modelKey,
     partCount,
-    meshParts
+    flatMeshes
 }: {
-    instances: InstanceData[];
-    physicsType: RigidBodyProps['type'];
-    modelKey: string;
-    partCount: number;
-    meshParts: Record<string, Mesh>;
+    group: { physicsType: string, instances: InstanceData[] },
+    modelKey: string,
+    partCount: number,
+    flatMeshes: Record<string, Mesh>
 }) {
     const meshRefs = useRef<(InstancedMesh | null)[]>([]);
 
-    // InstancedRigidBodies needs position/rotation (scale handled separately)
-    const rigidBodyInstances = useMemo(() =>
-        instances.map(({ id, position, rotation }) => ({ key: id, position, rotation })),
-        [instances]
+    const instances = useMemo(
+        () => group.instances.map(inst => ({
+            key: inst.id,
+            position: inst.position,
+            rotation: inst.rotation,
+            scale: inst.scale,
+        })),
+        [group.instances]
     );
 
-    // Apply scale when instances change
+    // Apply scale to visual meshes (InstancedRigidBodies only scales colliders, not visuals)
     useEffect(() => {
         const matrix = new Matrix4();
         const pos = new Vector3();
         const quat = new Quaternion();
+        const euler = new Euler();
         const scl = new Vector3();
 
         meshRefs.current.forEach(mesh => {
             if (!mesh) return;
 
-            instances.forEach((inst, i) => {
-                mesh.getMatrixAt(i, matrix);
-                matrix.decompose(pos, quat, scl);
+            group.instances.forEach((inst, i) => {
+                pos.set(...inst.position);
+                euler.set(...inst.rotation);
+                quat.setFromEuler(euler);
                 scl.set(...inst.scale);
                 matrix.compose(pos, quat, scl);
                 mesh.setMatrixAt(i, matrix);
             });
             mesh.instanceMatrix.needsUpdate = true;
         });
-    }, [instances]);
+    }, [group.instances]);
+
+    const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
 
     return (
         <InstancedRigidBodies
-            instances={rigidBodyInstances}
-            type={physicsType}
-            colliders={physicsType === 'fixed' ? 'trimesh' : 'hull'}
+            instances={instances}
+            colliders={colliders}
+            type={group.physicsType as 'dynamic' | 'fixed'}
         >
-            {Array.from({ length: partCount }, (_, i) => {
-                const mesh = meshParts[`${modelKey}__${i}`];
-                return mesh ? (
+            {Array.from({ length: partCount }).map((_, i) => {
+                const mesh = flatMeshes[`${modelKey}__${i}`];
+                if (!mesh) return null;
+                return (
                     <instancedMesh
                         key={i}
                         ref={el => { meshRefs.current[i] = el; }}
-                        args={[mesh.geometry, mesh.material, instances.length]}
-                        frustumCulled={false}
+                        args={[mesh.geometry, mesh.material, group.instances.length]}
                         castShadow
                         receiveShadow
+                        frustumCulled={false}
                     />
-                ) : null;
+                );
             })}
         </InstancedRigidBodies>
     );
 }
 
-// --- Static Instances (non-physics) ---
-function StaticInstances({
-    instances,
+// Render non-physics instances using Merged (instancing without rigid bodies)
+function NonPhysicsInstancedGroup({
     modelKey,
+    group,
     partCount,
-    Components,
+    instancesMap,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
-    instances: InstanceData[];
     modelKey: string;
+    group: { physicsType: string, instances: InstanceData[] };
     partCount: number;
-    Components: Record<string, React.ComponentType>;
+    instancesMap: Record<string, React.ComponentType<any>>;
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
+    selectedId?: string | null;
+    editMode?: boolean;
 }) {
-    const Parts = useMemo(() =>
-        Array.from({ length: partCount }, (_, i) => Components[`${modelKey}__${i}`]).filter(Boolean),
-        [Components, modelKey, partCount]
+    // 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 (
         <>
-            {instances.map(inst => (
-                <InstanceItem key={inst.id} instance={inst} Parts={Parts} onSelect={onSelect} registerRef={registerRef} />
+            {group.instances.map(inst => (
+                <InstanceGroupItem
+                    key={inst.id}
+                    instance={inst}
+                    InstanceComponents={InstanceComponents}
+                    onSelect={onSelect}
+                    registerRef={registerRef}
+                    selectedId={selectedId}
+                    editMode={editMode}
+                />
             ))}
         </>
     );
 }
 
-// --- Single Instance ---
-function InstanceItem({
+// Individual instance item with its own click state
+function InstanceGroupItem({
     instance,
-    Parts,
+    InstanceComponents,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
     instance: InstanceData;
-    Parts: React.ComponentType[];
+    InstanceComponents: React.ComponentType<any>[];
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
+    selectedId?: string | null;
+    editMode?: boolean;
 }) {
-    const moved = useRef(false);
+    const clickValid = useRef(false);
+    const groupRef = useRef<Group>(null!);
+    const isSelected = selectedId === instance.id;
+
+    // Use BoxHelper when object is selected in edit mode
+    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+
+    useEffect(() => {
+        registerRef?.(instance.id, groupRef.current);
+    }, [instance.id, registerRef]);
 
     return (
         <group
-            ref={el => registerRef?.(instance.id, el)}
+            ref={groupRef}
             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?.(instance.id); }}
+            onPointerDown={(e) => { e.stopPropagation(); clickValid.current = true; }}
+            onPointerMove={() => { clickValid.current = false; }}
+            onPointerUp={(e) => {
+                if (clickValid.current) {
+                    e.stopPropagation();
+                    onSelect?.(instance.id);
+                }
+                clickValid.current = false;
+            }}
         >
-            {Parts.map((Part, i) => <Part key={i} />)}
+            {InstanceComponents.map((Instance, i) => <Instance key={i} />)}
         </group>
     );
 }
 
-// --- GameInstance (declarative registration) ---
-export function GameInstance({
-    id,
-    modelUrl,
-    position,
-    rotation,
-    scale,
-    physics
-}: {
+
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
+export const GameInstance = React.forwardRef<Group, {
     id: string;
     modelUrl: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    physics?: { type: RigidBodyProps['type'] };
-}) {
+    physics?: { type: 'dynamic' | 'fixed' };
+}>(({
+    id,
+    modelUrl,
+    position,
+    rotation,
+    scale,
+    physics = undefined,
+}, ref) => {
     const ctx = useContext(GameInstanceContext);
+    const addInstance = ctx?.addInstance;
+    const removeInstance = ctx?.removeInstance;
 
     const instance = useMemo<InstanceData>(() => ({
         id,
@@ -318,10 +397,13 @@ export function GameInstance({
     }), [id, modelUrl, position, rotation, scale, physics]);
 
     useEffect(() => {
-        if (!ctx) return;
-        ctx.addInstance(instance);
-        return () => ctx.removeInstance(id);
-    }, [ctx, instance, id]);
-
+        if (!addInstance || !removeInstance) return;
+        addInstance(instance);
+        return () => {
+            removeInstance(instance.id);
+        };
+    }, [addInstance, removeInstance, instance]);
+
+    // No visual rendering - provider handles all instanced visuals
     return null;
-}
+});

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { MapControls, TransformControls } from "@react-three/drei";
+import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
-import { Vector3, Euler, Quaternion, Group, Object3D, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
+import { Vector3, Euler, Quaternion, Group, Object3D, SRGBColorSpace, Texture, TextureLoader, Matrix4, BoxHelper } from "three";
 import { Prefab, GameObject as GameObjectType } from "./types";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import { ThreeEvent } from "@react-three/fiber";
@@ -128,7 +128,13 @@ export const PrefabRoot = forwardRef<Group, {
 
 
     return <group ref={ref}>
-        <GameInstanceProvider models={loadedModels} onSelect={editMode ? onSelect : undefined} registerRef={registerRef}>
+        <GameInstanceProvider
+            models={loadedModels}
+            onSelect={editMode ? onSelect : undefined}
+            registerRef={registerRef}
+            selectedId={selectedId}
+            editMode={editMode}
+        >
             <GameObjectRenderer
                 gameObject={data.root}
                 selectedId={selectedId}
@@ -237,10 +243,20 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 6. Inner content group with full transform ---
+    // --- 6. Inner content group with full transform and selection helper ---
+    const groupRef = useRef<Group>(null!);
+    const isSelected = selectedId === gameObject.id;
+
+    // Show BoxHelper when selected in edit mode
+    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+
+    useEffect(() => {
+        registerRef(gameObject.id, groupRef.current);
+    }, [gameObject.id, registerRef]);
+
     const innerGroup = (
         <group
-            ref={(el) => registerRef(gameObject.id, el)}
+            ref={groupRef}
             position={transformProps.position}
             rotation={transformProps.rotation}
             scale={transformProps.scale}
@@ -304,7 +320,6 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
-        isSelected: ctx.selectedId === gameObject.id,
         editMode: ctx.editMode,
         parentMatrix,
         registerRef: ctx.registerRef,

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

@@ -102,7 +102,7 @@ import { useMemo } from 'react';
 import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, Texture } from 'three';
 
 // View for Material component
-function MaterialComponentView({ properties, loadedTextures, isSelected }: { properties: any, loadedTextures?: Record<string, Texture>, isSelected?: boolean }) {
+function MaterialComponentView({ properties, loadedTextures }: { properties: any, loadedTextures?: Record<string, Texture> }) {
     const textureName = properties?.texture;
     const repeat = properties?.repeat;
     const repeatCount = properties?.repeatCount;
@@ -128,12 +128,11 @@ 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}
+            color={color}
             wireframe={wireframe}
             map={finalTexture}
             transparent={!!finalTexture}