react-three-game 0.0.55 → 0.0.57

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

@@ -1,5 +1,5 @@
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition } from "./Input";
+import { ColorField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
 import { Text } from 'three-text/three/react';
 import { useRef, useState, useCallback } from 'react';
 import { BufferGeometry, Mesh } from "three";
@@ -14,63 +14,64 @@ function TextComponentEditor({
     component: any;
     onUpdate: (newProps: any) => void;
 }) {
-    const fields: FieldDefinition[] = [
-        {
-            name: 'text',
-            type: 'string',
-            label: 'Text',
-            placeholder: 'Enter text...',
-        },
-        {
-            name: 'color',
-            type: 'color',
-            label: 'Color',
-        },
-        {
-            name: 'font',
-            type: 'string',
-            label: 'Font',
-            placeholder: '/fonts/NotoSans-Regular.ttf',
-        },
-        {
-            name: 'size',
-            type: 'number',
-            label: 'Size',
-            min: 0.01,
-            step: 0.1,
-        },
-        {
-            name: 'depth',
-            type: 'number',
-            label: 'Depth',
-            min: 0,
-            step: 0.1,
-        },
-        {
-            name: 'width',
-            type: 'number',
-            label: 'Width',
-            min: 0,
-            step: 0.5,
-        },
-        {
-            name: 'align',
-            type: 'select',
-            label: 'Align',
-            options: [
-                { value: 'left', label: 'Left' },
-                { value: 'center', label: 'Center' },
-                { value: 'right', label: 'Right' },
-            ],
-        },
-    ];
-
     return (
-        <FieldRenderer
-            fields={fields}
-            values={component.properties}
-            onChange={onUpdate}
-        />
+        <FieldGroup>
+            <StringField
+                name="text"
+                label="Text"
+                values={component.properties}
+                onChange={onUpdate}
+                placeholder="Enter text..."
+            />
+            <ColorField
+                name="color"
+                label="Color"
+                values={component.properties}
+                onChange={onUpdate}
+            />
+            <StringField
+                name="font"
+                label="Font"
+                values={component.properties}
+                onChange={onUpdate}
+                placeholder="/fonts/NotoSans-Regular.ttf"
+            />
+            <NumberField
+                name="size"
+                label="Size"
+                values={component.properties}
+                onChange={onUpdate}
+                min={0.01}
+                step={0.1}
+            />
+            <NumberField
+                name="depth"
+                label="Depth"
+                values={component.properties}
+                onChange={onUpdate}
+                min={0}
+                step={0.1}
+            />
+            <NumberField
+                name="width"
+                label="Width"
+                values={component.properties}
+                onChange={onUpdate}
+                min={0}
+                step={0.5}
+            />
+            <SelectField
+                name="align"
+                label="Align"
+                values={component.properties}
+                onChange={onUpdate}
+                options={[
+                    { value: 'left', label: 'Left' },
+                    { value: 'center', label: 'Center' },
+                    { value: 'right', label: 'Right' },
+                ]}
+            />
+        </FieldGroup>
     );
 }
 

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

@@ -1,15 +1,17 @@
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition, Label } from "./Input";
+import { Label, Vector3Field, Vector3Input } from "./Input";
 import { useEditorContext } from "../EditorContext";
+import { colors } from "../styles";
 
 const buttonStyle = {
-    padding: '2px 6px',
-    background: 'transparent',
-    color: 'rgba(255,255,255,0.9)',
-    border: '1px solid rgba(255,255,255,0.14)',
-    borderRadius: 4,
+    padding: '4px 8px',
+    background: colors.bgSurface,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: 3,
     cursor: 'pointer',
     font: 'inherit',
+    fontSize: 11,
     flex: 1,
 };
 
@@ -36,13 +38,15 @@ function TransformModeSelector({
                             onClick={() => setTransformMode(mode as any)}
                             style={{
                                 ...buttonStyle,
-                                background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent',
+                                background: isActive ? colors.accentBg : colors.bgSurface,
+                                borderColor: isActive ? colors.accentBorder : colors.border,
+                                color: isActive ? colors.accent : colors.text,
                             }}
                             onPointerEnter={(e) => {
-                                if (!isActive) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                                if (!isActive) e.currentTarget.style.background = colors.bgHover;
                             }}
                             onPointerLeave={(e) => {
-                                if (!isActive) e.currentTarget.style.background = 'transparent';
+                                if (!isActive) e.currentTarget.style.background = colors.bgSurface;
                             }}
                         >
                             {mode}
@@ -55,14 +59,16 @@ function TransformModeSelector({
                     onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
                     style={{
                         ...buttonStyle,
-                        background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent',
+                        background: snapResolution > 0 ? colors.accentBg : colors.bgSurface,
+                        borderColor: snapResolution > 0 ? colors.accentBorder : colors.border,
+                        color: snapResolution > 0 ? colors.accent : colors.text,
                         width: '100%',
                     }}
                     onPointerEnter={(e) => {
-                        if (snapResolution === 0) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                        if (snapResolution === 0) e.currentTarget.style.background = colors.bgHover;
                     }}
                     onPointerLeave={(e) => {
-                        if (snapResolution === 0) e.currentTarget.style.background = 'transparent';
+                        if (snapResolution === 0) e.currentTarget.style.background = colors.bgSurface;
                     }}
                 >
                     Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
@@ -72,17 +78,41 @@ function TransformModeSelector({
     );
 }
 
+const snapLockBtnStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0 2px',
+    fontSize: 12,
+    lineHeight: 1,
+    color: colors.textMuted,
+};
+
+function SnapLockButton({ locked, onToggle, title }: { locked: boolean; onToggle: () => void; title: string }) {
+    return (
+        <button style={snapLockBtnStyle} onClick={onToggle} title={title}>
+            {locked ? '🔒' : '🔓'}
+        </button>
+    );
+}
+
 function TransformComponentEditor({ component, onUpdate }: {
     component: any;
     onUpdate: (newComp: any) => void;
 }) {
-    const { transformMode, setTransformMode, snapResolution, setSnapResolution } = useEditorContext();
+    const {
+        transformMode,
+        setTransformMode,
+        snapResolution,
+        setSnapResolution,
+        positionSnap,
+        setPositionSnap,
+        rotationSnap,
+        setRotationSnap
+    } = useEditorContext();
 
-    const fields: FieldDefinition[] = [
-        { name: 'position', type: 'vector3', label: 'Position', snap: snapResolution },
-        { name: 'rotation', type: 'vector3', label: 'Rotation', snap: snapResolution },
-        { name: 'scale', type: 'vector3', label: 'Scale', snap: snapResolution },
-    ];
+    const positionSnapped = positionSnap > 0;
+    const rotationSnapped = rotationSnap > 0;
 
     return (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -92,10 +122,38 @@ function TransformComponentEditor({ component, onUpdate }: {
                 snapResolution={snapResolution}
                 setSnapResolution={setSnapResolution}
             />
-            <FieldRenderer
-                fields={fields}
+            <Vector3Input
+                label="Position"
+                value={component.properties.position ?? [0, 0, 0]}
+                onChange={v => onUpdate({ position: v })}
+                snap={positionSnap}
+                labelExtra={
+                    <SnapLockButton
+                        locked={positionSnapped}
+                        onToggle={() => setPositionSnap(positionSnapped ? 0 : 0.5)}
+                        title={positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)`}
+                    />
+                }
+            />
+            <Vector3Input
+                label="Rotation"
+                value={component.properties.rotation ?? [0, 0, 0]}
+                onChange={v => onUpdate({ rotation: v })}
+                snap={rotationSnap}
+                labelExtra={
+                    <SnapLockButton
+                        locked={rotationSnapped}
+                        onToggle={() => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4)}
+                        title={rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)`}
+                    />
+                }
+            />
+            <Vector3Field
+                name="scale"
+                label="Scale"
                 values={component.properties}
                 onChange={onUpdate}
+                fallback={[1, 1, 1]}
             />
         </div>
     );

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

@@ -7,6 +7,8 @@ import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
+import EnvironmentComponent from './EnvironmentComponent';
+import CameraComponent from './CameraComponent';
 
 export default [
     GeometryComponent,
@@ -17,6 +19,8 @@ export default [
     DirectionalLightComponent,
     AmbientLightComponent,
     ModelComponent,
-    TextComponent
+    TextComponent,
+    EnvironmentComponent,
+    CameraComponent,
 ];
 

package/src/tools/prefabeditor/styles.ts

@@ -1,21 +1,27 @@
 // Shared editor styles - single source of truth for all prefab editor UI
 
 export const colors = {
-    bg: 'rgba(0,0,0,0.6)',
-    bgLight: 'rgba(255,255,255,0.06)',
-    bgHover: 'rgba(255,255,255,0.1)',
-    border: 'rgba(255,255,255,0.15)',
-    borderLight: 'rgba(255,255,255,0.1)',
-    borderFaint: 'rgba(255,255,255,0.05)',
-    text: '#fff',
-    textMuted: 'rgba(255,255,255,0.7)',
-    danger: '#ffaaaa',
-    dangerBg: 'rgba(255,80,80,0.2)',
-    dangerBorder: 'rgba(255,80,80,0.4)',
+    bg: '#1e1e1e',
+    bgSurface: '#252526',
+    bgLight: '#2d2d2d',
+    bgHover: '#2a2d2e',
+    bgInput: '#1a1a1a',
+    border: '#3c3c3c',
+    borderLight: '#333333',
+    borderFaint: '#2a2a2a',
+    text: '#cccccc',
+    textMuted: '#999999',
+    textDim: '#666666',
+    accent: '#4c9eff',
+    accentBg: 'rgba(76, 158, 255, 0.12)',
+    accentBorder: 'rgba(76, 158, 255, 0.4)',
+    danger: '#f44747',
+    dangerBg: 'rgba(244, 71, 71, 0.12)',
+    dangerBorder: 'rgba(244, 71, 71, 0.35)',
 };
 
 export const fonts = {
-    family: 'system-ui, sans-serif',
+    family: 'system-ui, -apple-system, sans-serif',
     size: 11,
     sizeSm: 10,
 };
@@ -27,13 +33,13 @@ export const base = {
         color: colors.text,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
-        backdropFilter: 'blur(8px)',
         fontFamily: fonts.family,
         fontSize: fonts.size,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     } as React.CSSProperties,
 
     header: {
-        padding: '6px 8px',
+        padding: '7px 10px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -41,24 +47,25 @@ export const base = {
         background: colors.bgLight,
         borderBottom: `1px solid ${colors.borderLight}`,
         fontSize: fonts.size,
-        fontWeight: 500,
+        fontWeight: 600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
+        letterSpacing: 0.8,
+        color: colors.text,
     } as React.CSSProperties,
 
     input: {
         width: '100%',
-        background: colors.bgHover,
+        background: colors.bgInput,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
-        padding: '4px 6px',
+        padding: '5px 8px',
         color: colors.text,
         fontSize: fonts.size,
         outline: 'none',
     } as React.CSSProperties,
 
     btn: {
-        background: colors.bgHover,
+        background: colors.bgLight,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
         padding: '4px 8px',
@@ -76,10 +83,11 @@ export const base = {
 
     label: {
         fontSize: fonts.sizeSm,
-        opacity: 0.7,
+        color: colors.textMuted,
         marginBottom: 4,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
+        fontWeight: 500,
     } as React.CSSProperties,
 
     row: {
@@ -107,6 +115,8 @@ export const inspector = {
         padding: 8,
         maxHeight: '80vh',
         overflowY: 'auto' as const,
+        overflowX: 'hidden' as const,
+        boxSizing: 'border-box' as const,
         display: 'flex',
         flexDirection: 'column' as const,
         gap: 8,
@@ -125,18 +135,22 @@ export const tree = {
         overflowY: 'auto' as const,
         padding: 4,
         scrollbarWidth: 'thin' as const,
-        scrollbarColor: 'rgba(255,255,255,0.06) transparent',
+        scrollbarColor: `${colors.bgLight} transparent`,
     } as React.CSSProperties,
     row: {
         display: 'flex',
         alignItems: 'center',
         padding: '3px 6px',
-        borderBottom: `1px solid ${colors.borderFaint}`,
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.borderFaint,
         cursor: 'pointer',
         whiteSpace: 'nowrap' as const,
+        borderRadius: 2,
     } as React.CSSProperties,
     selected: {
-        background: 'rgba(255,255,255,0.12)',
+        background: colors.accentBg,
+        borderBottomColor: colors.accentBorder,
     },
 };
 
@@ -144,22 +158,24 @@ export const menu = {
     container: {
         position: 'fixed' as const,
         zIndex: 50,
-        minWidth: 120,
-        background: 'rgba(0,0,0,0.85)',
+        minWidth: 'auto',
+        width: 'max-content',
+        maxWidth: 'min(240px, calc(100vw - 16px))',
+        background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
         overflow: 'hidden',
-        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
     },
     item: {
         width: '100%',
         textAlign: 'left' as const,
-        padding: '6px 8px',
+        padding: '7px 12px',
         background: 'transparent',
         border: 'none',
         color: colors.text,
         fontSize: fonts.size,
+        whiteSpace: 'nowrap' as const,
         cursor: 'pointer',
         outline: 'none',
     } as React.CSSProperties,
@@ -172,8 +188,7 @@ export const toolbar = {
     panel: {
         position: 'absolute' as const,
         top: 8,
-        left: '50%',
-        transform: 'translateX(-50%)',
+        left: '240px',
         display: 'flex',
         gap: 6,
         padding: '4px 6px',
@@ -183,14 +198,38 @@ export const toolbar = {
         color: colors.text,
         fontFamily: fonts.family,
         fontSize: fonts.size,
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     },
     divider: {
         width: 1,
-        background: 'rgba(255,255,255,0.2)',
+        background: colors.borderLight,
     },
     disabled: {
         opacity: 0.4,
         cursor: 'not-allowed',
     },
 };
+
+// Shared scrollbar CSS (inject via <style> tag since CSS can't be bundled)
+export const scrollbarCSS = `
+.prefab-scroll::-webkit-scrollbar,
+.tree-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.prefab-scroll::-webkit-scrollbar-track,
+.tree-scroll::-webkit-scrollbar-track { background: transparent; }
+.prefab-scroll::-webkit-scrollbar-thumb,
+.tree-scroll::-webkit-scrollbar-thumb { background: ${colors.border}; border-radius: 3px; }
+.prefab-scroll::-webkit-scrollbar-thumb:hover,
+.tree-scroll::-webkit-scrollbar-thumb:hover { background: #555; }
+.prefab-scroll { scrollbar-width: thin; scrollbar-color: ${colors.border} transparent; }
+`;
+
+// Reusable component card style for inspector sections
+export const componentCard = {
+    container: {
+        marginBottom: 8,
+        backgroundColor: colors.bgSurface,
+        padding: 8,
+        borderRadius: 4,
+        border: `1px solid ${colors.border}`,
+    } as React.CSSProperties,
+};

package/src/tools/prefabeditor/utils.ts

@@ -1,6 +1,6 @@
 import { GameObject, Prefab } from "./types";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import { Object3D } from 'three';
+import { Box3, Object3D, PerspectiveCamera, Quaternion, Vector3 } from 'three';
 
 export interface ExportGLBOptions {
     filename?: string;
@@ -9,10 +9,26 @@ export interface ExportGLBOptions {
     onError?: (error: any) => void;
 }
 
-/** Save a prefab as JSON file */
-export function saveJson(data: Prefab, filename: string) {
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
+export async function saveJson(data: Prefab, filename: string) {
+    const json = JSON.stringify(data, null, 2);
+    if ('showSaveFilePicker' in window) {
+        try {
+            const handle = await (window as any).showSaveFilePicker({
+                suggestedName: `${filename || 'prefab'}.json`,
+                types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
+            });
+            const writable = await handle.createWritable();
+            await writable.write(json);
+            await writable.close();
+            return;
+        } catch (e: any) {
+            if (e?.name === 'AbortError') return; // user cancelled
+        }
+    }
+    // Fallback for browsers without File System Access API
     const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(json);
     a.download = `${filename || 'prefab'}.json`;
     a.click();
 }
@@ -102,6 +118,41 @@ export async function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer> {
     return result as ArrayBuffer;
 }
 
+export function focusCameraOnObject(
+    object: Object3D,
+    camera: Object3D,
+    target: Vector3,
+    update?: () => void,
+) {
+    const bounds = new Box3().setFromObject(object);
+    const center = new Vector3();
+    const size = new Vector3();
+    const quaternion = new Quaternion();
+    object.getWorldQuaternion(quaternion);
+
+    if (bounds.isEmpty()) {
+        object.getWorldPosition(center);
+        size.setScalar(1);
+    } else {
+        bounds.getCenter(center);
+        bounds.getSize(size);
+    }
+
+    const radius = Math.max(size.length() * 0.5, 1);
+    const forward = new Vector3(0, 0, 1).applyQuaternion(quaternion).normalize();
+    const worldUp = new Vector3(0, 1, 0);
+    const elevatedDirection = forward.clone().addScaledVector(worldUp, 0.65).normalize();
+    const distance = camera instanceof PerspectiveCamera
+        ? Math.max(radius / Math.tan((camera.fov * Math.PI) / 360) * 1.8, radius * 3.5)
+        : radius * 4.5;
+    const nextPosition = center.clone().add(elevatedDirection.multiplyScalar(distance));
+
+    camera.position.copy(nextPosition);
+    camera.lookAt(center);
+    target.copy(center);
+    update?.();
+}
+
 /** Find a node by ID in the tree */
 export function findNode(root: GameObject, id: string): GameObject | null {
     if (root.id === id) return root;
@@ -171,7 +222,7 @@ export function cloneNode(node: GameObject): GameObject {
     return {
         ...node,
         id: crypto.randomUUID(),
-        name: `${node.name ?? "Node"} Copy`,
+        name: `${node.name ?? node.id} Copy`,
         children: node.children?.map(cloneNode)
     };
 }
@@ -219,3 +270,43 @@ export function updateNodeById(
     children: newChildren
   };
 }
+
+/** Create a GameObject node for a 3D model file */
+export function createModelNode(filename: string, name?: string): GameObject {
+    return {
+        id: crypto.randomUUID(),
+        name: name ?? filename.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            model: {
+                type: 'Model',
+                properties: { filename, instanced: false }
+            }
+        }
+    };
+}
+
+/** Create a GameObject node for an image as a textured plane */
+export function createImageNode(texturePath: string, name?: string): GameObject {
+    return {
+        id: crypto.randomUUID(),
+        name: name ?? texturePath.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: {
+            transform: {
+                type: 'Transform',
+                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
+            },
+            geometry: {
+                type: 'Geometry',
+                properties: { geometryType: 'plane', args: [1, 1] }
+            },
+            material: {
+                type: 'Material',
+                properties: { color: '#ffffff', texture: texturePath }
+            }
+        }
+    };
+}