react-three-game 0.0.21 → 0.0.23

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

@@ -1,7 +1,7 @@
 import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import { CameraHelper, DirectionalLight, Object3D, Vector3 } from "three";
+import { useFrame } from "@react-three/fiber";
+import { DirectionalLight, Object3D, Vector3 } from "three";
 
 function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
     const props = {
@@ -190,71 +190,31 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
     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);
+    const targetRef = useRef<Object3D>(null);
 
-    // Add target to scene once
+    // Set up light target reference when both refs are ready
     useEffect(() => {
-        const target = targetRef.current;
-        scene.add(target);
-        return () => {
-            scene.remove(target);
-        };
-    }, [scene]);
-
-    // Set up light target reference once
-    useEffect(() => {
-        if (directionalLightRef.current) {
+        if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
         }
     }, []);
 
-    // Update target position and mark shadow for update when light moves or offset changes
+    // Update target world position based on light position + offset
     useFrame(() => {
-        if (!directionalLightRef.current) return;
+        if (!directionalLightRef.current || !targetRef.current) return;
 
         const lightWorldPos = new Vector3();
         directionalLightRef.current.getWorldPosition(lightWorldPos);
 
-        const newTargetPos = new Vector3(
+        // Target is positioned relative to light's world position
+        targetRef.current.position.set(
             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
@@ -262,20 +222,19 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
                 color={color}
                 intensity={intensity}
                 castShadow={castShadow}
-                shadow-mapSize={[shadowMapSize, shadowMapSize]}
+                shadow-mapSize-width={shadowMapSize}
+                shadow-mapSize-height={shadowMapSize}
+                shadow-camera-near={shadowCameraNear}
+                shadow-camera-far={shadowCameraFar}
+                shadow-camera-top={shadowCameraTop}
+                shadow-camera-bottom={shadowCameraBottom}
+                shadow-camera-left={shadowCameraLeft}
+                shadow-camera-right={shadowCameraRight}
                 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>
+            />
+            {/* Target object - rendered declaratively in scene graph */}
+            <object3D ref={targetRef} />
             {editMode && (
                 <>
                     {/* Light source indicator */}

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

@@ -130,14 +130,16 @@ function MaterialComponentView({ properties, loadedTextures, isSelected }: { pro
     const { color, wireframe = false } = properties;
     const displayColor = isSelected ? "cyan" : color;
 
-    return <meshStandardMaterial
-        key={finalTexture?.uuid ?? 'no-texture'}
-        color={displayColor}
-        wireframe={wireframe}
-        map={finalTexture}
-        transparent={!!finalTexture}
-        side={DoubleSide}
-    />;
+    return (
+        <meshStandardMaterial
+            key={finalTexture?.uuid ?? 'no-texture'}
+            color={displayColor}
+            wireframe={wireframe}
+            map={finalTexture}
+            transparent={!!finalTexture}
+            side={DoubleSide}
+        />
+    );
 }
 
 const MaterialComponent: Component = {

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

@@ -1,5 +1,5 @@
 import { ModelListViewer } from '../../assetviewer/page';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Component } from './ComponentRegistry';
 
 function ModelComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
@@ -49,20 +49,24 @@ function ModelComponentView({ properties, loadedModels, children }: { properties
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced) return <>{children}</>;
 
-    if (loadedModels && loadedModels[properties.filename]) {
-        const clonedModel = loadedModels[properties.filename].clone();
-        // Enable shadows on all meshes in the model
-        clonedModel.traverse((obj: any) => {
+    const sourceModel = loadedModels?.[properties.filename];
+
+    // Clone model once and set up shadows - memoized to avoid cloning on every render
+    const clonedModel = useMemo(() => {
+        if (!sourceModel) return null;
+        const clone = sourceModel.clone();
+        clone.traverse((obj: any) => {
             if (obj.isMesh) {
                 obj.castShadow = true;
                 obj.receiveShadow = true;
             }
         });
-        return <primitive object={clonedModel}>{children}</primitive>;
-    }
+        return clone;
+    }, [sourceModel]);
+
+    if (!clonedModel) return <>{children}</>;
 
-    // Model not loaded yet - render children only
-    return <>{children}</>;
+    return <primitive object={clonedModel}>{children}</primitive>;
 }
 
 const ModelComponent: Component = {

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

@@ -1,4 +1,4 @@
-import { RigidBody, RigidBodyProps } from "@react-three/rapier";
+import { RigidBody } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 
 const selectClass = "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";
@@ -25,18 +25,19 @@ function PhysicsComponentEditor({ component, onUpdate }: { component: any; onUpd
     );
 }
 
-interface PhysicsViewProps extends Omit<RigidBodyProps, 'type' | 'colliders'> {
-    properties: { type: RigidBodyProps['type']; collider?: string };
+interface PhysicsViewProps {
+    properties: { type: 'dynamic' | 'fixed'; collider?: string };
     editMode?: boolean;
+    children?: React.ReactNode;
 }
 
-function PhysicsComponentView({ properties, editMode, children, ...rigidBodyProps }: PhysicsViewProps) {
+function PhysicsComponentView({ properties, editMode, children }: PhysicsViewProps) {
     if (editMode) return <>{children}</>;
 
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
 
     return (
-        <RigidBody type={properties.type} colliders={colliders as any} {...rigidBodyProps}>
+        <RigidBody type={properties.type} colliders={colliders as any}>
             {children}
         </RigidBody>
     );

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

@@ -113,6 +113,8 @@ function SpotLightView({ properties, editMode }: { properties: any; editMode?: b
                 penumbra={penumbra}
                 distance={distance}
                 castShadow={castShadow}
+                shadow-mapSize-width={1024}
+                shadow-mapSize-height={1024}
                 shadow-bias={-0.0001}
                 shadow-normalBias={0.02}
             />