react-three-game 0.0.56 → 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,5 +1,5 @@
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition, Label } from "./Input";
+import { Label, Vector3Field, Vector3Input } from "./Input";
 import { useEditorContext } from "../EditorContext";
 import { colors } from "../styles";
 
@@ -78,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' }}>
@@ -98,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

@@ -115,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,
@@ -156,7 +158,9 @@ export const menu = {
     container: {
         position: 'fixed' as const,
         zIndex: 50,
-        minWidth: 140,
+        minWidth: 'auto',
+        width: 'max-content',
+        maxWidth: 'min(240px, calc(100vw - 16px))',
         background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
@@ -171,6 +175,7 @@ export const menu = {
         border: 'none',
         color: colors.text,
         fontSize: fonts.size,
+        whiteSpace: 'nowrap' as const,
         cursor: 'pointer',
         outline: 'none',
     } as React.CSSProperties,
@@ -183,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',

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;