react-three-game 0.0.55 → 0.0.57

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

@@ -1,13 +1,17 @@
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
-import { useEffect, useState } from 'react';
+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 {
     RepeatWrapping,
     ClampToEdgeWrapping,
     SRGBColorSpace,
+    LinearSRGBColorSpace,
     Texture,
+    Vector2,
     NearestFilter,
     LinearFilter,
     NearestMipmapNearestFilter,
@@ -16,18 +20,31 @@ import {
     LinearMipmapLinearFilter,
     MinificationTextureFilter,
     MagnificationTextureFilter,
-    MeshStandardMaterialProperties
+    MeshBasicMaterialProperties,
+    MeshStandardMaterialProperties,
+    FrontSide,
+    BackSide,
+    DoubleSide,
 } from 'three';
 
-export interface MaterialProps extends Omit<MeshStandardMaterialProperties, 'args'> {
+export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
+    materialType?: 'standard' | 'basic';
+    transmission?: number;
+    thickness?: number;
+    ior?: number;
     texture?: string;
     repeat?: boolean;
     repeatCount?: [number, number];
     generateMipmaps?: boolean;
     minFilter?: string;
     magFilter?: string;
+    normalMapTexture?: string;
+    normalScale?: [number, number];
 }
 
+const PICKER_POPUP_WIDTH = 260;
+const PICKER_POPUP_HEIGHT = 360;
+
 function TexturePicker({
     value,
     onChange,
@@ -39,6 +56,8 @@ function TexturePicker({
 }) {
     const [textureFiles, setTextureFiles] = useState<string[]>([]);
     const [showPicker, setShowPicker] = useState(false);
+    const [popupStyle, setPopupStyle] = useState<React.CSSProperties | null>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
         fetch(`${basePath}/textures/manifest.json`)
@@ -47,12 +66,60 @@ function TexturePicker({
             .catch(console.error);
     }, [basePath]);
 
+    useLayoutEffect(() => {
+        if (!showPicker || !triggerRef.current || typeof window === 'undefined') return;
+
+        const updatePosition = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+
+            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
+            const fallbackLeft = rect.right + 8;
+            const fitsLeft = preferredLeft >= 8;
+            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
+            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
+
+            setPopupStyle({
+                position: 'fixed',
+                left,
+                top,
+                background: colors.bg,
+                padding: 12,
+                border: `1px solid ${colors.border}`,
+                borderRadius: 6,
+                width: PICKER_POPUP_WIDTH,
+                height: PICKER_POPUP_HEIGHT,
+                overflow: 'hidden',
+                zIndex: 1000,
+                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+            });
+        };
+
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [showPicker]);
+
+    // 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
+                ref={triggerRef}
                 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 +127,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 }}>
+            {showPicker && popupStyle && typeof document !== 'undefined' && createPortal(
+                <div style={popupStyle} onMouseLeave={() => setShowPicker(false)}>
                     <TextureListViewer
                         files={textureFiles}
                         selected={value || undefined}
@@ -75,26 +142,51 @@ function TexturePicker({
                         }}
                         basePath={basePath}
                     />
-                </div>
+                </div>,
+                document.body
             )}
         </div>
     );
 }
 
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
+    const materialType = component.properties.materialType ?? 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
+    const isStandardMaterial = materialType === 'standard';
 
     const fields: FieldDefinition[] = [
+        {
+            name: 'materialType',
+            type: 'select',
+            label: 'Material Type',
+            options: [
+                { value: 'standard', label: 'Standard' },
+                { value: 'basic', label: 'Basic' },
+            ],
+        },
         { name: 'color', type: 'color', label: 'Color' },
+        { name: 'toneMapped', type: 'boolean', label: 'Tone Mapped' },
         { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
         { name: 'transparent', type: 'boolean', label: 'Transparent' },
         { name: 'opacity', type: 'number', label: 'Opacity', min: 0, max: 1, step: 0.01 },
-        { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
-        { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
-        { name: 'transmission', type: 'number', label: 'Transmission', min: 0, max: 1, step: 0.01 },
-        { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
-        { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
+        ...(isStandardMaterial ? [
+            { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
+            { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
+            { name: 'transmission', type: 'number', label: 'Transmission', min: 0, max: 1, step: 0.01 },
+            { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
+            { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
+        ] as FieldDefinition[] : []),
+        {
+            name: 'side',
+            type: 'select',
+            label: 'Side',
+            options: [
+                { value: 'FrontSide', label: 'Front' },
+                { value: 'BackSide', label: 'Back' },
+                { value: 'DoubleSide', label: 'Double' },
+            ],
+        } as FieldDefinition,
         {
             name: 'texture',
             type: 'custom',
@@ -131,6 +223,39 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { compo
                     </div>
                 ),
             } as FieldDefinition] : []),
+            {
+                name: 'normalMapTexture',
+                type: 'custom',
+                label: 'Normal Map',
+                render: ({ value, onChange }) => (
+                    <TexturePicker value={value} onChange={onChange} basePath={basePath} />
+                ),
+            } as FieldDefinition,
+            ...(component.properties.normalMapTexture ? [{
+                name: 'normalScale',
+                type: 'custom',
+                label: 'Normal Scale (X, Y)',
+                render: ({ value, onChange }: { value: [number, number] | undefined; onChange: (v: [number, number]) => void }) => (
+                    <div style={{ display: 'flex', gap: 2 }}>
+                        <Input
+                            label="X"
+                            value={value?.[0] ?? 1}
+                            onChange={v => onChange([v, value?.[1] ?? 1])}
+                            min={0}
+                            max={5}
+                            step={0.01}
+                        />
+                        <Input
+                            label="Y"
+                            value={value?.[1] ?? 1}
+                            onChange={v => onChange([value?.[0] ?? 1, v])}
+                            min={0}
+                            max={5}
+                            step={0.01}
+                        />
+                    </div>
+                ),
+            } as FieldDefinition] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' } as FieldDefinition,
             {
                 name: 'minFilter',
@@ -168,6 +293,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { compo
 
 // View for Material component
 function MaterialComponentView({ properties, loadedTextures }: { properties: MaterialProps, loadedTextures?: Record<string, Texture> }) {
+    const materialType = properties?.materialType ?? 'standard';
     const textureName = properties?.texture;
     const repeat = properties?.repeat;
     const repeatCount = properties?.repeatCount;
@@ -176,6 +302,11 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
     const magFilter = properties?.magFilter || 'LinearFilter';
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
 
+    const normalMapTextureName = properties?.normalMapTexture;
+    const normalScaleProp = properties?.normalScale;
+    const normalMapTexture = normalMapTextureName && loadedTextures ? loadedTextures[normalMapTextureName] : undefined;
+    const materialSource: MaterialProps = properties ?? {};
+
     // Destructure all material props and separate custom texture handling props
     const {
         texture: _texture,
@@ -184,9 +315,22 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
         generateMipmaps: _generateMipmaps,
         minFilter: _minFilter,
         magFilter: _magFilter,
-        map: _map, // Filter out map since we set it explicitly
+        map: _map,
+        materialType: _materialType,
+        normalMapTexture: _normalMapTexture,
+        normalScale: _normalScale,
+        normalMap: _normalMap,
+        side: sideProp,
+        metalness: _metalness,
+        roughness: _roughness,
+        transmission: _transmission,
+        thickness: _thickness,
+        ior: _ior,
         ...materialProps
-    } = properties || {};
+    } = materialSource;
+
+    const sideMap: Record<string, any> = { FrontSide, BackSide, DoubleSide };
+    const resolvedSide = sideProp ? (sideMap[sideProp as unknown as string] ?? FrontSide) : FrontSide;
 
     const minFilterMap: Record<string, MinificationTextureFilter> = {
         NearestFilter,
@@ -220,15 +364,40 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
         return t;
     }, [texture, repeat, repeatCount?.[0], repeatCount?.[1], generateMipmaps, minFilter, magFilter]);
 
+    const finalNormalMap = useMemo(() => {
+        if (!normalMapTexture) return undefined;
+        const t = normalMapTexture.clone();
+        t.colorSpace = LinearSRGBColorSpace;
+        t.needsUpdate = true;
+        return t;
+    }, [normalMapTexture]);
+
+    const normalScaleVec = useMemo(() => {
+        if (!finalNormalMap) return undefined;
+        return new Vector2(normalScaleProp?.[0] ?? 1, normalScaleProp?.[1] ?? 1);
+    }, [finalNormalMap, normalScaleProp?.[0], normalScaleProp?.[1]]);
+
     if (!properties) {
         return <meshStandardMaterial color="red" wireframe />;
     }
 
+    const materialKey = finalTexture?.uuid ?? 'no-texture';
+    const sharedProps = {
+        map: finalTexture,
+        side: resolvedSide,
+        ...materialProps,
+    };
+
+    if (materialType === 'basic') {
+        return <meshBasicMaterial key={materialKey} {...sharedProps} />;
+    }
+
     return (
         <meshStandardMaterial
-            key={finalTexture?.uuid ?? 'no-texture'}
-            map={finalTexture}
-            {...materialProps}
+            key={materialKey}
+            {...sharedProps}
+            normalMap={finalNormalMap}
+            normalScale={normalScaleVec}
         />
     );
 }
@@ -239,7 +408,9 @@ const MaterialComponent: Component = {
     View: MaterialComponentView,
     nonComposable: true,
     defaultProperties: {
+        materialType: 'standard',
         color: '#ffffff',
+        toneMapped: true,
         wireframe: false,
         transparent: false,
         opacity: 1,

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

@@ -1,9 +1,13 @@
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Component } from './ComponentRegistry';
 import { FieldRenderer, FieldDefinition } from './Input';
 import { GameObject } from '../types';
 
+const PICKER_POPUP_WIDTH = 260;
+const PICKER_POPUP_HEIGHT = 360;
+
 function ModelPicker({
     value,
     onChange,
@@ -17,6 +21,8 @@ function ModelPicker({
 }) {
     const [modelFiles, setModelFiles] = useState<string[]>([]);
     const [showPicker, setShowPicker] = useState(false);
+    const [popupStyle, setPopupStyle] = useState<React.CSSProperties | null>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
         fetch(`${basePath}/models/manifest.json`)
@@ -25,6 +31,45 @@ function ModelPicker({
             .catch(console.error);
     }, [basePath]);
 
+    useLayoutEffect(() => {
+        if (!showPicker || !triggerRef.current || typeof window === 'undefined') return;
+
+        const updatePosition = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+
+            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
+            const fallbackLeft = rect.right + 8;
+            const fitsLeft = preferredLeft >= 8;
+            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
+            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
+
+            setPopupStyle({
+                position: 'fixed',
+                left,
+                top,
+                background: 'rgba(0,0,0,0.9)',
+                padding: 12,
+                border: '1px solid rgba(34, 211, 238, 0.3)',
+                borderRadius: 6,
+                width: PICKER_POPUP_WIDTH,
+                height: PICKER_POPUP_HEIGHT,
+                overflow: 'hidden',
+                zIndex: 1000,
+                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+            });
+        };
+
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [showPicker]);
+
     const handleModelSelect = (file: string) => {
         const filename = file.startsWith('/') ? file.slice(1) : file;
         onChange(filename);
@@ -32,9 +77,10 @@ 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
+                ref={triggerRef}
                 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 }}
             >
@@ -48,8 +94,8 @@ 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 }}>
+            {showPicker && popupStyle && typeof document !== 'undefined' && createPortal(
+                <div style={popupStyle} onMouseLeave={() => setShowPicker(false)}>
                     <ModelListViewer
                         key={nodeId}
                         files={modelFiles}
@@ -57,7 +103,8 @@ function ModelPicker({
                         onSelect={handleModelSelect}
                         basePath={basePath}
                     />
-                </div>
+                </div>,
+                document.body
             )}
         </div>
     );

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

@@ -3,7 +3,7 @@ import type { RigidBodyOptions, CollisionPayload, IntersectionEnterPayload, Inte
 import type { ReactNode } from 'react';
 import { useRef, useEffect, useCallback } from 'react';
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
 import { ComponentData } from "../types";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 
@@ -11,92 +11,51 @@ export type PhysicsProps = RigidBodyOptions & {
     activeCollisionTypes?: 'all' | undefined;
 };
 
-const physicsFields: FieldDefinition[] = [
-    {
-        name: 'type',
-        type: 'select',
-        label: 'Type',
-        options: [
-            { value: 'dynamic', label: 'Dynamic' },
-            { value: 'fixed', label: 'Fixed' },
-            { value: 'kinematicPosition', label: 'Kinematic Position' },
-            { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
-        ],
-    },
-    {
-        name: 'colliders',
-        type: 'select',
-        label: 'Collider',
-        options: [
-            { value: 'hull', label: 'Hull (convex)' },
-            { value: 'trimesh', label: 'Trimesh (exact)' },
-            { value: 'cuboid', label: 'Cuboid (box)' },
-            { value: 'ball', label: 'Ball (sphere)' },
-        ],
-    },
-    {
-        name: 'mass',
-        type: 'number',
-        label: 'Mass',
-    },
-    {
-        name: 'restitution',
-        type: 'number',
-        label: 'Restitution (Bounciness)',
-        min: 0,
-        max: 1,
-        step: 0.1,
-    },
-    {
-        name: 'friction',
-        type: 'number',
-        label: 'Friction',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'linearDamping',
-        type: 'number',
-        label: 'Linear Damping',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'angularDamping',
-        type: 'number',
-        label: 'Angular Damping',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'gravityScale',
-        type: 'number',
-        label: 'Gravity Scale',
-        step: 0.1,
-    },
-    {
-        name: 'sensor',
-        type: 'boolean',
-        label: 'Sensor (Trigger Only)',
-    },
-    {
-        name: 'activeCollisionTypes',
-        type: 'select',
-        label: 'Collision Detection',
-        options: [
-            { value: '', label: 'Default (Dynamic only)' },
-            { value: 'all', label: 'All (includes kinematic & fixed)' },
-        ],
-    },
-];
-
 function PhysicsComponentEditor({ component, onUpdate }: { component: ComponentData; onUpdate: (newComp: any) => void }) {
     return (
-        <FieldRenderer
-            fields={physicsFields}
-            values={component.properties}
-            onChange={onUpdate}
-        />
+        <FieldGroup>
+            <SelectField
+                name="type"
+                label="Type"
+                values={component.properties}
+                onChange={onUpdate}
+                options={[
+                    { value: 'dynamic', label: 'Dynamic' },
+                    { value: 'fixed', label: 'Fixed' },
+                    { value: 'kinematicPosition', label: 'Kinematic Position' },
+                    { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
+                ]}
+            />
+            <SelectField
+                name="colliders"
+                label="Collider"
+                values={component.properties}
+                onChange={onUpdate}
+                options={[
+                    { value: 'hull', label: 'Hull (convex)' },
+                    { value: 'trimesh', label: 'Trimesh (exact)' },
+                    { value: 'cuboid', label: 'Cuboid (box)' },
+                    { value: 'ball', label: 'Ball (sphere)' },
+                ]}
+            />
+            <NumberField name="mass" label="Mass" values={component.properties} onChange={onUpdate} fallback={1} step={0.1} min={0} />
+            <NumberField name="restitution" label="Restitution (Bounciness)" values={component.properties} onChange={onUpdate} fallback={0} min={0} max={1} step={0.1} />
+            <NumberField name="friction" label="Friction" values={component.properties} onChange={onUpdate} fallback={0.5} min={0} step={0.1} />
+            <NumberField name="linearDamping" label="Linear Damping" values={component.properties} onChange={onUpdate} fallback={0} min={0} step={0.1} />
+            <NumberField name="angularDamping" label="Angular Damping" values={component.properties} onChange={onUpdate} fallback={0} min={0} step={0.1} />
+            <NumberField name="gravityScale" label="Gravity Scale" values={component.properties} onChange={onUpdate} fallback={1} step={0.1} />
+            <BooleanField name="sensor" label="Sensor (Trigger Only)" values={component.properties} onChange={onUpdate} fallback={false} />
+            <SelectField
+                name="activeCollisionTypes"
+                label="Collision Detection"
+                values={component.properties}
+                onChange={onUpdate}
+                options={[
+                    { value: '', label: 'Default (Dynamic only)' },
+                    { value: 'all', label: 'All (includes kinematic & fixed)' },
+                ]}
+            />
+        </FieldGroup>
     );
 }
 

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

@@ -1,27 +1,23 @@
 import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
-import { FieldRenderer, FieldDefinition } from "./Input";
-
-const spotLightFields: FieldDefinition[] = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-    { name: 'angle', type: 'number', label: 'Angle', step: 0.1, min: 0, max: Math.PI },
-    { name: 'penumbra', type: 'number', label: 'Penumbra', step: 0.1, min: 0, max: 1 },
-    { name: 'distance', type: 'number', label: 'Distance', step: 1, min: 0 },
-    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
-];
+import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
+import { useHelper } from "@react-three/drei";
+import { SpotLightHelper } from "three";
 
 function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
     return (
-        <FieldRenderer
-            fields={spotLightFields}
-            values={component.properties}
-            onChange={onUpdate}
-        />
+        <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} />
+        </FieldGroup>
     );
 }
 
-function SpotLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {
+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;
@@ -32,6 +28,8 @@ function SpotLightView({ properties, editMode }: { properties: any; editMode?: b
     const spotLightRef = useRef<any>(null);
     const targetRef = useRef<any>(null);
 
+    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
+
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;