react-three-game 0.0.17 → 0.0.19

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -1,31 +1,18 @@
 "use client";
 
 import { MapControls, TransformControls } from "@react-three/drei";
-import { useState, useRef, useEffect, forwardRef, useMemo, useCallback } from "react";
-import { Vector3, Euler, Quaternion, ClampToEdgeWrapping, DoubleSide, Group, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
+import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
+import { Vector3, Euler, Quaternion, Group, Object3D, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
 import { Prefab, GameObject as GameObjectType } from "./types";
-import { getComponent } from "./components/ComponentRegistry";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import { ThreeEvent } from "@react-three/fiber";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
-
-// register all components
-import { registerComponent } from './components/ComponentRegistry';
+import { updateNode } from "./utils";
 import components from './components/';
-components.forEach(registerComponent);
 
-function updatePrefabNode(root: GameObjectType, id: string, update: (node: GameObjectType) => GameObjectType): GameObjectType {
-    if (root.id === id) {
-        return update(root);
-    }
-    if (root.children) {
-        return {
-            ...root,
-            children: root.children.map(child => updatePrefabNode(child, id, update))
-        };
-    }
-    return root;
-}
+// Register all components
+components.forEach(registerComponent);
 
 export const PrefabRoot = forwardRef<Group, {
     editMode?: boolean;
@@ -34,29 +21,21 @@ export const PrefabRoot = forwardRef<Group, {
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
-    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
     basePath?: string;
-}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState<Record<string, Object3D>>({});
     const [loadedTextures, setLoadedTextures] = useState<Record<string, Texture>>({});
-    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
     const loadingRefs = useRef<Set<string>>(new Set());
     const objectRefs = useRef<Record<string, Object3D | null>>({});
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId) {
-            setSelectedObject(obj);
-        }
+        if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
     useEffect(() => {
-        if (selectedId) {
-            setSelectedObject(objectRefs.current[selectedId] || null);
-        } else {
-            setSelectedObject(null);
-        }
+        setSelectedObject(selectedId ? objectRefs.current[selectedId] || null : null);
     }, [selectedId]);
 
     const onTransformChange = () => {
@@ -82,10 +61,10 @@ export const PrefabRoot = forwardRef<Group, {
         const le = new Euler().setFromQuaternion(lq);
 
         // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updatePrefabNode(data.root, selectedId, (node) => ({
+        const newRoot = updateNode(data.root, selectedId, (node) => ({
             ...node,
             components: {
-                ...node?.components,
+                ...node.components,
                 transform: {
                     type: "Transform",
                     properties: {
@@ -203,11 +182,12 @@ function GameObjectRenderer({
 
     // Early return if gameObject is null or undefined
     if (!gameObject) return null;
+    if (gameObject.disabled === true || gameObject.hidden === true) return null;
 
-    // Build a small context object to avoid long param lists
+    // 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),
@@ -216,7 +196,7 @@ function GameObjectRenderer({
     );
     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: ThreeEvent<PointerEvent>) => {
         e.stopPropagation();
@@ -233,18 +213,19 @@ function GameObjectRenderer({
         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 = !!gameObject.components?.model?.properties?.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) ---
+    // --- 5. Wrap with physics if needed (except in edit mode) ---
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
+
+    // --- 6. Render children recursively (always relative transforms) ---
     const children = (gameObject.children ?? []).map((child) => (
         <GameObjectRenderer
             key={child.id}
@@ -259,10 +240,7 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 4. Wrap with physics if needed ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-
-    // --- 6. Final group wrapper ---
+    // --- 7. Final group wrapper with local transform ---
     return (
         <group
             ref={(el) => registerRef(gameObject.id, el)}
@@ -300,18 +278,17 @@ function renderInstancedNode(gameObject: GameObjectType, worldMatrix: Matrix4, c
     );
 }
 
-// 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: GameObjectType, ctx: any, parentMatrix: Matrix4 | undefined) {
     const geometry = gameObject.components?.geometry;
     const material = gameObject.components?.material;
-    const modelComp = gameObject.components?.model;
+    const model = gameObject.components?.model;
 
     const geometryDef = geometry ? getComponent('Geometry') : undefined;
     const materialDef = material ? getComponent('Material') : undefined;
+    const modelDef = model ? getComponent('Model') : undefined;
 
-    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-
-    // Generic component views (exclude geometry/material/model/transform/physics)
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -321,20 +298,19 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
         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: Array<{ key: string; View: any; properties: any }> = [];
     const leafComponents: React.ReactNode[] = [];
 
     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 });
@@ -344,49 +320,41 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
             });
     }
 
-    // Build the core content (model or mesh)
+    // Build core content based on what components exist
     let coreContent: React.ReactNode;
 
-    // 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();
+    // Priority: Model > Geometry + Material > Empty
+    if (model && modelDef && modelDef.View) {
+        // Model component wraps its children (including material override)
         coreContent = (
-            <primitive object={modelObj}>
+            <modelDef.View properties={model.properties} {...contextProps}>
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
                 {leafComponents}
-            </primitive>
+            </modelDef.View>
         );
     } else if (geometry && geometryDef && geometryDef.View) {
-        // Otherwise, if geometry present, render a mesh
+        // Geometry + Material = mesh
         coreContent = (
-            <mesh>
-                <geometryDef.View key="geometry" properties={geometry.properties} {...contextProps} />
+            <mesh castShadow receiveShadow>
+                <geometryDef.View properties={geometry.properties} {...contextProps} />
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
                 {leafComponents}
             </mesh>
         );
     } else {
-        // No geometry or model, just render leaf components
+        // No visual component - just render leaves
         coreContent = <>{leafComponents}</>;
     }
 

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

@@ -0,0 +1,317 @@
+import { Component } from "./ComponentRegistry";
+import { useRef, useEffect } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { CameraHelper, DirectionalLight, Object3D, Vector3 } from "three";
+
+function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const props = {
+        color: component.properties.color ?? '#ffffff',
+        intensity: component.properties.intensity ?? 1.0,
+        castShadow: component.properties.castShadow ?? true,
+        shadowMapSize: component.properties.shadowMapSize ?? 1024,
+        shadowCameraNear: component.properties.shadowCameraNear ?? 0.1,
+        shadowCameraFar: component.properties.shadowCameraFar ?? 100,
+        shadowCameraTop: component.properties.shadowCameraTop ?? 30,
+        shadowCameraBottom: component.properties.shadowCameraBottom ?? -30,
+        shadowCameraLeft: component.properties.shadowCameraLeft ?? -30,
+        shadowCameraRight: component.properties.shadowCameraRight ?? 30,
+        targetOffset: component.properties.targetOffset ?? [0, -5, 0]
+    };
+
+    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={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={props.color}
+                    onChange={e => onUpdate({ ...component.properties, 'color': e.target.value })}
+                />
+            </div>
+        </div>
+        <div>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Intensity</label>
+            <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({ ...component.properties, 'intensity': 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>
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Shadow Map Size</label>
+            <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({ ...component.properties, 'shadowMapSize': parseFloat(e.target.value) })}
+            />
+        </div>
+        <div className="border-t border-cyan-500/20 pt-2 mt-2">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">Shadow Camera</label>
+            <div className="grid grid-cols-2 gap-1">
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Near</label>
+                    <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({ ...component.properties, 'shadowCameraNear': parseFloat(e.target.value) })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Far</label>
+                    <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({ ...component.properties, 'shadowCameraFar': parseFloat(e.target.value) })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Top</label>
+                    <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({ ...component.properties, 'shadowCameraTop': parseFloat(e.target.value) })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Bottom</label>
+                    <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({ ...component.properties, 'shadowCameraBottom': parseFloat(e.target.value) })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Left</label>
+                    <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({ ...component.properties, 'shadowCameraLeft': parseFloat(e.target.value) })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Right</label>
+                    <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({ ...component.properties, 'shadowCameraRight': parseFloat(e.target.value) })}
+                    />
+                </div>
+            </div>
+        </div>
+        <div className="border-t border-cyan-500/20 pt-2 mt-2">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">Target Offset</label>
+            <div className="grid grid-cols-3 gap-1">
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">X</label>
+                    <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({
+                            ...component.properties,
+                            'targetOffset': [parseFloat(e.target.value), props.targetOffset[1], props.targetOffset[2]]
+                        })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Y</label>
+                    <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({
+                            ...component.properties,
+                            'targetOffset': [props.targetOffset[0], parseFloat(e.target.value), props.targetOffset[2]]
+                        })}
+                    />
+                </div>
+                <div>
+                    <label className="block text-[8px] text-cyan-400/50 mb-0.5">Z</label>
+                    <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({
+                            ...component.properties,
+                            'targetOffset': [props.targetOffset[0], props.targetOffset[1], parseFloat(e.target.value)]
+                        })}
+                    />
+                </div>
+            </div>
+        </div>
+    </div>;
+}
+
+function DirectionalLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {
+    const color = properties.color ?? '#ffffff';
+    const intensity = properties.intensity ?? 1.0;
+    const castShadow = properties.castShadow ?? true;
+    const shadowMapSize = properties.shadowMapSize ?? 1024;
+    const shadowCameraNear = properties.shadowCameraNear ?? 0.1;
+    const shadowCameraFar = properties.shadowCameraFar ?? 100;
+    const shadowCameraTop = properties.shadowCameraTop ?? 30;
+    const shadowCameraBottom = properties.shadowCameraBottom ?? -30;
+    const shadowCameraLeft = properties.shadowCameraLeft ?? -30;
+    const shadowCameraRight = properties.shadowCameraRight ?? 30;
+    const targetOffset = properties.targetOffset ?? [0, -5, 0];
+
+    const { scene } = useThree();
+    const directionalLightRef = useRef<DirectionalLight>(null);
+    const targetRef = useRef<Object3D>(new Object3D());
+    const cameraHelperRef = useRef<CameraHelper | null>(null);
+
+    // Add target to scene once
+    useEffect(() => {
+        const target = targetRef.current;
+        scene.add(target);
+        return () => {
+            scene.remove(target);
+        };
+    }, [scene]);
+
+    // Set up light target reference once
+    useEffect(() => {
+        if (directionalLightRef.current) {
+            directionalLightRef.current.target = targetRef.current;
+        }
+    }, []);
+
+    // Update target position and mark shadow for update when light moves or offset changes
+    useFrame(() => {
+        if (!directionalLightRef.current) return;
+
+        const lightWorldPos = new Vector3();
+        directionalLightRef.current.getWorldPosition(lightWorldPos);
+
+        const newTargetPos = new Vector3(
+            lightWorldPos.x + targetOffset[0],
+            lightWorldPos.y + targetOffset[1],
+            lightWorldPos.z + targetOffset[2]
+        );
+
+        // Only update if position actually changed
+        if (!targetRef.current.position.equals(newTargetPos)) {
+            targetRef.current.position.copy(newTargetPos);
+            if (directionalLightRef.current.shadow) {
+                directionalLightRef.current.shadow.needsUpdate = true;
+            }
+        }
+
+        // Update camera helper in edit mode
+        if (editMode && cameraHelperRef.current) {
+            cameraHelperRef.current.update();
+        }
+    });
+
+    // Create/destroy camera helper for edit mode
+    useEffect(() => {
+        if (editMode && 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();
+                    cameraHelperRef.current = null;
+                }
+            };
+        }
+    }, [editMode, scene]);
+
+    return (
+        <>
+            <directionalLight
+                ref={directionalLightRef}
+                color={color}
+                intensity={intensity}
+                castShadow={castShadow}
+                shadow-mapSize={[shadowMapSize, shadowMapSize]}
+                shadow-bias={-0.001}
+                shadow-normalBias={0.02}
+            >
+                <orthographicCamera
+                    attach="shadow-camera"
+                    near={shadowCameraNear}
+                    far={shadowCameraFar}
+                    top={shadowCameraTop}
+                    bottom={shadowCameraBottom}
+                    left={shadowCameraLeft}
+                    right={shadowCameraRight}
+                />
+            </directionalLight>
+            {editMode && (
+                <>
+                    {/* Light source indicator */}
+                    <mesh>
+                        <sphereGeometry args={[0.3, 8, 6]} />
+                        <meshBasicMaterial color={color} wireframe />
+                    </mesh>
+                    {/* Target indicator */}
+                    <mesh position={targetOffset as [number, number, number]}>
+                        <sphereGeometry args={[0.2, 8, 6]} />
+                        <meshBasicMaterial color={color} wireframe opacity={0.5} transparent />
+                    </mesh>
+                    {/* Direction line */}
+                    <line>
+                        <bufferGeometry
+                            onUpdate={(geo) => {
+                                const points = [
+                                    new Vector3(0, 0, 0),
+                                    new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
+                                ];
+                                geo.setFromPoints(points);
+                            }}
+                        />
+                        <lineBasicMaterial color={color} opacity={0.6} transparent />
+                    </line>
+                </>
+            )}
+        </>
+    );
+}
+
+const DirectionalLightComponent: Component = {
+    name: 'DirectionalLight',
+    Editor: DirectionalLightComponentEditor,
+    View: DirectionalLightView,
+    defaultProperties: {}
+};
+
+export default DirectionalLightComponent;

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

@@ -47,12 +47,22 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }: { componen
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }: { properties: any, loadedModels?: Record<string, any>, children?: React.ReactNode }) {
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
-    if (!properties.filename || properties.instanced) return children || null;
+    if (!properties.filename || properties.instanced) return <>{children}</>;
+
     if (loadedModels && loadedModels[properties.filename]) {
-        return <>{<primitive object={loadedModels[properties.filename].clone()} />}{children}</>;
+        const clonedModel = loadedModels[properties.filename].clone();
+        // Enable shadows on all meshes in the model
+        clonedModel.traverse((obj: any) => {
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+        });
+        return <primitive object={clonedModel}>{children}</primitive>;
     }
-    // Optionally, render a placeholder if model is not loaded
-    return children || null;
+
+    // Model not loaded yet - render children only
+    return <>{children}</>;
 }
 
 const ModelComponent: Component = {

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

@@ -1,9 +1,7 @@
-
 import { Component } from "./ComponentRegistry";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 
 function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    // Provide default values to prevent NaN
     const props = {
         color: component.properties.color ?? '#ffffff',
         intensity: component.properties.intensity ?? 1.0,
@@ -88,10 +86,7 @@ function SpotLightComponentEditor({ component, onUpdate }: { component: any; onU
     </div>;
 }
 
-
-// The view component for SpotLight
-function SpotLightView({ properties }: { properties: any }) {
-    // Provide defaults in case properties are missing
+function SpotLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {
     const color = properties.color ?? '#ffffff';
     const intensity = properties.intensity ?? 1.0;
     const angle = properties.angle ?? Math.PI / 6;
@@ -99,16 +94,41 @@ function SpotLightView({ properties }: { properties: any }) {
     const distance = properties.distance ?? 100;
     const castShadow = properties.castShadow ?? true;
 
+    const spotLightRef = useRef<any>(null);
+    const targetRef = useRef<any>(null);
+
+    useEffect(() => {
+        if (spotLightRef.current && targetRef.current) {
+            spotLightRef.current.target = targetRef.current;
+        }
+    }, []);
+
     return (
         <>
             <spotLight
+                ref={spotLightRef}
                 color={color}
                 intensity={intensity}
                 angle={angle}
                 penumbra={penumbra}
                 distance={distance}
                 castShadow={castShadow}
+                shadow-bias={-0.0001}
+                shadow-normalBias={0.02}
             />
+            <object3D ref={targetRef} position={[0, -5, 0]} />
+            {editMode && (
+                <>
+                    <mesh>
+                        <sphereGeometry args={[0.2, 8, 6]} />
+                        <meshBasicMaterial color={color} wireframe />
+                    </mesh>
+                    <mesh position={[0, -5, 0]}>
+                        <sphereGeometry args={[0.15, 8, 6]} />
+                        <meshBasicMaterial color={color} wireframe opacity={0.5} transparent />
+                    </mesh>
+                </>
+            )}
         </>
     );
 }