react-three-game 0.0.17 → 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/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
 ];