react-three-game 0.0.57 → 0.0.58

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

@@ -1,16 +1,26 @@
-import { PerspectiveCamera, useHelper } from '@react-three/drei';
-import { useRef } from 'react';
+import { PerspectiveCamera } from '@react-three/drei';
+import { useEffect, useMemo, useState } from 'react';
 import { CameraHelper, PerspectiveCamera as ThreePerspectiveCamera } from 'three';
+import { useFrame } from '@react-three/fiber';
 import { Component } from './ComponentRegistry';
 import { FieldGroup, NumberField } from './Input';
 
+const cameraDefaults = {
+    fov: 50,
+    near: 0.1,
+    zoom: 1,
+    far: 1000,
+};
+
 function CameraComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const values = { ...cameraDefaults, ...component.properties };
+
     return (
         <FieldGroup>
             <NumberField
                 name="fov"
                 label="FOV"
-                values={component.properties}
+                values={values}
                 onChange={onUpdate}
                 fallback={50}
                 min={1}
@@ -20,7 +30,7 @@ function CameraComponentEditor({ component, onUpdate }: { component: any; onUpda
             <NumberField
                 name="near"
                 label="Near"
-                values={component.properties}
+                values={values}
                 onChange={onUpdate}
                 fallback={0.1}
                 min={0.001}
@@ -29,7 +39,7 @@ function CameraComponentEditor({ component, onUpdate }: { component: any; onUpda
             <NumberField
                 name="zoom"
                 label="Zoom"
-                values={component.properties}
+                values={values}
                 onChange={onUpdate}
                 fallback={1}
                 min={0.01}
@@ -38,7 +48,7 @@ function CameraComponentEditor({ component, onUpdate }: { component: any; onUpda
             <NumberField
                 name="far"
                 label="Far"
-                values={component.properties}
+                values={values}
                 onChange={onUpdate}
                 fallback={1000}
                 min={0.1}
@@ -49,17 +59,44 @@ function CameraComponentEditor({ component, onUpdate }: { component: any; onUpda
 }
 
 function CameraComponentView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
-    const fov = properties?.fov ?? 50;
-    const near = properties?.near ?? 0.1;
-    const zoom = properties?.zoom ?? 1;
-    const far = properties?.far ?? 1000;
-    const cameraRef = useRef<ThreePerspectiveCamera>(null);
+    const merged = { ...cameraDefaults, ...properties };
+    const fov = merged.fov;
+    const near = merged.near;
+    const zoom = merged.zoom;
+    const far = merged.far;
+    const [camera, setCamera] = useState<ThreePerspectiveCamera | null>(null);
+    const cameraHelper = useMemo(
+        () => camera ? new CameraHelper(camera) : null,
+        [camera]
+    );
+
+    useEffect(() => {
+        return () => {
+            cameraHelper?.dispose();
+        };
+    }, [cameraHelper]);
 
-    useHelper(editMode && isSelected ? (cameraRef as React.RefObject<ThreePerspectiveCamera>) : null, CameraHelper);
+    useFrame(() => {
+        if (camera && cameraHelper && editMode && isSelected) {
+            camera.updateProjectionMatrix();
+            camera.updateMatrixWorld();
+            cameraHelper.update();
+        }
+    });
 
     return (
         <>
-            <PerspectiveCamera ref={cameraRef} makeDefault={!editMode} fov={fov} near={near} zoom={zoom} far={far} />
+            <PerspectiveCamera
+                ref={(instance) => setCamera(instance)}
+                makeDefault={!editMode}
+                fov={fov}
+                near={near}
+                zoom={zoom}
+                far={far}
+            />
+            {editMode && isSelected && cameraHelper && (
+                <primitive object={cameraHelper} />
+            )}
             {editMode && !isSelected ? (
                 <mesh>
                     <boxGeometry args={[0.34, 0.22, 0.18]} />
@@ -74,7 +111,7 @@ const CameraComponent: Component = {
     name: 'Camera',
     Editor: CameraComponentEditor,
     View: CameraComponentView,
-    defaultProperties: {},
+    defaultProperties: cameraDefaults,
 };
 
 export default CameraComponent;

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

@@ -1,11 +1,25 @@
 import { Component } from "./ComponentRegistry";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
-import { DirectionalLight, Object3D, Vector3 } from "three";
+import { CameraHelper, DirectionalLight, Object3D, OrthographicCamera, Vector3 } from "three";
 import { FieldRenderer, FieldDefinition, Input } from "./Input";
 
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 } as const;
 
+const directionalLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    castShadow: true,
+    shadowMapSize: 1024,
+    shadowCameraNear: 0.1,
+    shadowCameraFar: 100,
+    shadowCameraTop: 30,
+    shadowCameraBottom: -30,
+    shadowCameraLeft: -30,
+    shadowCameraRight: 30,
+    targetOffset: [0, -5, 0],
+};
+
 const directionalLightFields: FieldDefinition[] = [
     { name: 'color', type: 'color', label: 'Color' },
     { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
@@ -71,51 +85,66 @@ const directionalLightFields: FieldDefinition[] = [
 ];
 
 function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const values = { ...directionalLightDefaults, ...component.properties };
+    const fields = values.castShadow
+        ? directionalLightFields
+        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
+
     return (
         <FieldRenderer
-            fields={directionalLightFields}
-            values={component.properties}
+            fields={fields}
+            values={values}
             onChange={onUpdate}
         />
     );
 }
 
 function DirectionalLightView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: 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 merged = { ...directionalLightDefaults, ...properties };
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const castShadow = merged.castShadow;
+    const shadowMapSize = merged.shadowMapSize;
+    const shadowCameraNear = merged.shadowCameraNear;
+    const shadowCameraFar = merged.shadowCameraFar;
+    const shadowCameraTop = merged.shadowCameraTop;
+    const shadowCameraBottom = merged.shadowCameraBottom;
+    const shadowCameraLeft = merged.shadowCameraLeft;
+    const shadowCameraRight = merged.shadowCameraRight;
+    const targetOffset = merged.targetOffset;
 
     const directionalLightRef = useRef<DirectionalLight>(null);
     const targetRef = useRef<Object3D>(null);
+    const [shadowCamera, setShadowCamera] = useState<OrthographicCamera | null>(null);
+    const shadowCameraHelper = useMemo(
+        () => shadowCamera ? new CameraHelper(shadowCamera) : null,
+        [shadowCamera]
+    );
 
-    // Set up light target reference when both refs are ready
+    useEffect(() => {
+        return () => {
+            shadowCameraHelper?.dispose();
+        };
+    }, [shadowCameraHelper]);
+
+    // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
+            setShadowCamera(directionalLightRef.current.shadow.camera);
         }
     }, []);
 
-    // Update target world position based on light position + offset
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current) return;
 
-        const lightWorldPos = new Vector3();
-        directionalLightRef.current.getWorldPosition(lightWorldPos);
+        directionalLightRef.current.target.updateMatrixWorld();
 
-        // 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]
-        );
+        if (shadowCamera && shadowCameraHelper && castShadow) {
+            shadowCamera.updateProjectionMatrix();
+            shadowCamera.updateMatrixWorld();
+            shadowCameraHelper.update();
+        }
     });
 
     return (
@@ -136,8 +165,10 @@ function DirectionalLightView({ properties, editMode, isSelected }: { properties
                 shadow-bias={-0.001}
                 shadow-normalBias={0.02}
             />
-            {/* Target object - rendered declaratively in scene graph */}
-            <object3D ref={targetRef} />
+            <object3D ref={targetRef} position={targetOffset as [number, number, number]} />
+            {editMode && isSelected && castShadow && shadowCameraHelper && (
+                <primitive object={shadowCameraHelper} />
+            )}
             {editMode && isSelected && (
                 <>
                     {/* Light source indicator */}
@@ -173,7 +204,7 @@ const DirectionalLightComponent: Component = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: {}
+    defaultProperties: directionalLightDefaults
 };
 
 export default DirectionalLightComponent;

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

@@ -1,10 +1,13 @@
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
+import { extend } from '@react-three/fiber';
+import type { ThreeElement } from '@react-three/fiber';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Component } from './ComponentRegistry';
 import { FieldRenderer, FieldDefinition, Input } from './Input';
 import { colors } from '../styles';
 import { useMemo } from 'react';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
 import {
     RepeatWrapping,
     ClampToEdgeWrapping,
@@ -27,6 +30,13 @@ import {
     DoubleSide,
 } from 'three';
 
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        meshBasicNodeMaterial: ThreeElement<typeof MeshBasicNodeMaterial>;
+        meshStandardNodeMaterial: ThreeElement<typeof MeshStandardNodeMaterial>;
+    }
+}
+
 export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
     materialType?: 'standard' | 'basic';
     transmission?: number;
@@ -44,6 +54,10 @@ export interface MaterialProps extends Omit<MeshStandardMaterialProperties & Mes
 
 const PICKER_POPUP_WIDTH = 260;
 const PICKER_POPUP_HEIGHT = 360;
+extend({
+    MeshBasicNodeMaterial,
+    MeshStandardNodeMaterial,
+});
 
 function TexturePicker({
     value,
@@ -321,11 +335,6 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
         normalScale: _normalScale,
         normalMap: _normalMap,
         side: sideProp,
-        metalness: _metalness,
-        roughness: _roughness,
-        transmission: _transmission,
-        thickness: _thickness,
-        ior: _ior,
         ...materialProps
     } = materialSource;
 
@@ -378,10 +387,10 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
     }, [finalNormalMap, normalScaleProp?.[0], normalScaleProp?.[1]]);
 
     if (!properties) {
-        return <meshStandardMaterial color="red" wireframe />;
+        return <meshStandardNodeMaterial color="red" wireframe />;
     }
 
-    const materialKey = finalTexture?.uuid ?? 'no-texture';
+    const materialKey = `${finalTexture?.uuid ?? 'no-texture'}:${materialProps.transparent ? 'transparent' : 'opaque'}`;
     const sharedProps = {
         map: finalTexture,
         side: resolvedSide,
@@ -389,11 +398,11 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
     };
 
     if (materialType === 'basic') {
-        return <meshBasicMaterial key={materialKey} {...sharedProps} />;
+        return <meshBasicNodeMaterial key={materialKey} {...sharedProps} />;
     }
 
     return (
-        <meshStandardMaterial
+        <meshStandardNodeMaterial
             key={materialKey}
             {...sharedProps}
             normalMap={finalNormalMap}

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

@@ -1,41 +1,69 @@
 import { Component } from "./ComponentRegistry";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
-import { useHelper } from "@react-three/drei";
-import { SpotLightHelper } from "three";
+import { SpotLight, SpotLightHelper } from "three";
+import { useFrame } from "@react-three/fiber";
+
+const spotLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    angle: Math.PI / 6,
+    penumbra: 0.5,
+    distance: 100,
+    castShadow: true,
+};
 
 function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const values = { ...spotLightDefaults, ...component.properties };
+
     return (
         <FieldGroup>
-            <ColorField name="color" label="Color" values={component.properties} onChange={onUpdate} />
-            <NumberField name="intensity" label="Intensity" values={component.properties} onChange={onUpdate} min={0} step={0.1} fallback={1} />
-            <NumberField name="angle" label="Angle" values={component.properties} onChange={onUpdate} min={0} max={Math.PI} step={0.05} fallback={Math.PI / 6} />
-            <NumberField name="penumbra" label="Penumbra" values={component.properties} onChange={onUpdate} min={0} max={1} step={0.05} fallback={0.5} />
-            <NumberField name="distance" label="Distance" values={component.properties} onChange={onUpdate} min={0} step={1} fallback={100} />
-            <BooleanField name="castShadow" label="Cast Shadow" values={component.properties} onChange={onUpdate} fallback={true} />
+            <ColorField name="color" label="Color" values={values} onChange={onUpdate} />
+            <NumberField name="intensity" label="Intensity" values={values} onChange={onUpdate} min={0} step={0.1} fallback={1} />
+            <NumberField name="angle" label="Angle" values={values} onChange={onUpdate} min={0} max={Math.PI} step={0.05} fallback={Math.PI / 6} />
+            <NumberField name="penumbra" label="Penumbra" values={values} onChange={onUpdate} min={0} max={1} step={0.05} fallback={0.5} />
+            <NumberField name="distance" label="Distance" values={values} onChange={onUpdate} min={0} step={1} fallback={100} />
+            <BooleanField name="castShadow" label="Cast Shadow" values={values} onChange={onUpdate} fallback={true} />
         </FieldGroup>
     );
 }
 
 function SpotLightView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
-    const color = properties.color ?? '#ffffff';
-    const intensity = properties.intensity ?? 1.0;
-    const angle = properties.angle ?? Math.PI / 6;
-    const penumbra = properties.penumbra ?? 0.5;
-    const distance = properties.distance ?? 100;
-    const castShadow = properties.castShadow ?? true;
+    const merged = { ...spotLightDefaults, ...properties };
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const angle = merged.angle;
+    const penumbra = merged.penumbra;
+    const distance = merged.distance;
+    const castShadow = merged.castShadow;
 
-    const spotLightRef = useRef<any>(null);
+    const spotLightRef = useRef<SpotLight>(null);
     const targetRef = useRef<any>(null);
+    const [spotLight, setSpotLight] = useState<SpotLight | null>(null);
+    const spotLightHelper = useMemo(
+        () => spotLight ? new SpotLightHelper(spotLight, color) : null,
+        [spotLight, color]
+    );
 
-    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
+    useEffect(() => {
+        return () => {
+            spotLightHelper?.dispose();
+        };
+    }, [spotLightHelper]);
 
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
+            setSpotLight(spotLightRef.current);
         }
     }, []);
 
+    useFrame(() => {
+        if (spotLightHelper && editMode && isSelected) {
+            spotLightHelper.update();
+        }
+    });
+
     return (
         <>
             <spotLight
@@ -51,6 +79,9 @@ function SpotLightView({ properties, editMode, isSelected }: { properties: any;
                 shadow-bias={-0.0001}
                 shadow-normalBias={0.02}
             />
+            {editMode && isSelected && spotLightHelper && (
+                <primitive object={spotLightHelper} />
+            )}
             <object3D ref={targetRef} position={[0, -5, 0]} />
             {editMode && (
                 <>
@@ -72,7 +103,7 @@ const SpotLightComponent: Component = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {}
+    defaultProperties: spotLightDefaults
 };
 
 export default SpotLightComponent;