react-three-game 0.0.56 → 0.0.58

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";
 
@@ -24,6 +24,7 @@ export interface PrefabRootRef {
     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, {
@@ -40,15 +41,19 @@ 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 }));
@@ -69,7 +74,16 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
         injectModel,
-        injectTexture
+        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) => {
@@ -128,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 => {
@@ -145,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
@@ -159,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]);
@@ -190,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}
                         />
                     )}
@@ -362,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
@@ -369,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>
     );
 
@@ -468,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));
@@ -518,14 +601,55 @@ function computeParentWorldMatrix(root: GameObjectType, targetId: string): Matri
     return result ?? IDENTITY;
 }
 
-function renderCoreNode(
+function renderCompositionSubtree(
+    gameObject: GameObjectType,
+    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: {
-        loadedModels: Record<string, Object3D>;
-        loadedTextures: Record<string, Texture>;
-        editMode?: boolean;
-        registerRef: (id: string, obj: Object3D | null) => void;
-    },
+    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;
@@ -542,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) {
@@ -579,7 +684,6 @@ function renderCoreNode(
                         {...contextProps}
                     />
                 )}
-                {leaves}
             </modelDef.View>
         );
     } else if (geometry && geometryDef?.View) {
@@ -593,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,117 @@
+import { PerspectiveCamera } from '@react-three/drei';
+import { useEffect, useMemo, useState } from 'react';
+import { CameraHelper, PerspectiveCamera as ThreePerspectiveCamera } from 'three';
+import { useFrame } from '@react-three/fiber';
+import { Component } from './ComponentRegistry';
+import { FieldGroup, NumberField } from './Input';
+
+const cameraDefaults = {
+    fov: 50,
+    near: 0.1,
+    zoom: 1,
+    far: 1000,
+};
+
+function CameraComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const values = { ...cameraDefaults, ...component.properties };
+
+    return (
+        <FieldGroup>
+            <NumberField
+                name="fov"
+                label="FOV"
+                values={values}
+                onChange={onUpdate}
+                fallback={50}
+                min={1}
+                max={179}
+                step={1}
+            />
+            <NumberField
+                name="near"
+                label="Near"
+                values={values}
+                onChange={onUpdate}
+                fallback={0.1}
+                min={0.001}
+                step={0.1}
+            />
+            <NumberField
+                name="zoom"
+                label="Zoom"
+                values={values}
+                onChange={onUpdate}
+                fallback={1}
+                min={0.01}
+                step={0.1}
+            />
+            <NumberField
+                name="far"
+                label="Far"
+                values={values}
+                onChange={onUpdate}
+                fallback={1000}
+                min={0.1}
+                step={1}
+            />
+        </FieldGroup>
+    );
+}
+
+function CameraComponentView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
+    const merged = { ...cameraDefaults, ...properties };
+    const fov = merged.fov;
+    const near = merged.near;
+    const zoom = merged.zoom;
+    const far = merged.far;
+    const [camera, setCamera] = useState<ThreePerspectiveCamera | null>(null);
+    const cameraHelper = useMemo(
+        () => camera ? new CameraHelper(camera) : null,
+        [camera]
+    );
+
+    useEffect(() => {
+        return () => {
+            cameraHelper?.dispose();
+        };
+    }, [cameraHelper]);
+
+    useFrame(() => {
+        if (camera && cameraHelper && editMode && isSelected) {
+            camera.updateProjectionMatrix();
+            camera.updateMatrixWorld();
+            cameraHelper.update();
+        }
+    });
+
+    return (
+        <>
+            <PerspectiveCamera
+                ref={(instance) => setCamera(instance)}
+                makeDefault={!editMode}
+                fov={fov}
+                near={near}
+                zoom={zoom}
+                far={far}
+            />
+            {editMode && isSelected && cameraHelper && (
+                <primitive object={cameraHelper} />
+            )}
+            {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: cameraDefaults,
+};
+
+export default CameraComponent;

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

@@ -1,11 +1,25 @@
 import { Component } from "./ComponentRegistry";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
-import { DirectionalLight, Object3D, Vector3 } from "three";
+import { CameraHelper, DirectionalLight, Object3D, OrthographicCamera, Vector3 } from "three";
 import { FieldRenderer, FieldDefinition, Input } from "./Input";
 
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 } as const;
 
+const directionalLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    castShadow: true,
+    shadowMapSize: 1024,
+    shadowCameraNear: 0.1,
+    shadowCameraFar: 100,
+    shadowCameraTop: 30,
+    shadowCameraBottom: -30,
+    shadowCameraLeft: -30,
+    shadowCameraRight: 30,
+    targetOffset: [0, -5, 0],
+};
+
 const directionalLightFields: FieldDefinition[] = [
     { name: 'color', type: 'color', label: 'Color' },
     { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
@@ -71,51 +85,66 @@ const directionalLightFields: FieldDefinition[] = [
 ];
 
 function DirectionalLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    const values = { ...directionalLightDefaults, ...component.properties };
+    const fields = values.castShadow
+        ? directionalLightFields
+        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
+
     return (
         <FieldRenderer
-            fields={directionalLightFields}
-            values={component.properties}
+            fields={fields}
+            values={values}
             onChange={onUpdate}
         />
     );
 }
 
-function DirectionalLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {
-    const color = properties.color ?? '#ffffff';
-    const intensity = properties.intensity ?? 1.0;
-    const castShadow = properties.castShadow ?? true;
-    const shadowMapSize = properties.shadowMapSize ?? 1024;
-    const shadowCameraNear = properties.shadowCameraNear ?? 0.1;
-    const shadowCameraFar = properties.shadowCameraFar ?? 100;
-    const shadowCameraTop = properties.shadowCameraTop ?? 30;
-    const shadowCameraBottom = properties.shadowCameraBottom ?? -30;
-    const shadowCameraLeft = properties.shadowCameraLeft ?? -30;
-    const shadowCameraRight = properties.shadowCameraRight ?? 30;
-    const targetOffset = properties.targetOffset ?? [0, -5, 0];
+function DirectionalLightView({ properties, editMode, isSelected }: { properties: any; editMode?: boolean; isSelected?: boolean }) {
+    const merged = { ...directionalLightDefaults, ...properties };
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const castShadow = merged.castShadow;
+    const shadowMapSize = merged.shadowMapSize;
+    const shadowCameraNear = merged.shadowCameraNear;
+    const shadowCameraFar = merged.shadowCameraFar;
+    const shadowCameraTop = merged.shadowCameraTop;
+    const shadowCameraBottom = merged.shadowCameraBottom;
+    const shadowCameraLeft = merged.shadowCameraLeft;
+    const shadowCameraRight = merged.shadowCameraRight;
+    const targetOffset = merged.targetOffset;
 
     const directionalLightRef = useRef<DirectionalLight>(null);
     const targetRef = useRef<Object3D>(null);
+    const [shadowCamera, setShadowCamera] = useState<OrthographicCamera | null>(null);
+    const shadowCameraHelper = useMemo(
+        () => shadowCamera ? new CameraHelper(shadowCamera) : null,
+        [shadowCamera]
+    );
 
-    // Set up light target reference when both refs are ready
+    useEffect(() => {
+        return () => {
+            shadowCameraHelper?.dispose();
+        };
+    }, [shadowCameraHelper]);
+
+    // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
+            setShadowCamera(directionalLightRef.current.shadow.camera);
         }
     }, []);
 
-    // Update target world position based on light position + offset
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current) return;
 
-        const lightWorldPos = new Vector3();
-        directionalLightRef.current.getWorldPosition(lightWorldPos);
+        directionalLightRef.current.target.updateMatrixWorld();
 
-        // Target is positioned relative to light's world position
-        targetRef.current.position.set(
-            lightWorldPos.x + targetOffset[0],
-            lightWorldPos.y + targetOffset[1],
-            lightWorldPos.z + targetOffset[2]
-        );
+        if (shadowCamera && shadowCameraHelper && castShadow) {
+            shadowCamera.updateProjectionMatrix();
+            shadowCamera.updateMatrixWorld();
+            shadowCameraHelper.update();
+        }
     });
 
     return (
@@ -136,9 +165,11 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
                 shadow-bias={-0.001}
                 shadow-normalBias={0.02}
             />
-            {/* Target object - rendered declaratively in scene graph */}
-            <object3D ref={targetRef} />
-            {editMode && (
+            <object3D ref={targetRef} position={targetOffset as [number, number, number]} />
+            {editMode && isSelected && castShadow && shadowCameraHelper && (
+                <primitive object={shadowCameraHelper} />
+            )}
+            {editMode && isSelected && (
                 <>
                     {/* Light source indicator */}
                     <mesh>
@@ -173,7 +204,7 @@ const DirectionalLightComponent: Component = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: {}
+    defaultProperties: directionalLightDefaults
 };
 
 export default DirectionalLightComponent;