react-three-game 0.0.16 → 0.0.18

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

@@ -0,0 +1,332 @@
+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 lastUpdate = useRef(0);
+    const cameraHelperRef = useRef<CameraHelper | null>(null);
+    const lastPositionRef = useRef<Vector3>(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 (
+        <>
+            <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>
+                </>
+            )}
         </>
     );
 }

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

@@ -1,8 +1,54 @@
 
 import { Component } from "./ComponentRegistry";
 
-function TransformComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }: {
+    component: any;
+    onUpdate: (newComp: any) => void;
+    transformMode?: "translate" | "rotate" | "scale";
+    setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
+}) {
+    const s = {
+        button: {
+            padding: '2px 6px',
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        buttonActive: {
+            background: 'rgba(255,255,255,0.10)',
+        },
+    };
+
     return <div className="flex flex-col">
+        {transformMode && setTransformMode && (
+            <div className="mb-2">
+                <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">Transform Mode</label>
+                <div style={{ display: 'flex', gap: 6 }}>
+                    {["translate", "rotate", "scale"].map(mode => (
+                        <button
+                            key={mode}
+                            onClick={() => setTransformMode(mode as any)}
+                            style={{
+                                ...s.button,
+                                flex: 1,
+                                ...(transformMode === mode ? s.buttonActive : {}),
+                            }}
+                            onPointerEnter={(e) => {
+                                if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.08)';
+                            }}
+                            onPointerLeave={(e) => {
+                                if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
+                            }}
+                        >
+                            {mode}
+                        </button>
+                    ))}
+                </div>
+            </div>
+        )}
         <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} />
         <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} />
         <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} />
@@ -29,21 +75,28 @@ export function Vector3Input({ label, value, onChange }: { label: string, value:
         onChange(newValue);
     };
 
-    return <div className="mb-1">
-        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">{label}</label>
-        <div className="flex gap-0.5">
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono">X</span>
-                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[0]} onChange={e => handleChange(0, e.target.value)} />
-            </div>
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono">Y</span>
-                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[1]} onChange={e => handleChange(1, e.target.value)} />
-            </div>
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono">Z</span>
-                <input className="w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50" type="number" step="0.1" value={value[2]} onChange={e => handleChange(2, e.target.value)} />
-            </div>
+    const axes = [
+        { key: 'x', color: 'red', index: 0 },
+        { key: 'y', color: 'green', index: 1 },
+        { key: 'z', color: 'blue', index: 2 }
+    ] as const;
+
+    return <div className="mb-2">
+        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">{label}</label>
+        <div className="flex gap-1">
+            {axes.map(({ key, color, index }) => (
+                <div key={key} className="flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]">
+                    <span className={`text-xs font-bold text-${color}-400 w-3`}>{key.toUpperCase()}</span>
+                    <input
+                        className="flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0"
+                        type="number"
+                        step="0.1"
+                        value={value[index].toFixed(2)}
+                        onChange={e => handleChange(index, e.target.value)}
+                        onFocus={e => e.target.select()}
+                    />
+                </div>
+            ))}
         </div>
     </div>
 }

package/src/tools/prefabeditor/components/index.ts

@@ -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 [
@@ -11,6 +12,7 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    DirectionalLightComponent,
     ModelComponent
 ];