react-three-game 0.0.57 → 0.0.59

package/src/tools/prefabeditor/EditorTreeMenus.tsx

@@ -0,0 +1,307 @@
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Prefab } from './types';
+import { menu } from './styles';
+import { useEditorContext } from './EditorContext';
+import { getComponent } from './components/ComponentRegistry';
+import { loadJson, saveJson, regenerateIds, updateNodeById } from './utils';
+
+export type TreeContextMenuState = { nodeId: string; x: number; y: number } | null;
+
+function createEmptyPrefab(): Prefab {
+    return {
+        id: crypto.randomUUID(),
+        name: 'New Scene',
+        root: {
+            id: crypto.randomUUID(),
+            name: 'Scene',
+            components: {
+                transform: {
+                    type: 'Transform',
+                    properties: { ...getComponent('Transform')?.defaultProperties }
+                }
+            },
+            children: []
+        }
+    };
+}
+
+function MenuPanel({
+    children,
+    style,
+}: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}) {
+    return (
+        <div style={{ ...menu.container, position: 'static', ...style }} onClick={(e) => e.stopPropagation()}>
+            {children}
+        </div>
+    );
+}
+
+function MenuItemButton({
+    children,
+    onClick,
+    danger = false,
+    style,
+}: {
+    children: React.ReactNode;
+    onClick: () => void;
+    danger?: boolean;
+    style?: React.CSSProperties;
+}) {
+    return (
+        <button
+            style={danger ? { ...menu.item, ...menu.danger, ...style } : { ...menu.item, ...style }}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}
+
+function MenuSubmenu({
+    label,
+    children,
+}: {
+    label: string;
+    children: React.ReactNode;
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div
+            style={{ position: 'relative' }}
+            onMouseEnter={() => setIsOpen(true)}
+            onMouseLeave={() => setIsOpen(false)}
+        >
+            <MenuItemButton
+                onClick={() => setIsOpen(open => !open)}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
+            >
+                <span>{label}</span>
+                <span aria-hidden="true">›</span>
+            </MenuItemButton>
+            {isOpen && (
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: '100%',
+                        zIndex: 1,
+                    }}
+                >
+                    <MenuPanel>{children}</MenuPanel>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function MenuTriggerButton({
+    buttonRef,
+    onToggle,
+    title,
+    style,
+    children,
+}: {
+    buttonRef: React.RefObject<HTMLButtonElement | null>;
+    onToggle: () => void;
+    title: string;
+    style: React.CSSProperties;
+    children: React.ReactNode;
+}) {
+    return (
+        <button
+            ref={buttonRef}
+            style={style}
+            onClick={(e) => {
+                e.stopPropagation();
+                onToggle();
+            }}
+            title={title}
+        >
+            {children}
+        </button>
+    );
+}
+
+export function TreeNodeMenu({
+    isRoot,
+    nodeId,
+    onAddChild,
+    onFocus,
+    onDuplicate,
+    onDelete,
+    onClose,
+}: {
+    isRoot: boolean;
+    nodeId: string;
+    onAddChild: (parentId: string) => void;
+    onFocus: (nodeId: string) => void;
+    onDuplicate?: (nodeId: string) => void;
+    onDelete?: (nodeId: string) => void;
+    onClose: () => void;
+}) {
+    return (
+        <MenuPanel>
+            <MenuItemButton onClick={() => { onAddChild(nodeId); onClose(); }}>
+                Add Child
+            </MenuItemButton>
+            <MenuItemButton onClick={() => { onFocus(nodeId); onClose(); }}>
+                Focus Camera
+            </MenuItemButton>
+            {!isRoot && onDuplicate && (
+                <MenuItemButton onClick={() => { onDuplicate(nodeId); onClose(); }}>
+                    Duplicate
+                </MenuItemButton>
+            )}
+            {!isRoot && onDelete && (
+                <MenuItemButton danger onClick={() => { onDelete(nodeId); onClose(); }}>
+                    Delete
+                </MenuItemButton>
+            )}
+        </MenuPanel>
+    );
+}
+
+export function TreeContextMenu({
+    contextMenu,
+    onClose,
+    children,
+}: {
+    contextMenu: TreeContextMenuState;
+    onClose: () => void;
+    children: (nodeId: string, onClose: () => void) => React.ReactNode;
+}) {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+
+    useEffect(() => {
+        if (!contextMenu) return;
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node | null;
+            if (!target) return;
+            if (panelRef.current?.contains(target)) return;
+            onClose();
+        };
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') onClose();
+        };
+
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [contextMenu, onClose]);
+
+    useEffect(() => {
+        if (!contextMenu || !panelRef.current || typeof window === 'undefined') return;
+
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
+        const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
+        setPosition({ left, top });
+    }, [contextMenu]);
+
+    useEffect(() => {
+        if (!contextMenu) {
+            setPosition(null);
+        }
+    }, [contextMenu]);
+
+    if (!contextMenu || typeof document === 'undefined') return null;
+
+    return createPortal(
+        <div
+            ref={panelRef}
+            style={{
+                position: 'fixed',
+                left: position?.left ?? contextMenu.x,
+                top: position?.top ?? contextMenu.y,
+                zIndex: 1000,
+            }}
+            onMouseLeave={onClose}
+            onContextMenu={(e) => e.preventDefault()}
+        >
+            {children(contextMenu.nodeId, onClose)}
+        </div>,
+        document.body
+    );
+}
+
+export function FileMenu({
+    prefabData,
+    setPrefabData,
+    onClose
+}: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+
+    const handleNewScene = () => {
+        setPrefabData(createEmptyPrefab());
+        onClose();
+    };
+
+    const handleNewSceneFromPrefab = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    };
+
+    const handleSave = () => {
+        saveJson(prefabData, 'prefab');
+        onClose();
+    };
+
+    const handleLoadIntoScene = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, prev.root.id, root => ({
+                ...root,
+                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
+            }))
+        }));
+        onClose();
+    };
+
+    return (
+        <MenuPanel style={{ overflow: 'visible' }}>
+            <MenuSubmenu label="File">
+                <MenuItemButton onClick={handleNewScene}>
+                    New Scene
+                </MenuItemButton>
+                <MenuItemButton onClick={handleNewSceneFromPrefab}>
+                    New Scene from Prefab
+                </MenuItemButton>
+                <MenuItemButton onClick={handleLoadIntoScene}>
+                    Load Prefab into Scene
+                </MenuItemButton>
+                <MenuItemButton onClick={handleSave}>
+                    Save Prefab
+                </MenuItemButton>
+            </MenuSubmenu>
+            <MenuSubmenu label="Export">
+                <MenuItemButton onClick={() => { onExportGLB?.(); onClose(); }}>
+                    GLB
+                </MenuItemButton>
+                <MenuItemButton onClick={() => { onScreenshot?.(); onClose(); }}>
+                    PNG
+                </MenuItemButton>
+            </MenuSubmenu>
+        </MenuPanel>
+    );
+}

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -7,7 +7,7 @@ import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
 import { exportGLB, createModelNode, createImageNode } from "./utils";
-import { parseModelFromFile } from "../dragdrop/modelLoader";
+import { parseModelFromFile } from "../dragdrop";
 
 export interface PrefabEditorRef {
     screenshot: () => void;

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -6,7 +6,7 @@ import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
 import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
 import components from "./components";
-import { loadModel } from "../dragdrop/modelLoader";
+import { loadModel } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { focusCameraOnObject, updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
@@ -155,8 +155,11 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
                     : `${basePath}/${file}`;
 
             const res = await loadModel(path);
-            res.success && res.model &&
-                setModels(m => ({ ...m, [file]: res.model }));
+            const model = res.model;
+
+            if (res.success && model) {
+                setModels(m => ({ ...m, [file]: model }));
+            }
         });
 
         const loader = new TextureLoader();

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}