react-three-game 0.0.34 → 0.0.35

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

@@ -1,14 +1,13 @@
 import React from "react";
 import { Object3D, Group } from "three";
+import { PhysicsProps } from "./components/PhysicsComponent";
 export type InstanceData = {
     id: string;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
     meshPath: string;
-    physics?: {
-        type: 'dynamic' | 'fixed';
-    };
+    physics?: PhysicsProps | undefined;
 };
 export declare function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }: {
     children: React.ReactNode;
@@ -26,7 +25,5 @@ export declare const GameInstance: React.ForwardRefExoticComponent<{
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    physics?: {
-        type: "dynamic" | "fixed";
-    };
+    physics?: PhysicsProps | undefined;
 } & React.RefAttributes<Group<import("three").Object3DEventMap>>>;

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

@@ -1,5 +1,5 @@
-import { Group } from "three";
-import { Prefab } from "./types";
+import { Group, Matrix4, Object3D, Texture } from "three";
+import { Prefab, GameObject as GameObjectType } from "./types";
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
     data: Prefab;
@@ -9,4 +9,15 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     transformMode?: "translate" | "rotate" | "scale";
     basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
+export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
+interface RendererProps {
+    gameObject: GameObjectType;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    registerRef: (id: string, obj: Object3D | null) => void;
+    loadedModels: Record<string, Object3D>;
+    loadedTextures: Record<string, Texture>;
+    editMode?: boolean;
+    parentMatrix?: Matrix4;
+}
 export default PrefabRoot;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -10,19 +10,25 @@ 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, useHelper } from "@react-three/drei";
-import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
-import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4, BoxHelper } from "three";
+import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
+import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
 import { updateNode } from "./utils";
-import components from './components/';
-// Register all components
+/* -------------------------------------------------- */
+/* Setup */
+/* -------------------------------------------------- */
 components.forEach(registerComponent);
+const IDENTITY = new Matrix4();
+/* -------------------------------------------------- */
+/* PrefabRoot */
+/* -------------------------------------------------- */
 export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
-    const [loadedModels, setLoadedModels] = useState({});
-    const [loadedTextures, setLoadedTextures] = useState({});
-    const loadingRefs = useRef(new Set());
+    const [models, setModels] = useState({});
+    const [textures, setTextures] = useState({});
+    const loading = useRef(new Set());
     const objectRefs = useRef({});
     const [selectedObject, setSelectedObject] = useState(null);
     const registerRef = useCallback((id, obj) => {
@@ -31,165 +37,179 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             setSelectedObject(obj);
     }, [selectedId]);
     useEffect(() => {
-        setSelectedObject(selectedId ? objectRefs.current[selectedId] || null : null);
+        var _a;
+        setSelectedObject(selectedId ? (_a = objectRefs.current[selectedId]) !== null && _a !== void 0 ? _a : null : null);
     }, [selectedId]);
+    /* ---------------- Transform writeback ---------------- */
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange)
             return;
         const obj = objectRefs.current[selectedId];
         if (!obj)
             return;
-        // 1. Get world matrix from the actual Three object
-        const worldMatrix = obj.matrixWorld.clone();
-        // 2. Compute parent world matrix from the prefab tree
         const parentWorld = computeParentWorldMatrix(data.root, selectedId);
-        const parentInv = parentWorld.clone().invert();
-        // 3. Convert world -> local
-        const localMatrix = new Matrix4().multiplyMatrices(parentInv, worldMatrix);
-        const lp = new Vector3();
-        const lq = new Quaternion();
-        const ls = new Vector3();
-        localMatrix.decompose(lp, lq, ls);
-        const le = new Euler().setFromQuaternion(lq);
-        // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updateNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
+        const local = parentWorld.clone().invert().multiply(obj.matrixWorld);
+        const { position, rotation, scale } = decompose(local);
+        const root = updateNode(data.root, selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
                     type: "Transform",
-                    properties: {
-                        position: [lp.x, lp.y, lp.z],
-                        rotation: [le.x, le.y, le.z],
-                        scale: [ls.x, ls.y, ls.z],
-                    },
+                    properties: { position, rotation, scale },
                 } }) })));
-        onPrefabChange(Object.assign(Object.assign({}, data), { root: newRoot }));
+        onPrefabChange(Object.assign(Object.assign({}, data), { root }));
     };
+    /* ---------------- Asset loading ---------------- */
     useEffect(() => {
-        const loadAssets = () => __awaiter(void 0, void 0, void 0, function* () {
-            const modelsToLoad = new Set();
-            const texturesToLoad = new Set();
-            const traverse = (node) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                if (!node)
-                    return;
-                if ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename) {
-                    modelsToLoad.add(node.components.model.properties.filename);
-                }
-                if ((_f = (_e = (_d = node.components) === null || _d === void 0 ? void 0 : _d.material) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.texture) {
-                    texturesToLoad.add(node.components.material.properties.texture);
-                }
-                (_g = node.children) === null || _g === void 0 ? void 0 : _g.forEach(traverse);
-            };
-            traverse(data.root);
-            for (const filename of modelsToLoad) {
-                if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
-                    loadingRefs.current.add(filename);
-                    // Load model directly from public root, prepend "/" if not present
-                    const modelPath = filename.startsWith('/') ? filename : `/${filename}`;
-                    const result = yield loadModel(modelPath);
-                    if (result.success && result.model) {
-                        setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
-                    }
-                }
-            }
-            const textureLoader = new TextureLoader();
-            for (const filename of texturesToLoad) {
-                if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
-                    loadingRefs.current.add(filename);
-                    // Load texture directly from public root, prepend "/" if not present
-                    const texturePath = filename.startsWith('/') ? filename : `/${filename}`;
-                    textureLoader.load(texturePath, (texture) => {
-                        texture.colorSpace = SRGBColorSpace;
-                        setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));
-                    });
-                }
-            }
+        const modelsToLoad = new Set();
+        const texturesToLoad = new Set();
+        walk(data.root, node => {
+            var _a, _b, _c, _d, _e, _f;
+            ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename) &&
+                modelsToLoad.add(node.components.model.properties.filename);
+            ((_f = (_e = (_d = node.components) === null || _d === void 0 ? void 0 : _d.material) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.texture) &&
+                texturesToLoad.add(node.components.material.properties.texture);
+        });
+        modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
+            if (models[file] || loading.current.has(file))
+                return;
+            loading.current.add(file);
+            const path = file.startsWith("/")
+                ? `${basePath}${file}`
+                : `${basePath}/${file}`;
+            const res = yield loadModel(path);
+            res.success && res.model &&
+                setModels(m => (Object.assign(Object.assign({}, m), { [file]: res.model })));
+        }));
+        const loader = new TextureLoader();
+        texturesToLoad.forEach(file => {
+            if (textures[file] || loading.current.has(file))
+                return;
+            loading.current.add(file);
+            const path = file.startsWith("/")
+                ? `${basePath}${file}`
+                : `${basePath}/${file}`;
+            loader.load(path, tex => {
+                tex.colorSpace = SRGBColorSpace;
+                setTextures(t => (Object.assign(Object.assign({}, t), { [file]: tex })));
+            });
         });
-        loadAssets();
-    }, [data, loadedModels, loadedTextures]);
-    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 }))] })] });
+    }, [data, models, textures]);
+    /* ---------------- Render ---------------- */
+    return (_jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] }))] }));
 });
-function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = new Matrix4(), }) {
-    var _a, _b, _c, _d, _e, _f;
-    // Early return if gameObject is null or undefined
-    if (!gameObject)
-        return null;
-    if (gameObject.disabled === true || gameObject.hidden === true)
+/* -------------------------------------------------- */
+/* Renderer Switch */
+/* -------------------------------------------------- */
+export function GameObjectRenderer(props) {
+    var _a, _b, _c;
+    const node = props.gameObject;
+    if (!node || node.hidden || node.disabled)
         return null;
-    // Build context object for passing to helper functions
-    const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
-    // --- 1. Compute transforms (local + world) ---
-    const transformProps = getNodeTransformProps(gameObject);
-    const localMatrix = new Matrix4().compose(new Vector3(...transformProps.position), new Quaternion().setFromEuler(new Euler(...transformProps.rotation)), new Vector3(...transformProps.scale));
-    const worldMatrix = parentMatrix.clone().multiply(localMatrix);
-    // --- 2. Handle selection interaction (edit mode only) ---
+    return ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced)
+        ? _jsx(InstancedNode, Object.assign({}, props))
+        : _jsx(StandardNode, Object.assign({}, props));
+}
+/* -------------------------------------------------- */
+/* InstancedNode (terminal) */
+/* -------------------------------------------------- */
+function isPhysicsProps(v) {
+    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
+}
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const { position, rotation, scale } = decompose(world);
+    const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
+        ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
+        : undefined;
+    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename, position: position, rotation: rotation, scale: scale, physics: editMode ? undefined : physicsProps }));
+}
+/* -------------------------------------------------- */
+/* StandardNode */
+/* -------------------------------------------------- */
+function StandardNode({ gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+    var _a, _b, _c;
+    const groupRef = useRef(null);
     const clickValid = useRef(false);
-    const handlePointerDown = (e) => {
+    const isSelected = selectedId === gameObject.id;
+    const helperRef = groupRef;
+    useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
+    useEffect(() => {
+        registerRef(gameObject.id, groupRef.current);
+        return () => registerRef(gameObject.id, null);
+    }, [gameObject.id, registerRef]);
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const onDown = (e) => {
         e.stopPropagation();
         clickValid.current = true;
     };
-    const handlePointerMove = () => {
-        if (clickValid.current)
-            clickValid.current = false;
-    };
-    const handlePointerUp = (e) => {
+    const onUp = (e) => {
         if (clickValid.current) {
             e.stopPropagation();
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
         }
         clickValid.current = false;
     };
-    // --- 3. If instanced model, short-circuit to GameInstance (terminal node) ---
-    const isInstanced = !!((_c = (_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced);
-    if (isInstanced) {
-        return renderInstancedNode(gameObject, worldMatrix, ctx);
-    }
-    // --- 4. Render core content using component system ---
-    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 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;
-    // 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 }));
-        }
+    const inner = (_jsxs("group", Object.assign({ ref: groupRef }, getNodeTransformProps(gameObject), { onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => (_jsx(GameObjectRenderer, { child, gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] })));
+    const physics = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.physics;
+    const ready = !((_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) ||
+        loadedModels[gameObject.components.model.properties.filename];
+    if (physics && !editMode && ready) {
+        const def = getComponent("Physics");
+        return (def === null || def === void 0 ? void 0 : def.View)
+            ? _jsx(def.View, { properties: physics.properties, children: inner })
+            : inner;
     }
-    return innerGroup;
+    return inner;
+}
+function walk(node, fn) {
+    var _a;
+    fn(node);
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => walk(c, fn));
+}
+function compose(node) {
+    const { position, rotation, scale } = getNodeTransformProps(node);
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}
+function decompose(m) {
+    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
+    m.decompose(p, q, s);
+    const e = new Euler().setFromQuaternion(q);
+    return {
+        position: [p.x, p.y, p.z],
+        rotation: [e.x, e.y, e.z],
+        scale: [s.x, s.y, s.z],
+    };
+}
+function getNodeTransformProps(node) {
+    var _a, _b, _c, _d, _e;
+    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    return {
+        position: (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0],
+        rotation: (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0],
+        scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
+    };
 }
-// Helper: render an instanced GameInstance (terminal node)
-function renderInstancedNode(gameObject, worldMatrix, ctx) {
-    var _a, _b, _c, _d;
-    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
-    const wp = new Vector3();
-    const wq = new Quaternion();
-    const ws = new Vector3();
-    worldMatrix.decompose(wp, wq, ws);
-    const we = new Euler().setFromQuaternion(wq);
-    const modelUrl = (_d = (_c = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.filename;
-    return (_jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: [wp.x, wp.y, wp.z], rotation: [we.x, we.y, we.z], scale: [ws.x, ws.y, ws.z], physics: ctx.editMode ? undefined : physics === null || physics === void 0 ? void 0 : physics.properties }));
+function computeParentWorldMatrix(root, targetId) {
+    let result = null;
+    const visit = (node, parent) => {
+        var _a;
+        if (node.id === targetId) {
+            result = parent.clone();
+            return;
+        }
+        const world = parent.clone().multiply(compose(node));
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => !result && visit(c, world));
+    };
+    visit(root, IDENTITY);
+    return result !== null && result !== void 0 ? result : IDENTITY;
 }
-// Helper: render main content for a non-instanced node using the component system
 function renderCoreNode(gameObject, ctx, parentMatrix) {
     var _a, _b, _c;
     const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
     const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
     const model = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
-    const geometryDef = geometry ? getComponent('Geometry') : undefined;
-    const materialDef = material ? getComponent('Material') : undefined;
-    const modelDef = model ? getComponent('Model') : undefined;
-    // Context props for all component Views
+    const geometryDef = geometry && getComponent("Geometry");
+    const materialDef = material && getComponent("Material");
+    const modelDef = model && getComponent("Model");
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,80 +217,36 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    // Collect wrapper and leaf components (excluding transform/physics which are handled separately)
-    const wrapperComponents = [];
-    const leafComponents = [];
+    const wrappers = [];
+    const leaves = [];
     if (gameObject.components) {
         Object.entries(gameObject.components)
-            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
+            .filter(([k]) => !["geometry", "material", "model", "transform", "physics"].includes(k))
             .forEach(([key, comp]) => {
-            if (!comp || !comp.type)
+            if (!(comp === null || comp === void 0 ? void 0 : comp.type))
                 return;
             const def = getComponent(comp.type);
-            if (!def || !def.View)
+            if (!(def === null || def === void 0 ? void 0 : def.View))
                 return;
-            // Components that accept children are wrappers, others are leaves
-            const viewString = def.View.toString();
-            if (viewString.includes('children')) {
-                wrapperComponents.push({ key, View: def.View, properties: comp.properties });
+            // crude but works with your existing component API
+            if (def.View.toString().includes("children")) {
+                wrappers.push({ key, View: def.View, properties: comp.properties });
             }
             else {
-                leafComponents.push(_jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key));
+                leaves.push(_jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key));
             }
         });
     }
-    // Build core content based on what components exist
-    let coreContent;
-    // Priority: Model > Geometry + Material > Empty
-    if (model && modelDef && modelDef.View) {
-        // Model component wraps its children (including material override)
-        coreContent = (_jsxs(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leafComponents] })));
+    let core;
+    if (model && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View)) {
+        core = (_jsxs(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: [material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leaves] })));
     }
-    else if (geometry && geometryDef && geometryDef.View) {
-        // Geometry + Material = mesh
-        coreContent = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && materialDef && materialDef.View && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leafComponents] }));
+    else if (geometry && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
+        core = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leaves] }));
     }
     else {
-        // No visual component - just render leaves
-        coreContent = _jsx(_Fragment, { children: leafComponents });
+        core = _jsx(_Fragment, { children: leaves });
     }
-    // Wrap core content with wrapper components (in order)
-    return wrapperComponents.reduce((content, { key, View, properties }) => {
-        return _jsx(View, Object.assign({ properties: properties }, contextProps, { children: content }), key);
-    }, coreContent);
+    return wrappers.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), core);
 }
 export default PrefabRoot;
-function getNodeTransformProps(node) {
-    var _a, _b, _c, _d, _e;
-    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
-    return {
-        position: (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0],
-        rotation: (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0],
-        scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
-    };
-}
-function computeParentWorldMatrix(root, targetId) {
-    var _a;
-    const identity = new Matrix4();
-    function traverse(node, parentWorld) {
-        if (node.id === targetId) {
-            // parentWorld is what we want
-            return parentWorld.clone();
-        }
-        const { position, rotation, scale } = getNodeTransformProps(node);
-        const localPos = new Vector3(...position);
-        const localRot = new Euler(...rotation);
-        const localScale = new Vector3(...scale);
-        const localMat = new Matrix4().compose(localPos, new Quaternion().setFromEuler(localRot), localScale);
-        const worldMat = parentWorld.clone().multiply(localMat);
-        if (node.children) {
-            for (const child of node.children) {
-                const res = traverse(child, worldMat);
-                if (res)
-                    return res;
-            }
-        }
-        return null;
-    }
-    return (_a = traverse(root, identity)) !== null && _a !== void 0 ? _a : identity;
-}

package/dist/tools/prefabeditor/components/PhysicsComponent.d.ts

@@ -1,3 +1,10 @@
 import { Component } from "./ComponentRegistry";
+export interface PhysicsProps {
+    type: "fixed" | "dynamic";
+    collider?: string;
+    mass?: number;
+    restitution?: number;
+    friction?: number;
+}
 declare const PhysicsComponent: Component;
 export default PhysicsComponent;

package/package.json

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

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useMemo, useRef, useState, useEffect,
 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";
+import { PhysicsProps } from "./components/PhysicsComponent";
 
 // --- Types ---
 export type InstanceData = {
@@ -10,7 +11,7 @@ export type InstanceData = {
     rotation: [number, number, number];
     scale: [number, number, number];
     meshPath: string;
-    physics?: { type: 'dynamic' | 'fixed' };
+    physics?: PhysicsProps | undefined;
 };
 
 // Helper functions for comparison
@@ -374,7 +375,7 @@ export const GameInstance = React.forwardRef<Group, {
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    physics?: { type: 'dynamic' | 'fixed' };
+    physics?: PhysicsProps | undefined;
 }>(({
     id,
     modelUrl,