react-three-game 0.0.17 → 0.0.18

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

@@ -1,5 +1,5 @@
 import React from "react";
-import * as THREE from 'three';
+import { Object3D, Group } from "three";
 export type InstanceData = {
     id: string;
     position: [number, number, number];
@@ -13,10 +13,10 @@ export type InstanceData = {
 export declare function GameInstanceProvider({ children, models, onSelect, registerRef }: {
     children: React.ReactNode;
     models: {
-        [filename: string]: THREE.Object3D;
+        [filename: string]: Object3D;
     };
     onSelect?: (id: string | null) => void;
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void;
+    registerRef?: (id: string, obj: Object3D | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
@@ -27,4 +27,4 @@ export declare const GameInstance: React.ForwardRefExoticComponent<{
     physics?: {
         type: "dynamic" | "fixed";
     };
-} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,8 +1,9 @@
 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 * as THREE from 'three';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4 } from "three";
+// Helper functions for comparison
 function arrayEquals(a, b) {
     if (a === b)
         return true;
@@ -30,6 +31,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
             if (idx !== -1) {
+                // Update existing if changed
                 if (instanceEquals(prev[idx], instance)) {
                     return prev;
                 }
@@ -37,6 +39,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 copy[idx] = instance;
                 return copy;
             }
+            // Add new
             return [...prev, instance];
         });
     }, []);
@@ -47,14 +50,14 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
             return prev.filter(i => i.id !== id);
         });
     }, []);
-    // Flatten all model meshes once
+    // Flatten all model meshes once (models → flat mesh parts)
     const { flatMeshes, modelParts } = useMemo(() => {
         const flatMeshes = {};
         const modelParts = {};
         Object.entries(models).forEach(([modelKey, model]) => {
             const root = model;
             root.updateWorldMatrix(false, true);
-            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
             let partIndex = 0;
             root.traverse((obj) => {
                 if (obj.isMesh) {
@@ -62,7 +65,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                     const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
                     geom.applyMatrix4(relativeTransform);
                     const partKey = `${modelKey}__${partIndex}`;
-                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
                 }
             });
@@ -70,7 +73,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         });
         return { flatMeshes, modelParts };
     }, [models]);
-    // Group instances by meshPath + physics type
+    // Group instances by meshPath + physics type for batch rendering
     const grouped = useMemo(() => {
         var _a;
         const groups = {};
@@ -104,7 +107,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0)
                     return null;
-                // Restrict meshes to just this model's parts for this Merged
+                // Create mesh subset for this specific model
                 const meshesForModel = {};
                 for (let i = 0; i < partCount; i++) {
                     const partKey = `${modelKey}__${i}`;
@@ -113,7 +116,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 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));
             })] }));
 }
-// Physics instancing stays the same
+// Render physics-enabled instances using InstancedRigidBodies
 function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
     const instances = useMemo(() => group.instances.map(inst => ({
         key: inst.id,
@@ -126,12 +129,17 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
             return (_jsx("instancedMesh", { args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
         }) }));
 }
-// Non-physics instanced visuals: per-instance group using Merged's Instance components
+// Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef }) {
     const clickValid = useRef(false);
-    const handlePointerDown = (e) => { e.stopPropagation(); clickValid.current = true; };
-    const handlePointerMove = () => { if (clickValid.current)
-        clickValid.current = false; };
+    const handlePointerDown = (e) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+    const handlePointerMove = () => {
+        if (clickValid.current)
+            clickValid.current = false;
+    };
     const handlePointerUp = (e, id) => {
         if (clickValid.current) {
             e.stopPropagation();
@@ -146,7 +154,7 @@ function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, on
                 return _jsx(Instance, {}, i);
             }) }, inst.id))) }));
 }
-// --- GameInstance: just registers an instance, renders nothing ---
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
     const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
@@ -167,6 +175,6 @@ export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation
             removeInstance(instance.id);
         };
     }, [addInstance, removeInstance, instance]);
-    // No visual here – provider will render visuals for all instances
+    // No visual rendering - provider handles all instanced visuals
     return null;
 });

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -128,13 +128,15 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     // Early return if gameObject is null or undefined
     if (!gameObject)
         return null;
-    // Build a small context object to avoid long param lists
+    if (gameObject.disabled === true || gameObject.hidden === true)
+        return null;
+    // Build context object for passing to helper functions
     const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
-    // --- 1. Transform (local + world) ---
+    // --- 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);
-    // preserve click/drag detection from previous implementation
+    // --- 2. Handle selection interaction (edit mode only) ---
     const clickValid = useRef(false);
     const handlePointerDown = (e) => {
         e.stopPropagation();
@@ -151,20 +153,18 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
         }
         clickValid.current = false;
     };
-    if (gameObject.disabled === true || gameObject.hidden === true)
-        return null;
-    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    // --- 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);
     }
-    // --- 3. Core content decided by component registry ---
+    // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
-    // --- 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 ---
+    // --- 5. Wrap with physics if needed (except in edit mode) ---
     const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-    // --- 6. Final group wrapper ---
+    // --- 6. 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)));
+    // --- 7. Final group wrapper with local transform ---
     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)
@@ -179,16 +179,16 @@ function renderInstancedNode(gameObject, worldMatrix, ctx) {
     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 }));
 }
-// Helper: render main model/geometry content for a non-instanced node
+// 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 modelComp = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
+    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 isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-    // Generic component views (exclude geometry/material/model/transform/physics)
+    const modelDef = model ? getComponent('Model') : undefined;
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,20 +197,19 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    // Separate wrapper components (that accept children) from leaf components
+    // Collect wrapper and leaf components (excluding transform/physics which are handled separately)
     const wrapperComponents = [];
     const leafComponents = [];
     if (gameObject.components) {
         Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
+            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
             .forEach(([key, comp]) => {
             if (!comp || !comp.type)
                 return;
             const def = getComponent(comp.type);
             if (!def || !def.View)
                 return;
-            // Check if the component View accepts children by checking function signature
-            // Components that wrap content should accept children prop
+            // 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 });
@@ -220,19 +219,19 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
             }
         });
     }
-    // Build the core content (model or mesh)
+    // Build core content based on what components exist
     let coreContent;
-    // If we have a model (non-instanced) render it as a primitive with material override
-    if (isModelAvailable) {
-        const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
-        coreContent = (_jsxs("primitive", { object: modelObj, children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), leafComponents] }));
+    // 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] })));
     }
     else if (geometry && geometryDef && geometryDef.View) {
-        // Otherwise, if geometry present, render a mesh
-        coreContent = (_jsxs("mesh", { children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps), "geometry"), material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), leafComponents] }));
+        // 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 {
-        // No geometry or model, just render leaf components
+        // No visual component - just render leaves
         coreContent = _jsx(_Fragment, { children: leafComponents });
     }
     // Wrap core content with wrapper components (in order)

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

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const DirectionalLightComponent: Component;
+export default DirectionalLightComponent;

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { CameraHelper, Object3D, Vector3 } from "three";
+function DirectionalLightComponentEditor({ component, onUpdate }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    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,
+        castShadow: (_c = component.properties.castShadow) !== null && _c !== void 0 ? _c : true,
+        shadowMapSize: (_d = component.properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024,
+        shadowCameraNear: (_e = component.properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1,
+        shadowCameraFar: (_f = component.properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100,
+        shadowCameraTop: (_g = component.properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30,
+        shadowCameraBottom: (_h = component.properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30,
+        shadowCameraLeft: (_j = component.properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30,
+        shadowCameraRight: (_k = component.properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30,
+        targetOffset: (_l = component.properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0]
+    };
+    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: "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 })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Shadow Map Size" }), _jsx("input", { type: "number", step: "256", 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.shadowMapSize, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowMapSize': parseFloat(e.target.value) })) })] }), _jsxs("div", { className: "border-t border-cyan-500/20 pt-2 mt-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Shadow Camera" }), _jsxs("div", { className: "grid grid-cols-2 gap-1", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Near" }), _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.shadowCameraNear, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraNear': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Far" }), _jsx("input", { type: "number", step: "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.shadowCameraFar, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraFar': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Top" }), _jsx("input", { type: "number", step: "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.shadowCameraTop, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraTop': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Bottom" }), _jsx("input", { type: "number", step: "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.shadowCameraBottom, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraBottom': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Left" }), _jsx("input", { type: "number", step: "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.shadowCameraLeft, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraLeft': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Right" }), _jsx("input", { type: "number", step: "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.shadowCameraRight, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraRight': parseFloat(e.target.value) })) })] })] })] }), _jsxs("div", { className: "border-t border-cyan-500/20 pt-2 mt-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Target Offset" }), _jsxs("div", { className: "grid grid-cols-3 gap-1", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "X" }), _jsx("input", { type: "number", step: "0.5", 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.targetOffset[0], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [parseFloat(e.target.value), props.targetOffset[1], props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Y" }), _jsx("input", { type: "number", step: "0.5", 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.targetOffset[1], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [props.targetOffset[0], parseFloat(e.target.value), props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Z" }), _jsx("input", { type: "number", step: "0.5", 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.targetOffset[2], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [props.targetOffset[0], props.targetOffset[1], parseFloat(e.target.value)] })) })] })] })] })] });
+}
+function DirectionalLightView({ properties, editMode }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
+    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
+    const castShadow = (_c = properties.castShadow) !== null && _c !== void 0 ? _c : true;
+    const shadowMapSize = (_d = properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024;
+    const shadowCameraNear = (_e = properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1;
+    const shadowCameraFar = (_f = properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100;
+    const shadowCameraTop = (_g = properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30;
+    const shadowCameraBottom = (_h = properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30;
+    const shadowCameraLeft = (_j = properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30;
+    const shadowCameraRight = (_k = properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30;
+    const targetOffset = (_l = properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0];
+    const { scene } = useThree();
+    const directionalLightRef = useRef(null);
+    const targetRef = useRef(new Object3D());
+    const lastUpdate = useRef(0);
+    const cameraHelperRef = useRef(null);
+    const lastPositionRef = useRef(new Vector3());
+    // Add target to scene
+    useEffect(() => {
+        if (targetRef.current) {
+            scene.add(targetRef.current);
+            return () => {
+                scene.remove(targetRef.current);
+            };
+        }
+    }, [scene]);
+    // Update target position when light position or offset changes
+    useEffect(() => {
+        if (directionalLightRef.current && targetRef.current) {
+            const lightWorldPos = new Vector3();
+            directionalLightRef.current.getWorldPosition(lightWorldPos);
+            targetRef.current.position.set(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
+            directionalLightRef.current.target = targetRef.current;
+        }
+    });
+    useEffect(() => {
+        // Create camera helper for edit mode and add to scene
+        if (editMode && directionalLightRef.current && directionalLightRef.current.shadow.camera) {
+            const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
+            cameraHelperRef.current = helper;
+            scene.add(helper);
+            return () => {
+                if (cameraHelperRef.current) {
+                    scene.remove(cameraHelperRef.current);
+                    cameraHelperRef.current.dispose();
+                }
+            };
+        }
+    }, [editMode, scene]);
+    useFrame(({ clock }) => {
+        if (!directionalLightRef.current || !directionalLightRef.current.shadow)
+            return;
+        // Disable auto-update for shadows
+        if (directionalLightRef.current.shadow.autoUpdate) {
+            directionalLightRef.current.shadow.autoUpdate = false;
+            directionalLightRef.current.shadow.needsUpdate = true;
+        }
+        // Check if position has changed
+        const currentPosition = new Vector3();
+        directionalLightRef.current.getWorldPosition(currentPosition);
+        const positionChanged = !currentPosition.equals(lastPositionRef.current);
+        if (positionChanged) {
+            lastPositionRef.current.copy(currentPosition);
+            directionalLightRef.current.shadow.needsUpdate = true;
+            lastUpdate.current = clock.elapsedTime; // Reset timer on position change
+        }
+        // Update shadow map infrequently (every 5 seconds) if position hasn't changed
+        if (!editMode && !positionChanged && clock.elapsedTime - lastUpdate.current > 5) {
+            lastUpdate.current = clock.elapsedTime;
+            directionalLightRef.current.shadow.needsUpdate = true;
+        }
+        // Update camera helper in edit mode
+        if (editMode && cameraHelperRef.current) {
+            cameraHelperRef.current.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize": [shadowMapSize, shadowMapSize], "shadow-bias": -0.001, "shadow-normalBias": 0.02, children: _jsx("orthographicCamera", { attach: "shadow-camera", near: shadowCameraNear, far: shadowCameraFar, top: shadowCameraTop, bottom: shadowCameraBottom, left: shadowCameraLeft, right: shadowCameraRight }) }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+                                    const points = [
+                                        new Vector3(0, 0, 0),
+                                        new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
+                                    ];
+                                    geo.setFromPoints(points);
+                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] }))] }));
+}
+const DirectionalLightComponent = {
+    name: 'DirectionalLight',
+    Editor: DirectionalLightComponentEditor,
+    View: DirectionalLightView,
+    defaultProperties: {}
+};
+export default DirectionalLightComponent;

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

@@ -21,12 +21,20 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
 function ModelComponentView({ properties, loadedModels, children }) {
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced)
-        return children || null;
+        return _jsx(_Fragment, { children: children });
     if (loadedModels && loadedModels[properties.filename]) {
-        return _jsxs(_Fragment, { children: [_jsx("primitive", { object: loadedModels[properties.filename].clone() }), children] });
+        const clonedModel = loadedModels[properties.filename].clone();
+        // Enable shadows on all meshes in the model
+        clonedModel.traverse((obj) => {
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+        });
+        return _jsx("primitive", { object: clonedModel, children: children });
     }
-    // Optionally, render a placeholder if model is not loaded
-    return children || null;
+    // Model not loaded yet - render children only
+    return _jsx(_Fragment, { children: children });
 }
 const ModelComponent = {
     name: 'Model',

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 function SpotLightComponentEditor({ component, onUpdate }) {
     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,
@@ -12,17 +12,22 @@ function SpotLightComponentEditor({ component, onUpdate }) {
     };
     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 }) {
+function SpotLightView({ properties, editMode }) {
     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 spotLightRef = useRef(null);
+    const targetRef = useRef(null);
+    useEffect(() => {
+        if (spotLightRef.current && targetRef.current) {
+            spotLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

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

@@ -3,6 +3,7 @@ import TransformComponent from './TransformComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
+import DirectionalLightComponent from './DirectionalLightComponent';
 import ModelComponent from './ModelComponent';
 export default [
     GeometryComponent,
@@ -10,5 +11,6 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    DirectionalLightComponent,
     ModelComponent
 ];

package/dist/tools/prefabeditor/hooks/useModelLoader.d.ts

@@ -0,0 +1,10 @@
+import { Object3D } from 'three';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export declare function useModel(filename: string | undefined): Object3D | null;
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export declare function preloadModel(filename: string): void;

package/dist/tools/prefabeditor/hooks/useModelLoader.js

@@ -0,0 +1,40 @@
+import { useGLTF, useFBX } from '@react-three/drei';
+import { useMemo } from 'react';
+/**
+ * Hook to load a model (GLB/GLTF/FBX) using drei's optimized loaders
+ * Returns the loaded model with proper caching and suspense support
+ */
+export function useModel(filename) {
+    const isFBX = filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.fbx');
+    const isGLTF = (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.glb')) || (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.gltf'));
+    // Normalize path (ensure leading slash)
+    const normalizedPath = useMemo(() => {
+        if (!filename)
+            return '';
+        return filename.startsWith('/') ? filename : `/${filename}`;
+    }, [filename]);
+    // Load models using drei hooks (these handle caching automatically)
+    const gltf = useGLTF(isGLTF && normalizedPath ? normalizedPath : '', true);
+    const fbx = useFBX(isFBX && normalizedPath ? normalizedPath : '');
+    // Return the appropriate model
+    if (!filename)
+        return null;
+    if (isGLTF)
+        return gltf.scene;
+    if (isFBX)
+        return fbx;
+    return null;
+}
+/**
+ * Preload a model to avoid suspense boundaries during runtime
+ */
+export function preloadModel(filename) {
+    const normalizedPath = filename.startsWith('/') ? filename : `/${filename}`;
+    const isFBX = filename.toLowerCase().endsWith('.fbx');
+    if (isFBX) {
+        useFBX.preload(normalizedPath);
+    }
+    else {
+        useGLTF.preload(normalizedPath);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
     "@react-three/rapier": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "three": ">=0.181.0"
+    "three": ">=0.182.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",
@@ -34,7 +34,7 @@
     "concurrently": "^9.2.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "three": "^0.181.2",
+    "three": "^0.182.0",
     "typescript": "^5.9.3"
   }
 }