react-three-game 0.0.55 → 0.0.56

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -22,6 +22,8 @@ const IDENTITY = new Matrix4();
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>; // RigidBody refs only populated when using physics
+    injectModel: (filename: string, model: Object3D) => void;
+    injectTexture: (filename: string, file: File) => void;
 }
 
 export const PrefabRoot = forwardRef<PrefabRootRef, {
@@ -48,10 +50,27 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
     const rootRef = useRef<Group>(null);
 
+    const injectModel = useCallback((filename: string, model: Object3D) => {
+        setModels(m => ({ ...m, [filename]: model }));
+    }, []);
+
+    const injectTexture = useCallback((filename: string, file: File) => {
+        loading.current.add(filename);
+        const url = URL.createObjectURL(file);
+        const loader = new TextureLoader();
+        loader.load(url, tex => {
+            tex.colorSpace = SRGBColorSpace;
+            setTextures(t => ({ ...t, [filename]: tex }));
+            URL.revokeObjectURL(url);
+        }, undefined, () => URL.revokeObjectURL(url));
+    }, []);
+
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
-        rigidBodyRefs: rigidBodyRefs.current
-    }), []);
+        rigidBodyRefs: rigidBodyRefs.current,
+        injectModel,
+        injectTexture
+    }), [injectModel, injectTexture]);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { colors } from '../styles';
 
 // ============================================================================
 // Field Definition Types
@@ -61,29 +62,30 @@ export type FieldDefinition =
     | CustomFieldDefinition;
 
 // ============================================================================
-// Shared Styles
+// Shared Styles (derived from shared color tokens)
 // ============================================================================
 
-// Shared styles
 const styles = {
     input: {
         width: '80px',
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-        border: '1px solid rgba(34, 211, 238, 0.3)',
-        padding: '2px 4px',
-        fontSize: '10px',
-        color: 'rgba(165, 243, 252, 1)',
+        backgroundColor: colors.bgInput,
+        border: `1px solid ${colors.border}`,
+        padding: '3px 6px',
+        fontSize: '11px',
+        color: colors.text,
         fontFamily: 'monospace',
         outline: 'none',
         textAlign: 'right',
+        borderRadius: 3,
     } as React.CSSProperties,
     label: {
         display: 'block',
-        fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.9)',
+        fontSize: '10px',
+        color: colors.textMuted,
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
+        fontWeight: 500,
     } as React.CSSProperties,
 };
 
@@ -317,9 +319,9 @@ export function Vector3Input({
     };
 
     const axes = [
-        { key: "x", color: 'rgba(248, 113, 113, 1)', index: 0 },
-        { key: "y", color: 'rgba(134, 239, 172, 1)', index: 1 },
-        { key: "z", color: 'rgba(96, 165, 250, 1)', index: 2 }
+        { key: "x", color: '#e06c75', index: 0 },
+        { key: "y", color: '#98c379', index: 1 },
+        { key: "z", color: '#61afef', index: 2 }
     ] as const;
 
     return (
@@ -334,17 +336,17 @@ export function Vector3Input({
                             display: 'flex',
                             alignItems: 'center',
                             gap: 4,
-                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            border: '1px solid rgba(34, 211, 238, 0.2)',
-                            borderRadius: 4,
+                            backgroundColor: colors.bgInput,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: 3,
                             padding: '4px 6px',
-                            minHeight: 32,
+                            minHeight: 28,
                         }}
                     >
                         <span
                             style={{
-                                fontSize: '12px',
-                                fontWeight: 'bold',
+                                fontSize: 11,
+                                fontWeight: 600,
                                 color,
                                 width: 12,
                                 cursor: 'ew-resize',
@@ -361,8 +363,8 @@ export function Vector3Input({
                                 flex: 1,
                                 backgroundColor: 'transparent',
                                 border: 'none',
-                                fontSize: '12px',
-                                color: 'rgba(165, 243, 252, 1)',
+                                fontSize: 11,
+                                color: colors.text,
                                 fontFamily: 'monospace',
                                 outline: 'none',
                                 width: '100%',
@@ -411,11 +413,11 @@ export function ColorInput({
                     style={{
                         height: 32,
                         width: 48,
-                        backgroundColor: 'transparent',
-                        border: '1px solid rgba(34, 211, 238, 0.3)',
-                        borderRadius: 4,
+                        backgroundColor: colors.bgInput,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 3,
                         cursor: 'pointer',
-                        padding: 0,
+                        padding: 2,
                         flexShrink: 0,
                     }}
                     value={value}
@@ -474,8 +476,7 @@ export function BooleanInput({
                 style={{
                     height: 16,
                     width: 16,
-                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                    border: '1px solid rgba(34, 211, 238, 0.3)',
+                    accentColor: colors.accent,
                     cursor: 'pointer',
                 }}
                 checked={value}

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

@@ -2,6 +2,7 @@ import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
 import { Component } from './ComponentRegistry';
 import { FieldRenderer, FieldDefinition, Input } from './Input';
+import { colors } from '../styles';
 import { useMemo } from 'react';
 import {
     RepeatWrapping,
@@ -47,12 +48,20 @@ function TexturePicker({
             .catch(console.error);
     }, [basePath]);
 
+    // Only show 3D preview for server-hosted textures (starting with / or http)
+    const canPreview = value && (value.startsWith('/') || value.startsWith('http'));
+
     return (
-        <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
-            <SingleTextureViewer file={value || undefined} basePath={basePath} />
+        <div style={{ maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }}>
+            {canPreview
+                ? <SingleTextureViewer file={value} basePath={basePath} />
+                : value
+                    ? <span style={{ fontSize: 10, opacity: 0.6, maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{value}</span>
+                    : null
+            }
             <button
                 onClick={() => setShowPicker(!showPicker)}
-                style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }}
+                style={{ padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4 }}
             >
                 {showPicker ? 'Cancel' : 'Change'}
             </button>
@@ -60,12 +69,12 @@ function TexturePicker({
                 onClick={() => {
                     onChange(undefined as any);
                 }}
-                style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }}
+                style={{ padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4, marginLeft: 4 }}
             >
                 Clear
             </button>
             {showPicker && (
-                <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
+                <div style={{ position: 'fixed', right: 60, top: 60, transform: 'translate(-100%,0%)', background: colors.bg, padding: 16, border: `1px solid ${colors.border}`, borderRadius: 4, maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden', width: 220, zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)' }}>
                     <TextureListViewer
                         files={textureFiles}
                         selected={value || undefined}

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

@@ -32,7 +32,7 @@ function ModelPicker({
     };
 
     return (
-        <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
+        <div style={{ maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }}>
             <SingleModelViewer file={value ? `/${value}` : undefined} basePath={basePath} />
             <button
                 onClick={() => setShowPicker(!showPicker)}
@@ -49,7 +49,7 @@ function ModelPicker({
                 Clear
             </button>
             {showPicker && (
-                <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
+                <div style={{ position: 'fixed', right: 60, top: 60, transform: 'translate(-100%,0%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden', width: 220, zIndex: 1000 }}>
                     <ModelListViewer
                         key={nodeId}
                         files={modelFiles}

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

@@ -1,6 +1,8 @@
 import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
 import { FieldRenderer, FieldDefinition } from "./Input";
+import { useHelper } from "@react-three/drei";
+import { SpotLightHelper } from "three";
 
 const spotLightFields: FieldDefinition[] = [
     { name: 'color', type: 'color', label: 'Color' },
@@ -32,6 +34,8 @@ function SpotLightView({ properties, editMode }: { properties: any; editMode?: b
     const spotLightRef = useRef<any>(null);
     const targetRef = useRef<any>(null);
 
+    useHelper(editMode ? spotLightRef : null, SpotLightHelper, color);
+
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;

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

@@ -1,15 +1,17 @@
 import { Component } from "./ComponentRegistry";
 import { FieldRenderer, FieldDefinition, Label } 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'}

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: {
@@ -125,18 +133,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,18 +156,17 @@ export const menu = {
     container: {
         position: 'fixed' as const,
         zIndex: 50,
-        minWidth: 120,
-        background: 'rgba(0,0,0,0.85)',
+        minWidth: 140,
+        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,
@@ -183,14 +194,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

@@ -171,7 +171,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 +219,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 }
+            }
+        }
+    };
+}