react-three-game 0.0.26 → 0.0.28

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

@@ -10,13 +10,15 @@ export type InstanceData = {
         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: {
         [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 const GameInstance: React.ForwardRefExoticComponent<{
     id: string;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
-import { Merged } from '@react-three/drei';
+import { Merged, useHelper } from '@react-three/drei';
 import { InstancedRigidBodies } from "@react-three/rapier";
-import { Mesh, Matrix4, Vector3, Quaternion, Euler } from "three";
+import { Mesh, Matrix4, Vector3, Quaternion, Euler, BoxHelper } from "three";
 // Helper functions for comparison
 function arrayEquals(a, b) {
     if (a === b)
@@ -25,7 +25,7 @@ function instanceEquals(a, b) {
         ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type);
 }
 const GameInstanceContext = createContext(null);
-export function GameInstanceProvider({ children, models, onSelect, registerRef }) {
+export function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }) {
     const [instances, setInstances] = useState([]);
     const addInstance = useCallback((instance) => {
         setInstances(prev => {
@@ -119,7 +119,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                     const partKey = `${modelKey}__${i}`;
                     meshesForModel[partKey] = flatMeshes[partKey];
                 }
-                return (_jsx(Merged, { meshes: meshesForModel, castShadow: true, receiveShadow: true, children: (instancesMap) => (_jsx(NonPhysicsInstancedGroup, { modelKey: modelKey, group: group, partCount: partCount, instancesMap: instancesMap, onSelect: onSelect, registerRef: registerRef })) }, 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));
             })] }));
 }
 // Render physics-enabled instances using InstancedRigidBodies
@@ -160,16 +160,23 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
             return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, 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 }) {
+// 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 }, inst.id))) }));
+    return (_jsx(_Fragment, { children: group.instances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, InstanceComponents: InstanceComponents, onSelect: onSelect, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
 }
 // Individual instance item with its own click state
-function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef }) {
+function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef, selectedId, editMode }) {
     const clickValid = 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(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+    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);

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -44,7 +44,7 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
         const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
         onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
     };
-    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { debug: true, paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, basePath: basePath }), children] }) }), _jsx(SaveDataPanel, { currentData: loadedPrefab, onDataChange: updatePrefab, editMode: editMode, onEditModeChange: setEditMode }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
+    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, basePath: basePath }), children] }) }), _jsx(SaveDataPanel, { currentData: loadedPrefab, onDataChange: updatePrefab, editMode: editMode, onEditModeChange: setEditMode }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
 };
 const SaveDataPanel = ({ currentData, onDataChange, editMode, onEditModeChange }) => {
     const [history, setHistory] = useState([currentData]);

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,10 +105,10 @@ 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;
+    var _a, _b, _c, _d, _e, _f;
     // Early return if gameObject is null or undefined
     if (!gameObject)
         return null;
@@ -146,11 +146,21 @@ 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) {
+    // Determine if model is safe/ready for physics. No model => safe; model => only safe once loaded.
+    const modelReady = !((_f = gameObject.components) === null || _f === void 0 ? void 0 : _f.model) ||
+        !!loadedModels[gameObject.components.model.properties.filename];
+    if (physics && !editMode && modelReady) {
         const physicsDef = getComponent('Physics');
         if (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) {
             return (_jsx(physicsDef.View, { properties: physics.properties, children: innerGroup }));
@@ -183,7 +193,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/dist/tools/prefabeditor/components/PhysicsComponent.js

@@ -3,14 +3,16 @@ 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";
 const labelClass = "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5";
 function PhysicsComponentEditor({ component, onUpdate }) {
-    const { type, collider = 'hull' } = component.properties;
+    const { type = 'dynamic', 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({ properties, editMode, children }) {
     if (editMode)
         return _jsx(_Fragment, { children: children });
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
-    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, children: children }));
+    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
+    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
+    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, children: children }, rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',

package/package.json

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

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
-import { Merged } from '@react-three/drei';
+import { Merged, useHelper } from '@react-three/drei';
 import { InstancedRigidBodies } from "@react-three/rapier";
-import { Mesh, Matrix4, Object3D, Group, Vector3, Quaternion, Euler, InstancedMesh } from "three";
+import { Mesh, Matrix4, Object3D, Group, Vector3, Quaternion, Euler, InstancedMesh, BoxHelper } from "three";
 
 // --- Types ---
 export type InstanceData = {
@@ -46,12 +46,16 @@ export function GameInstanceProvider({
     children,
     models,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
     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[]>([]);
 
@@ -187,6 +191,8 @@ export function GameInstanceProvider({
                                 instancesMap={instancesMap}
                                 onSelect={onSelect}
                                 registerRef={registerRef}
+                                selectedId={selectedId}
+                                editMode={editMode}
                             />
                         )}
                     </Merged>
@@ -269,14 +275,16 @@ function InstancedRigidGroup({
     );
 }
 
-// Render non-physics instances using Merged's per-instance groups
+// Render non-physics instances using Merged (instancing without rigid bodies)
 function NonPhysicsInstancedGroup({
     modelKey,
     group,
     partCount,
     instancesMap,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
     modelKey: string;
     group: { physicsType: string, instances: InstanceData[] };
@@ -284,6 +292,8 @@ function NonPhysicsInstancedGroup({
     instancesMap: Record<string, React.ComponentType<any>>;
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
+    selectedId?: string | null;
+    editMode?: boolean;
 }) {
     // Pre-compute which Instance components exist for this model
     const InstanceComponents = useMemo(() =>
@@ -300,6 +310,8 @@ function NonPhysicsInstancedGroup({
                     InstanceComponents={InstanceComponents}
                     onSelect={onSelect}
                     registerRef={registerRef}
+                    selectedId={selectedId}
+                    editMode={editMode}
                 />
             ))}
         </>
@@ -311,18 +323,31 @@ function InstanceGroupItem({
     instance,
     InstanceComponents,
     onSelect,
-    registerRef
+    registerRef,
+    selectedId,
+    editMode
 }: {
     instance: InstanceData;
     InstanceComponents: React.ComponentType<any>[];
     onSelect?: (id: string | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
+    selectedId?: string | null;
+    editMode?: boolean;
 }) {
     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}

package/src/tools/prefabeditor/PrefabEditor.tsx

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

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}
@@ -255,7 +271,13 @@ function GameObjectRenderer({
 
     // --- 7. Wrap with physics if needed (RigidBody as outer parent, no transform) ---
     const physics = gameObject.components?.physics;
-    if (physics && !editMode) {
+
+    // Determine if model is safe/ready for physics. No model => safe; model => only safe once loaded.
+    const modelReady =
+        !gameObject.components?.model ||
+        !!loadedModels[gameObject.components.model.properties.filename];
+
+    if (physics && !editMode && modelReady) {
         const physicsDef = getComponent('Physics');
         if (physicsDef?.View) {
             return (
@@ -304,7 +326,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}

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

@@ -1,11 +1,12 @@
 import { RigidBody } from "@react-three/rapier";
+import type { ReactNode } from 'react';
 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";
 const labelClass = "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5";
 
-function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpdate: (props: any) => void }) {
-    const { type, collider = 'hull' } = component.properties;
+function PhysicsComponentEditor({ component, onUpdate }: { component: { properties: { type?: 'dynamic' | 'fixed'; collider?: string;[k: string]: any } }; onUpdate: (props: Partial<Record<string, any>>) => void }) {
+    const { type = 'dynamic', collider = 'hull' } = component.properties;
     return (
         <div>
             <label className={labelClass}>Type</label>
@@ -26,9 +27,9 @@ function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpd
 }
 
 interface PhysicsViewProps {
-    properties: { type: 'dynamic' | 'fixed'; collider?: string };
+    properties: { type?: 'dynamic' | 'fixed'; collider?: string };
     editMode?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 
 function PhysicsComponentView({ properties, editMode, children }: PhysicsViewProps) {
@@ -36,8 +37,11 @@ function PhysicsComponentView({ properties, editMode, children }: PhysicsViewPro
 
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
+    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
+    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
+
     return (
-        <RigidBody type={properties.type} colliders={colliders as any}>
+        <RigidBody key={rbKey} type={properties.type} colliders={colliders as any}>
             {children}
         </RigidBody>
     );