react-three-game 0.0.11 → 0.0.13

package/dist/tools/prefabeditor/EditorTree.js

@@ -136,7 +136,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const hasChildren = node.children && node.children.length > 0;
         return (_jsxs("div", { className: "select-none", children: [_jsxs("div", { className: `flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`, style: { paddingLeft: `${depth * 8 + 4}px` }, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), draggable: node.id !== prefabData.root.id, onDragStart: (e) => handleDragStart(e, node.id), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { className: `mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), _jsx("span", { className: "text-[10px] truncate font-mono text-cyan-300", children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), onPointerLeave: closeContextMenu, children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), onPointerLeave: closeContextMenu, children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
 }
 // --- Helpers ---
 function findNode(root, id) {

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -211,10 +211,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);
         })

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, "target-position": [0, 0, 0], position: [0, 0, 0] }) }));
 }
 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.11",
+  "version": "0.0.13",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/tools/prefabeditor/EditorTree.tsx

@@ -206,11 +206,11 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                     className="fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]"
                     style={{ top: contextMenu.y, left: contextMenu.x }}
                     onClick={(e) => e.stopPropagation()}
+                    onPointerLeave={closeContextMenu}
                 >
                     <button
                         className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
                         onClick={() => handleAddChild(contextMenu.nodeId)}
-                        onPointerLeave={closeContextMenu}
                     >
                         Add Child
                     </button>

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -340,10 +340,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;

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,35 @@ 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}
+                target-position={[0, 0, 0]}
+                position={[0, 0, 0]}
+            />
+        </>
+    );
 }
 
 const SpotLightComponent: Component = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {
-        color: '#ffffff',
-        intensity: 1.0
-    }
+    defaultProperties: {}
 };
 
 export default SpotLightComponent;