react-three-game 0.0.12 → 0.0.14

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -75,17 +75,14 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         localMatrix.decompose(lp, lq, ls);
         const le = new Euler().setFromQuaternion(lq);
         // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updatePrefabNode(data.root, selectedId, (node) => {
-            var _a, _b, _c;
-            return (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : 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],
-                        },
-                    }, geometry: (_a = node.components) === null || _a === void 0 ? void 0 : _a.geometry, material: (_b = node.components) === null || _b === void 0 ? void 0 : _b.material, model: (_c = node.components) === null || _c === void 0 ? void 0 : _c.model }) }));
-        });
+        const newRoot = updatePrefabNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : 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],
+                    },
+                } }) })));
         onPrefabChange(Object.assign(Object.assign({}, data), { root: newRoot }));
     };
     useEffect(() => {
@@ -173,11 +170,11 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     // --- 5. Render children (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)));
     // --- 4. Wrap with physics if needed ---
-    // Combine core and children so they both get wrapped by physics (if present)
-    const content = (_jsxs(_Fragment, { children: [core, children] }));
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, content, ctx);
+    // Only wrap the core content (geometry/model), not children
+    // Children should be siblings, not inside the physics body
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
     // --- 6. Final group wrapper ---
-    return (_jsx("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: physicsWrapped }));
+    return (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [physicsWrapped, children] }));
 }
 // Helper: render an instanced GameInstance (terminal node)
 function renderInstancedNode(gameObject, worldMatrix, ctx) {
@@ -211,10 +208,12 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     };
     const allComponentViews = gameObject.components
         ? Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model')
+            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
             .map(([key, comp]) => {
-            const def = getComponent(key);
-            if (!def || !def.View || !comp)
+            if (!comp || !comp.type)
+                return null;
+            const def = getComponent(comp.type);
+            if (!def || !def.View)
                 return null;
             return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
         })
@@ -240,7 +239,7 @@ function wrapPhysicsIfNeeded(gameObject, content, ctx) {
     const physicsDef = getComponent('Physics');
     if (!physicsDef || !physicsDef.View)
         return content;
-    return (_jsx(physicsDef.View, { properties: Object.assign(Object.assign({}, physics.properties), { id: gameObject.id }), registerRef: ctx.registerRef, editMode: ctx.editMode, children: content }));
+    return (_jsx(physicsDef.View, { properties: Object.assign(Object.assign({}, physics.properties), { id: gameObject.id }), editMode: ctx.editMode, children: content }));
 }
 export default PrefabRoot;
 function getNodeTransformProps(node) {

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

@@ -3,10 +3,10 @@ function PhysicsComponentEditor({ component, onUpdate }) {
     return _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Type" }), _jsxs("select", { className: "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", value: component.properties.type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] });
 }
 import { RigidBody } from "@react-three/rapier";
-function PhysicsComponentView({ properties, children, registerRef, transform, editMode }) {
+function PhysicsComponentView({ properties, children, editMode }) {
     if (editMode)
         return children;
-    return (_jsx(RigidBody, { ref: el => registerRef && registerRef(properties.id, el), position: transform === null || transform === void 0 ? void 0 : transform.position, rotation: transform === null || transform === void 0 ? void 0 : transform.rotation, scale: transform === null || transform === void 0 ? void 0 : transform.scale, type: properties.type, colliders: "cuboid", children: children }));
+    return (_jsx(RigidBody, { type: properties.type, colliders: "cuboid", children: children }));
 }
 const PhysicsComponent = {
     name: 'Physics',

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

@@ -1,19 +1,33 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function SpotLightComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 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", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "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", value: component.properties.intensity, onChange: e => onUpdate({ 'intensity': parseFloat(e.target.value) }) })] })] });
+    var _a, _b, _c, _d, _e, _f;
+    // Provide default values to prevent NaN
+    const props = {
+        color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
+        intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
+        angle: (_c = component.properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6,
+        penumbra: (_d = component.properties.penumbra) !== null && _d !== void 0 ? _d : 0.5,
+        distance: (_e = component.properties.distance) !== null && _e !== void 0 ? _e : 100,
+        castShadow: (_f = component.properties.castShadow) !== null && _f !== void 0 ? _f : true
+    };
+    return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) }), _jsx("input", { type: "text", className: "flex-1 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", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "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", value: props.intensity, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'intensity': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Angle" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: Math.PI, className: "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", value: props.angle, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'angle': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Penumbra" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: "1", className: "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", value: props.penumbra, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'penumbra': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Distance" }), _jsx("input", { type: "number", step: "1", min: "0", className: "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", value: props.distance, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'distance': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Cast Shadow" }), _jsx("input", { type: "checkbox", className: "h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer", checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'castShadow': e.target.checked })) })] })] });
 }
 // The view component for SpotLight
 function SpotLightView({ properties }) {
-    // You can expand this with more spotlight properties as needed
-    return _jsx("spotLight", { color: properties.color, intensity: properties.intensity });
+    var _a, _b, _c, _d, _e, _f;
+    // Provide defaults in case properties are missing
+    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
+    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
+    const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
+    const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
+    const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
+    const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
+    return (_jsx(_Fragment, { children: _jsx("spotLight", { color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow }) }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {
-        color: '#ffffff',
-        intensity: 1.0
-    }
+    defaultProperties: {}
 };
 export default SpotLightComponent;

package/package.json

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

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -103,9 +103,6 @@ export const PrefabRoot = forwardRef<Group, {
                         scale: [ls.x, ls.y, ls.z] as [number, number, number],
                     },
                 },
-                geometry: node.components?.geometry,
-                material: node.components?.material,
-                model: node.components?.model,
             },
         }));
 
@@ -272,14 +269,9 @@ function GameObjectRenderer({
     ));
 
     // --- 4. Wrap with physics if needed ---
-    // Combine core and children so they both get wrapped by physics (if present)
-    const content = (
-        <>
-            {core}
-            {children}
-        </>
-    );
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, content, ctx);
+    // Only wrap the core content (geometry/model), not children
+    // Children should be siblings, not inside the physics body
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
 
     // --- 6. Final group wrapper ---
     return (
@@ -293,6 +285,7 @@ function GameObjectRenderer({
             onPointerUp={handlePointerUp}
         >
             {physicsWrapped}
+            {children}
         </group>
     );
 }
@@ -340,10 +333,11 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
     };
     const allComponentViews = gameObject.components
         ? Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model')
+            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
             .map(([key, comp]) => {
-                const def = getComponent(key);
-                if (!def || !def.View || !comp) return null;
+                if (!comp || !comp.type) return null;
+                const def = getComponent(comp.type);
+                if (!def || !def.View) return null;
                 return <def.View key={key} properties={comp.properties} {...contextProps} />;
             })
         : null;
@@ -403,7 +397,6 @@ function wrapPhysicsIfNeeded(gameObject: GameObjectType, content: React.ReactNod
     return (
         <physicsDef.View
             properties={{ ...physics.properties, id: gameObject.id }}
-            registerRef={ctx.registerRef}
             editMode={ctx.editMode}
         >
             {content}

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

@@ -16,17 +16,11 @@ function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpd
 
 
 import { RigidBody } from "@react-three/rapier";
-import { Object3D } from "three";
-import { useRef } from "react";
 
-function PhysicsComponentView({ properties, children, registerRef, transform, editMode }: any) {
+function PhysicsComponentView({ properties, children, editMode }: any) {
     if (editMode) return children;
     return (
         <RigidBody
-            ref={el => registerRef && registerRef(properties.id, el as unknown as Object3D)}
-            position={transform?.position}
-            rotation={transform?.rotation}
-            scale={transform?.scale}
             type={properties.type}
             colliders="cuboid"
         >

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

@@ -1,22 +1,33 @@
 
 import { Component } from "./ComponentRegistry";
+import { useRef } from "react";
 
 function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    return <div className="flex flex-col">
-        <div className="mb-1">
+    // Provide default values to prevent NaN
+    const props = {
+        color: component.properties.color ?? '#ffffff',
+        intensity: component.properties.intensity ?? 1.0,
+        angle: component.properties.angle ?? Math.PI / 6,
+        penumbra: component.properties.penumbra ?? 0.5,
+        distance: component.properties.distance ?? 100,
+        castShadow: component.properties.castShadow ?? true
+    };
+
+    return <div className="flex flex-col gap-2">
+        <div>
             <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Color</label>
             <div className="flex gap-0.5">
                 <input
                     type="color"
                     className="h-5 w-5 bg-transparent border-none cursor-pointer"
-                    value={component.properties.color}
-                    onChange={e => onUpdate({ 'color': e.target.value })}
+                    value={props.color}
+                    onChange={e => onUpdate({ ...component.properties, 'color': e.target.value })}
                 />
                 <input
                     type="text"
                     className="flex-1 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"
-                    value={component.properties.color}
-                    onChange={e => onUpdate({ 'color': e.target.value })}
+                    value={props.color}
+                    onChange={e => onUpdate({ ...component.properties, 'color': e.target.value })}
                 />
             </div>
         </div>
@@ -26,8 +37,52 @@ function SpotLightComponentEditor({ component, onUpdate }: { component: any; onU
                 type="number"
                 step="0.1"
                 className="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"
-                value={component.properties.intensity}
-                onChange={e => onUpdate({ 'intensity': parseFloat(e.target.value) })}
+                value={props.intensity}
+                onChange={e => onUpdate({ ...component.properties, 'intensity': parseFloat(e.target.value) })}
+            />
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Angle</label>
+            <input
+                type="number"
+                step="0.1"
+                min="0"
+                max={Math.PI}
+                className="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"
+                value={props.angle}
+                onChange={e => onUpdate({ ...component.properties, 'angle': parseFloat(e.target.value) })}
+            />
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Penumbra</label>
+            <input
+                type="number"
+                step="0.1"
+                min="0"
+                max="1"
+                className="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"
+                value={props.penumbra}
+                onChange={e => onUpdate({ ...component.properties, 'penumbra': parseFloat(e.target.value) })}
+            />
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Distance</label>
+            <input
+                type="number"
+                step="1"
+                min="0"
+                className="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"
+                value={props.distance}
+                onChange={e => onUpdate({ ...component.properties, 'distance': parseFloat(e.target.value) })}
+            />
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Cast Shadow</label>
+            <input
+                type="checkbox"
+                className="h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer"
+                checked={props.castShadow}
+                onChange={e => onUpdate({ ...component.properties, 'castShadow': e.target.checked })}
             />
         </div>
     </div>;
@@ -36,18 +91,33 @@ function SpotLightComponentEditor({ component, onUpdate }: { component: any; onU
 
 // The view component for SpotLight
 function SpotLightView({ properties }: { properties: any }) {
-    // You can expand this with more spotlight properties as needed
-    return <spotLight color={properties.color} intensity={properties.intensity} />;
+    // Provide defaults in case properties are missing
+    const color = properties.color ?? '#ffffff';
+    const intensity = properties.intensity ?? 1.0;
+    const angle = properties.angle ?? Math.PI / 6;
+    const penumbra = properties.penumbra ?? 0.5;
+    const distance = properties.distance ?? 100;
+    const castShadow = properties.castShadow ?? true;
+
+    return (
+        <>
+            <spotLight
+                color={color}
+                intensity={intensity}
+                angle={angle}
+                penumbra={penumbra}
+                distance={distance}
+                castShadow={castShadow}
+            />
+        </>
+    );
 }
 
 const SpotLightComponent: Component = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {
-        color: '#ffffff',
-        intensity: 1.0
-    }
+    defaultProperties: {}
 };
 
 export default SpotLightComponent;