react-three-game 0.0.55 → 0.0.57

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -6,7 +6,8 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { exportGLB } from "./utils";
+import { exportGLB, createModelNode, createImageNode } from "./utils";
+import { parseModelFromFile } from "../dragdrop/modelLoader";
 
 export interface PrefabEditorRef {
     screenshot: () => void;
@@ -35,13 +36,16 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
     initialPrefab?: Prefab;
     physics?: boolean;
     onPrefabChange?: (prefab: Prefab) => void;
+    uiPlugins?: React.ReactNode[] | React.ReactNode;
     children?: React.ReactNode;
-}>(({ basePath, initialPrefab, physics = true, onPrefabChange, children }, ref) => {
+}>(({ basePath, initialPrefab, physics = true, onPrefabChange, uiPlugins, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
     const [snapResolution, setSnapResolution] = useState(0);
+    const [positionSnap, setPositionSnap] = useState(0.5);
+    const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
     const [history, setHistory] = useState<Prefab[]>([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const throttleRef = useRef<NodeJS.Timeout | null>(null);
@@ -120,11 +124,73 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         });
     };
 
+    const handleFocusNode = (nodeId: string) => {
+        prefabRootRef.current?.focusNode(nodeId);
+    };
+
     useEffect(() => {
         const canvas = document.querySelector('canvas');
         if (canvas) canvasRef.current = canvas;
     }, []);
 
+    // --- Drag & drop files to add nodes ---
+    useEffect(() => {
+        const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'bmp', 'svg'];
+        const MODEL_EXTS = ['glb', 'gltf', 'fbx'];
+
+        function handleDragOver(e: DragEvent) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        function handleDrop(e: DragEvent) {
+            e.preventDefault();
+            e.stopPropagation();
+            const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+            files.forEach(file => {
+                const ext = file.name.split('.').pop()?.toLowerCase();
+                if (!ext) return;
+
+                const baseName = file.name.replace(/\.[^.]+$/, '');
+
+                if (MODEL_EXTS.includes(ext)) {
+                    const modelPath = `models/${file.name}`;
+                    const newNode = createModelNode(modelPath, baseName);
+
+                    updatePrefab(prev => ({
+                        ...prev,
+                        root: { ...prev.root, children: [...(prev.root.children ?? []), newNode] }
+                    }));
+
+                    parseModelFromFile(file).then(result => {
+                        if (result.success && result.model) {
+                            prefabRootRef.current?.injectModel(modelPath, result.model);
+                        } else {
+                            console.error('Drop parse error:', result.error);
+                        }
+                    });
+                } else if (IMAGE_EXTS.includes(ext)) {
+                    const texturePath = `textures/${file.name}`;
+                    const newNode = createImageNode(texturePath, baseName);
+
+                    updatePrefab(prev => ({
+                        ...prev,
+                        root: { ...prev.root, children: [...(prev.root.children ?? []), newNode] }
+                    }));
+
+                    // Inject a blob URL texture so it renders immediately
+                    prefabRootRef.current?.injectTexture(texturePath, file);
+                }
+            });
+        }
+
+        window.addEventListener('dragover', handleDragOver);
+        window.addEventListener('drop', handleDrop);
+        return () => {
+            window.removeEventListener('dragover', handleDragOver);
+            window.removeEventListener('drop', handleDrop);
+        };
+    }, [loadedPrefab]);
+
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,
@@ -155,10 +221,15 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         setTransformMode,
         snapResolution,
         setSnapResolution,
+        positionSnap,
+        setPositionSnap,
+        rotationSnap,
+        setRotationSnap,
+        onFocusNode: handleFocusNode,
         onScreenshot: handleScreenshot,
         onExportGLB: handleExportGLB
     }}>
-        <GameCanvas>
+        <GameCanvas camera={{ position: [0, 5, 15] }}>
             {physics ? (
                 <Physics debug={editMode} paused={editMode}>
                     {content}
@@ -170,8 +241,9 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
             <button style={base.btn} onClick={() => setEditMode(!editMode)}>
                 {editMode ? "▶" : "⏸"}
             </button>
+            {uiPlugins}
         </div>
-        {editMode && <EditorUI
+        <EditorUI
             prefabData={loadedPrefab}
             setPrefabData={updatePrefab}
             selectedId={selectedId}
@@ -181,7 +253,7 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
             onRedo={redo}
             canUndo={historyIndex > 0}
             canRedo={historyIndex < history.length - 1}
-        />}
+        />
     </EditorContext.Provider>
 });
 

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -8,7 +8,7 @@ import { getComponent, registerComponent, getNonComposableKeys } from "./compone
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
-import { updateNode } from "./utils";
+import { focusCameraOnObject, updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
 import { EditorContext } from "./EditorContext";
 
@@ -22,6 +22,9 @@ 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;
+    focusNode: (nodeId: string) => void;
 }
 
 export const PrefabRoot = forwardRef<PrefabRootRef, {
@@ -38,20 +41,50 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
     const editorContext = useContext(EditorContext);
     const transformMode = editorContext?.transformMode ?? "translate";
     const snapResolution = editorContext?.snapResolution ?? 0;
+    const positionSnap = editorContext?.positionSnap ?? 0.5;
+    const rotationSnap = editorContext?.rotationSnap ?? Math.PI / 4;
 
     // prefab root state
     const [models, setModels] = useState<Record<string, Object3D>>({});
     const [textures, setTextures] = useState<Record<string, Texture>>({});
     const loading = useRef(new Set<string>());
+    const failedTextures = useRef(new Set<string>());
     const objectRefs = useRef<Record<string, Object3D | null>>({});
     const rigidBodyRefs = useRef<Map<string, RapierRigidBody | null>>(new Map());
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
     const rootRef = useRef<Group>(null);
+    const controlsRef = useRef<any>(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,
+        focusNode: (nodeId: string) => {
+            const object = objectRefs.current[nodeId];
+            const controls = controlsRef.current;
+            const camera = controls?.object;
+
+            if (!object || !controls || !camera) return;
+
+            focusCameraOnObject(object, camera, controls.target, () => controls.update?.());
+        }
+    }), [injectModel, injectTexture]);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;
@@ -109,6 +142,8 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
                 modelsToLoad.add(node.components.model.properties.filename);
             node.components?.material?.properties?.texture &&
                 texturesToLoad.add(node.components.material.properties.texture);
+            node.components?.material?.properties?.normalMapTexture &&
+                texturesToLoad.add(node.components.material.properties.normalMapTexture);
         });
 
         modelsToLoad.forEach(async file => {
@@ -126,7 +161,7 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
 
         const loader = new TextureLoader();
         texturesToLoad.forEach(file => {
-            if (textures[file] || loading.current.has(file)) return;
+            if (textures[file] || loading.current.has(file) || failedTextures.current.has(file)) return;
             loading.current.add(file);
 
             // Handle full URLs (http/https) or regular paths
@@ -140,8 +175,9 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
                 tex.colorSpace = SRGBColorSpace;
                 setTextures(t => ({ ...t, [file]: tex }));
             }, undefined, (err) => {
-                console.error(`Failed to load texture: ${path}`, err);
+                console.warn(`Failed to load texture: ${path}`, err);
                 loading.current.delete(file);
+                failedTextures.current.add(file);
             });
         });
     }, [data, models, textures]);
@@ -171,16 +207,16 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
 
             {editMode && (
                 <>
-                    <MapControls makeDefault />
+                    <MapControls ref={controlsRef} makeDefault />
                     {selectedObject && (
                         <TransformControls
-                            key={`transform-${snapResolution}`}
+                            key={`transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`}
                             object={selectedObject}
                             mode={transformMode}
                             space="local"
                             onObjectChange={onTransformChange}
-                            translationSnap={snapResolution > 0 ? snapResolution : undefined}
-                            rotationSnap={snapResolution > 0 ? snapResolution : undefined}
+                            translationSnap={positionSnap > 0 ? positionSnap : undefined}
+                            rotationSnap={rotationSnap > 0 ? rotationSnap : undefined}
                             scaleSnap={snapResolution > 0 ? snapResolution : undefined}
                         />
                     )}
@@ -343,6 +379,19 @@ function StandardNode({
     const physicsDef = hasPhysics ? getComponent("Physics") : null;
     const isInstanced = gameObject.components?.model?.properties?.instanced;
     const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    const renderCtx = createRenderContext(loadedModels, loadedTextures, editMode, selectedId, registerRef);
+    const childNodes = getChildHostComponents(gameObject).length > 0
+        ? renderHostedChildren(gameObject, renderCtx, world)
+        : renderSceneChildren(gameObject, world, {
+            selectedId,
+            onSelect,
+            onClick,
+            registerRef,
+            registerRigidBodyRef,
+            loadedModels,
+            loadedTextures,
+            editMode,
+        });
 
     const inner = (
         <group
@@ -350,22 +399,7 @@ function StandardNode({
             onPointerMove={editMode ? () => (clickValid.current = false) : undefined}
             onPointerUp={editMode ? onUp : undefined}
         >
-            {renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix)}
-            {gameObject.children?.map(child => (
-                <GameObjectRenderer
-                    key={child.id}
-                    gameObject={child}
-                    selectedId={selectedId}
-                    onSelect={onSelect}
-                    onClick={onClick}
-                    registerRef={registerRef}
-                    registerRigidBodyRef={registerRigidBodyRef}
-                    loadedModels={loadedModels}
-                    loadedTextures={loadedTextures}
-                    editMode={editMode}
-                    parentMatrix={world}
-                />
-            ))}
+            {renderCompositionNode(gameObject, renderCtx, parentMatrix, childNodes)}
         </group>
     );
 
@@ -449,6 +483,74 @@ interface RendererProps {
     parentMatrix?: Matrix4;
 }
 
+const CHILD_HOST_COMPONENT_TYPES = new Set(["Environment"]);
+
+function isChildHostType(type: string) {
+    return CHILD_HOST_COMPONENT_TYPES.has(type);
+}
+
+function getChildHostComponents(gameObject: GameObjectType) {
+    return Object.entries(gameObject.components ?? {}).flatMap(([key, comp]) => {
+        if (!comp?.type || !isChildHostType(comp.type)) return [];
+
+        const def = getComponent(comp.type);
+        if (!def?.View) return [];
+
+        return { key, View: def.View, properties: comp.properties };
+    });
+}
+
+interface RenderContext {
+    loadedModels: Record<string, Object3D>;
+    loadedTextures: Record<string, Texture>;
+    editMode?: boolean;
+    selectedId?: string | null;
+    registerRef: (id: string, obj: Object3D | null) => void;
+}
+
+interface RuntimeChildRendererProps {
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    registerRef: (id: string, obj: Object3D | null) => void;
+    registerRigidBodyRef: (id: string, rb: any) => void;
+    loadedModels: Record<string, Object3D>;
+    loadedTextures: Record<string, Texture>;
+    editMode?: boolean;
+}
+
+function createRenderContext(
+    loadedModels: Record<string, Object3D>,
+    loadedTextures: Record<string, Texture>,
+    editMode: boolean | undefined,
+    selectedId: string | null | undefined,
+    registerRef: (id: string, obj: Object3D | null) => void,
+): RenderContext {
+    return { loadedModels, loadedTextures, editMode, selectedId, registerRef };
+}
+
+function renderSceneChildren(
+    gameObject: GameObjectType,
+    parentMatrix: Matrix4,
+    props: RuntimeChildRendererProps,
+) {
+    return gameObject.children?.map(child =>
+        <GameObjectRenderer
+            key={child.id}
+            gameObject={child}
+            selectedId={props.selectedId}
+            onSelect={props.onSelect}
+            onClick={props.onClick}
+            registerRef={props.registerRef}
+            registerRigidBodyRef={props.registerRigidBodyRef}
+            loadedModels={props.loadedModels}
+            loadedTextures={props.loadedTextures}
+            editMode={props.editMode}
+            parentMatrix={parentMatrix}
+        />
+    );
+}
+
 function walk(node: GameObjectType, fn: (n: GameObjectType) => void) {
     fn(node);
     node.children?.forEach(c => walk(c, fn));
@@ -499,14 +601,55 @@ function computeParentWorldMatrix(root: GameObjectType, targetId: string): Matri
     return result ?? IDENTITY;
 }
 
-function renderCoreNode(
+function renderCompositionSubtree(
     gameObject: GameObjectType,
-    ctx: {
-        loadedModels: Record<string, Object3D>;
-        loadedTextures: Record<string, Texture>;
-        editMode?: boolean;
-        registerRef: (id: string, obj: Object3D | null) => void;
-    },
+    ctx: RenderContext,
+    parentMatrix = IDENTITY
+): React.ReactNode {
+    if (!gameObject || gameObject.disabled) return null;
+
+    const transform = getNodeTransformProps(gameObject);
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const childNodes = renderHostedChildren(gameObject, ctx, world);
+
+    return (
+        <group
+            key={gameObject.id}
+            position={transform.position}
+            rotation={transform.rotation}
+            scale={transform.scale}
+        >
+            {renderCompositionNode(gameObject, ctx, parentMatrix, childNodes)}
+        </group>
+    );
+}
+
+function renderHostedChildren(
+    gameObject: GameObjectType,
+    ctx: RenderContext,
+    parentMatrix: Matrix4,
+) {
+    return gameObject.children?.map(child =>
+        renderCompositionSubtree(child, ctx, parentMatrix)
+    );
+}
+
+function renderCompositionNode(
+    gameObject: GameObjectType,
+    ctx: RenderContext,
+    parentMatrix?: Matrix4,
+    childNodes?: React.ReactNode
+) {
+    const ownContent = renderNodeOwnContent(gameObject, ctx, parentMatrix);
+    const siblingContent = renderNodeSiblingComponents(gameObject, ctx, parentMatrix);
+    const subtree = <>{ownContent}{siblingContent}{childNodes}</>;
+
+    return wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree);
+}
+
+function renderNodeOwnContent(
+    gameObject: GameObjectType,
+    ctx: RenderContext,
     parentMatrix?: Matrix4
 ) {
     const geometry = gameObject.components?.geometry;
@@ -523,31 +666,12 @@ function renderCoreNode(
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
         editMode: ctx.editMode,
+        isSelected: ctx.selectedId === gameObject.id,
+        nodeId: gameObject.id,
         parentMatrix,
         registerRef: ctx.registerRef,
     };
 
-    const wrappers: Array<{ key: string; View: any; properties: any }> = [];
-    const leaves: React.ReactNode[] = [];
-
-    if (gameObject.components) {
-        Object.entries(gameObject.components)
-            .filter(([k]) => !getNonComposableKeys().includes(k))
-            .forEach(([key, comp]) => {
-                if (!comp?.type) return;
-                const def = getComponent(comp.type);
-                if (!def?.View) return;
-
-                if (def.View.toString().includes("children")) {
-                    wrappers.push({ key, View: def.View, properties: comp.properties });
-                } else {
-                    leaves.push(
-                        <def.View key={key} properties={comp.properties} {...contextProps} />
-                    );
-                }
-            });
-    }
-
     let core: React.ReactNode;
 
     if (model && modelDef?.View) {
@@ -560,7 +684,6 @@ function renderCoreNode(
                         {...contextProps}
                     />
                 )}
-                {leaves}
             </modelDef.View>
         );
     } else if (geometry && geometryDef?.View) {
@@ -574,27 +697,73 @@ function renderCoreNode(
                         {...contextProps}
                     />
                 )}
-                {leaves}
             </mesh>
         );
     } else if (text && textDef?.View) {
         core = (
             <>
                 <textDef.View properties={text.properties} {...contextProps} />
-                {leaves}
             </>
         );
     } else {
-        core = <>{leaves}</>;
+        core = null;
     }
 
-    return wrappers.reduce(
+    return core;
+}
+
+function renderNodeSiblingComponents(
+    gameObject: GameObjectType,
+    ctx: RenderContext,
+    parentMatrix?: Matrix4
+) {
+    const contextProps = {
+        loadedModels: ctx.loadedModels,
+        loadedTextures: ctx.loadedTextures,
+        editMode: ctx.editMode,
+        isSelected: ctx.selectedId === gameObject.id,
+        nodeId: gameObject.id,
+        parentMatrix,
+        registerRef: ctx.registerRef,
+    };
+
+    return Object.entries(gameObject.components ?? {})
+        .filter(([key]) => !getNonComposableKeys().includes(key))
+        .flatMap(([key, comp]) => {
+            if (!comp?.type || isChildHostType(comp.type)) return [];
+
+            const def = getComponent(comp.type);
+            if (!def?.View) return [];
+
+            return <def.View key={key} properties={comp.properties} {...contextProps} />;
+        });
+}
+
+function wrapWithChildHosts(
+    gameObject: GameObjectType,
+    ctx: RenderContext,
+    parentMatrix: Matrix4 | undefined,
+    subtree: React.ReactNode
+) {
+    const contextProps = {
+        loadedModels: ctx.loadedModels,
+        loadedTextures: ctx.loadedTextures,
+        editMode: ctx.editMode,
+        isSelected: ctx.selectedId === gameObject.id,
+        nodeId: gameObject.id,
+        parentMatrix,
+        registerRef: ctx.registerRef,
+    };
+
+    const childHosts = getChildHostComponents(gameObject);
+
+    return childHosts.reduce(
         (acc, { key, View, properties }) => (
             <View key={key} properties={properties} {...contextProps}>
                 {acc}
             </View>
         ),
-        core
+        subtree
     );
 }
 

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

@@ -1,10 +1,5 @@
 import { Component } from "./ComponentRegistry";
-import { FieldRenderer, FieldDefinition } from "./Input";
-
-const ambientLightFields: FieldDefinition[] = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-];
+import { ColorField, FieldGroup, NumberField } from "./Input";
 
 function AmbientLightComponentEditor({
     component,
@@ -14,11 +9,10 @@ function AmbientLightComponentEditor({
     onUpdate: (newProps: any) => void;
 }) {
     return (
-        <FieldRenderer
-            fields={ambientLightFields}
-            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} />
+        </FieldGroup>
     );
 }
 

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

@@ -0,0 +1,80 @@
+import { PerspectiveCamera, useHelper } from '@react-three/drei';
+import { useRef } from 'react';
+import { CameraHelper, PerspectiveCamera as ThreePerspectiveCamera } from 'three';
+import { Component } from './ComponentRegistry';
+import { FieldGroup, NumberField } from './Input';
+
+function CameraComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return (
+        <FieldGroup>
+            <NumberField
+                name="fov"
+                label="FOV"
+                values={component.properties}
+                onChange={onUpdate}
+                fallback={50}
+                min={1}
+                max={179}
+                step={1}
+            />
+            <NumberField
+                name="near"
+                label="Near"
+                values={component.properties}
+                onChange={onUpdate}
+                fallback={0.1}
+                min={0.001}
+                step={0.1}
+            />
+            <NumberField
+                name="zoom"
+                label="Zoom"
+                values={component.properties}
+                onChange={onUpdate}
+                fallback={1}
+                min={0.01}
+                step={0.1}
+            />
+            <NumberField
+                name="far"
+                label="Far"
+                values={component.properties}
+                onChange={onUpdate}
+                fallback={1000}
+                min={0.1}
+                step={1}
+            />
+        </FieldGroup>
+    );
+}
+
+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);
+
+    useHelper(editMode && isSelected ? (cameraRef as React.RefObject<ThreePerspectiveCamera>) : null, CameraHelper);
+
+    return (
+        <>
+            <PerspectiveCamera ref={cameraRef} makeDefault={!editMode} fov={fov} near={near} zoom={zoom} far={far} />
+            {editMode && !isSelected ? (
+                <mesh>
+                    <boxGeometry args={[0.34, 0.22, 0.18]} />
+                    <meshBasicMaterial color="#22d3ee" wireframe />
+                </mesh>
+            ) : null}
+        </>
+    );
+}
+
+const CameraComponent: Component = {
+    name: 'Camera',
+    Editor: CameraComponentEditor,
+    View: CameraComponentView,
+    defaultProperties: {},
+};
+
+export default CameraComponent;

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

@@ -80,7 +80,7 @@ function DirectionalLightComponentEditor({ component, onUpdate }: { component: a
     );
 }
 
-function DirectionalLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {
+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;
@@ -138,7 +138,7 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
             />
             {/* Target object - rendered declaratively in scene graph */}
             <object3D ref={targetRef} />
-            {editMode && (
+            {editMode && isSelected && (
                 <>
                     {/* Light source indicator */}
                     <mesh>