react-three-game 0.0.56 → 0.0.58

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -15,24 +15,28 @@ 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 { EditorContext } from "./EditorContext";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
 export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     // optional editor context
     const editorContext = useContext(EditorContext);
     const transformMode = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.transformMode) !== null && _a !== void 0 ? _a : "translate";
     const snapResolution = (_b = editorContext === null || editorContext === void 0 ? void 0 : editorContext.snapResolution) !== null && _b !== void 0 ? _b : 0;
+    const positionSnap = (_c = editorContext === null || editorContext === void 0 ? void 0 : editorContext.positionSnap) !== null && _c !== void 0 ? _c : 0.5;
+    const rotationSnap = (_d = editorContext === null || editorContext === void 0 ? void 0 : editorContext.rotationSnap) !== null && _d !== void 0 ? _d : Math.PI / 4;
     // prefab root state
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const loading = useRef(new Set());
+    const failedTextures = useRef(new Set());
     const objectRefs = useRef({});
     const rigidBodyRefs = useRef(new Map());
     const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
+    const controlsRef = useRef(null);
     const injectModel = useCallback((filename, model) => {
         setModels(m => (Object.assign(Object.assign({}, m), { [filename]: model })));
     }, []);
@@ -50,7 +54,15 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
         injectModel,
-        injectTexture
+        injectTexture,
+        focusNode: (nodeId) => {
+            const object = objectRefs.current[nodeId];
+            const controls = controlsRef.current;
+            const camera = controls === null || controls === void 0 ? void 0 : controls.object;
+            if (!object || !controls || !camera)
+                return;
+            focusCameraOnObject(object, camera, controls.target, () => { var _a; return (_a = controls.update) === null || _a === void 0 ? void 0 : _a.call(controls); });
+        }
     }), [injectModel, injectTexture]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
@@ -92,11 +104,13 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         const modelsToLoad = new Set();
         const texturesToLoad = new Set();
         walk(data.root, node => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename) &&
                 modelsToLoad.add(node.components.model.properties.filename);
             ((_f = (_e = (_d = node.components) === null || _d === void 0 ? void 0 : _d.material) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.texture) &&
                 texturesToLoad.add(node.components.material.properties.texture);
+            ((_j = (_h = (_g = node.components) === null || _g === void 0 ? void 0 : _g.material) === null || _h === void 0 ? void 0 : _h.properties) === null || _j === void 0 ? void 0 : _j.normalMapTexture) &&
+                texturesToLoad.add(node.components.material.properties.normalMapTexture);
         });
         modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
             if (models[file] || loading.current.has(file))
@@ -111,7 +125,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         }));
         const loader = new TextureLoader();
         texturesToLoad.forEach(file => {
-            if (textures[file] || loading.current.has(file))
+            if (textures[file] || loading.current.has(file) || failedTextures.current.has(file))
                 return;
             loading.current.add(file);
             // Handle full URLs (http/https) or regular paths
@@ -124,12 +138,13 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 tex.colorSpace = SRGBColorSpace;
                 setTextures(t => (Object.assign(Object.assign({}, 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]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: snapResolution > 0 ? snapResolution : undefined, rotationSnap: snapResolution > 0 ? snapResolution : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${snapResolution}`))] }))] }));
+    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
 });
 export function GameObjectRenderer(props) {
     var _a, _b, _c;
@@ -187,7 +202,7 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
 }
 function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
     const clickValid = useRef(false);
@@ -219,7 +234,20 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
     const physicsDef = hasPhysics ? getComponent("Physics") : null;
     const isInstanced = (_e = (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.instanced;
     const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
-    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
+    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 = (_jsx("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: renderCompositionNode(gameObject, renderCtx, parentMatrix, childNodes) }));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
     }
@@ -228,6 +256,28 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
     }
     return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
 }
+const CHILD_HOST_COMPONENT_TYPES = new Set(["Environment"]);
+function isChildHostType(type) {
+    return CHILD_HOST_COMPONENT_TYPES.has(type);
+}
+function getChildHostComponents(gameObject) {
+    var _a;
+    return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).flatMap(([key, comp]) => {
+        if (!(comp === null || comp === void 0 ? void 0 : comp.type) || !isChildHostType(comp.type))
+            return [];
+        const def = getComponent(comp.type);
+        if (!(def === null || def === void 0 ? void 0 : def.View))
+            return [];
+        return { key, View: def.View, properties: comp.properties };
+    });
+}
+function createRenderContext(loadedModels, loadedTextures, editMode, selectedId, registerRef) {
+    return { loadedModels, loadedTextures, editMode, selectedId, registerRef };
+}
+function renderSceneChildren(gameObject, parentMatrix, props) {
+    var _a;
+    return (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => _jsx(GameObjectRenderer, { 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 }, child.id));
+}
 function walk(node, fn) {
     var _a;
     fn(node);
@@ -270,7 +320,25 @@ function computeParentWorldMatrix(root, targetId) {
     visit(root, IDENTITY);
     return result !== null && result !== void 0 ? result : IDENTITY;
 }
-function renderCoreNode(gameObject, ctx, parentMatrix) {
+function renderCompositionSubtree(gameObject, ctx, parentMatrix = IDENTITY) {
+    if (!gameObject || gameObject.disabled)
+        return null;
+    const transform = getNodeTransformProps(gameObject);
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const childNodes = renderHostedChildren(gameObject, ctx, world);
+    return (_jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, parentMatrix, childNodes) }, gameObject.id));
+}
+function renderHostedChildren(gameObject, ctx, parentMatrix) {
+    var _a;
+    return (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => renderCompositionSubtree(child, ctx, parentMatrix));
+}
+function renderCompositionNode(gameObject, ctx, parentMatrix, childNodes) {
+    const ownContent = renderNodeOwnContent(gameObject, ctx, parentMatrix);
+    const siblingContent = renderNodeSiblingComponents(gameObject, ctx, parentMatrix);
+    const subtree = _jsxs(_Fragment, { children: [ownContent, siblingContent, childNodes] });
+    return wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree);
+}
+function renderNodeOwnContent(gameObject, ctx, parentMatrix) {
     var _a, _b, _c, _d;
     const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
     const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
@@ -284,41 +352,59 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
         editMode: ctx.editMode,
+        isSelected: ctx.selectedId === gameObject.id,
+        nodeId: gameObject.id,
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const wrappers = [];
-    const leaves = [];
-    if (gameObject.components) {
-        Object.entries(gameObject.components)
-            .filter(([k]) => !getNonComposableKeys().includes(k))
-            .forEach(([key, comp]) => {
-            if (!(comp === null || comp === void 0 ? void 0 : comp.type))
-                return;
-            const def = getComponent(comp.type);
-            if (!(def === null || def === void 0 ? void 0 : def.View))
-                return;
-            if (def.View.toString().includes("children")) {
-                wrappers.push({ key, View: def.View, properties: comp.properties });
-            }
-            else {
-                leaves.push(_jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key));
-            }
-        });
-    }
     let core;
     if (model && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View)) {
-        core = (_jsxs(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: [material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leaves] })));
+        core = (_jsx(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")) })));
     }
     else if (geometry && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
-        core = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leaves] }));
+        core = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material"))] }));
     }
     else if (text && (textDef === null || textDef === void 0 ? void 0 : textDef.View)) {
-        core = (_jsxs(_Fragment, { children: [_jsx(textDef.View, Object.assign({ properties: text.properties }, contextProps)), leaves] }));
+        core = (_jsx(_Fragment, { children: _jsx(textDef.View, Object.assign({ properties: text.properties }, contextProps)) }));
     }
     else {
-        core = _jsx(_Fragment, { children: leaves });
+        core = null;
     }
-    return wrappers.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), core);
+    return core;
+}
+function renderNodeSiblingComponents(gameObject, ctx, parentMatrix) {
+    var _a;
+    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((_a = gameObject.components) !== null && _a !== void 0 ? _a : {})
+        .filter(([key]) => !getNonComposableKeys().includes(key))
+        .flatMap(([key, comp]) => {
+        if (!(comp === null || comp === void 0 ? void 0 : comp.type) || isChildHostType(comp.type))
+            return [];
+        const def = getComponent(comp.type);
+        if (!(def === null || def === void 0 ? void 0 : def.View))
+            return [];
+        return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
+    });
+}
+function wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree) {
+    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 }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), subtree);
 }
 export default PrefabRoot;

package/dist/tools/prefabeditor/components/AmbientLightComponent.js

@@ -1,11 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer } from "./Input";
-const ambientLightFields = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorField, FieldGroup, NumberField } from "./Input";
 function AmbientLightComponentEditor({ component, onUpdate, }) {
-    return (_jsx(FieldRenderer, { fields: ambientLightFields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 })] }));
 }
 function AmbientLightComponentView({ properties }) {
     const { color = '#ffffff', intensity = 1 } = properties;

package/dist/tools/prefabeditor/components/CameraComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const CameraComponent: Component;
+export default CameraComponent;

package/dist/tools/prefabeditor/components/CameraComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PerspectiveCamera } from '@react-three/drei';
+import { useEffect, useMemo, useState } from 'react';
+import { CameraHelper } from 'three';
+import { useFrame } from '@react-three/fiber';
+import { FieldGroup, NumberField } from './Input';
+const cameraDefaults = {
+    fov: 50,
+    near: 0.1,
+    zoom: 1,
+    far: 1000,
+};
+function CameraComponentEditor({ component, onUpdate }) {
+    const values = Object.assign(Object.assign({}, cameraDefaults), component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
+}
+function CameraComponentView({ properties, editMode, isSelected }) {
+    const merged = Object.assign(Object.assign({}, cameraDefaults), properties);
+    const fov = merged.fov;
+    const near = merged.near;
+    const zoom = merged.zoom;
+    const far = merged.far;
+    const [camera, setCamera] = useState(null);
+    const cameraHelper = useMemo(() => camera ? new CameraHelper(camera) : null, [camera]);
+    useEffect(() => {
+        return () => {
+            cameraHelper === null || cameraHelper === void 0 ? void 0 : cameraHelper.dispose();
+        };
+    }, [cameraHelper]);
+    useFrame(() => {
+        if (camera && cameraHelper && editMode && isSelected) {
+            camera.updateProjectionMatrix();
+            camera.updateMatrixWorld();
+            cameraHelper.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode && !isSelected ? (_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.34, 0.22, 0.18] }), _jsx("meshBasicMaterial", { color: "#22d3ee", wireframe: true })] })) : null] }));
+}
+const CameraComponent = {
+    name: 'Camera',
+    Editor: CameraComponentEditor,
+    View: CameraComponentView,
+    defaultProperties: cameraDefaults,
+};
+export default CameraComponent;

package/dist/tools/prefabeditor/components/DirectionalLightComponent.js

@@ -1,9 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
-import { Vector3 } from "three";
+import { CameraHelper, Vector3 } from "three";
 import { FieldRenderer, Input } from "./Input";
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+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 = [
     { name: 'color', type: 'color', label: 'Color' },
     { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
@@ -29,39 +42,52 @@ const directionalLightFields = [
     },
 ];
 function DirectionalLightComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: directionalLightFields, values: component.properties, onChange: onUpdate }));
+    const values = Object.assign(Object.assign({}, directionalLightDefaults), component.properties);
+    const fields = values.castShadow
+        ? directionalLightFields
+        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
+    return (_jsx(FieldRenderer, { fields: fields, values: values, onChange: onUpdate }));
 }
-function DirectionalLightView({ properties, editMode }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
-    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
-    const castShadow = (_c = properties.castShadow) !== null && _c !== void 0 ? _c : true;
-    const shadowMapSize = (_d = properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024;
-    const shadowCameraNear = (_e = properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1;
-    const shadowCameraFar = (_f = properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100;
-    const shadowCameraTop = (_g = properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30;
-    const shadowCameraBottom = (_h = properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30;
-    const shadowCameraLeft = (_j = properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30;
-    const shadowCameraRight = (_k = properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30;
-    const targetOffset = (_l = properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0];
+function DirectionalLightView({ properties, editMode, isSelected }) {
+    const merged = Object.assign(Object.assign({}, 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(null);
     const targetRef = useRef(null);
-    // Set up light target reference when both refs are ready
+    const [shadowCamera, setShadowCamera] = useState(null);
+    const shadowCameraHelper = useMemo(() => shadowCamera ? new CameraHelper(shadowCamera) : null, [shadowCamera]);
+    useEffect(() => {
+        return () => {
+            shadowCameraHelper === null || shadowCameraHelper === void 0 ? void 0 : 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);
-        // 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]);
+        directionalLightRef.current.target.updateMatrixWorld();
+        if (shadowCamera && shadowCameraHelper && castShadow) {
+            shadowCamera.updateProjectionMatrix();
+            shadowCamera.updateMatrixWorld();
+            shadowCameraHelper.update();
+        }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && castShadow && shadowCameraHelper && (_jsx("primitive", { object: shadowCameraHelper })), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
@@ -73,6 +99,6 @@ const DirectionalLightComponent = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: {}
+    defaultProperties: directionalLightDefaults
 };
 export default DirectionalLightComponent;

package/dist/tools/prefabeditor/components/EnvironmentComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const EnvironmentComponent: Component;
+export default EnvironmentComponent;

package/dist/tools/prefabeditor/components/EnvironmentComponent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Environment } from '@react-three/drei';
+import { FieldGroup, NumberField } from './Input';
+function EnvironmentView({ properties, children, editMode, loadedTextures, loadedModels, }) {
+    const { intensity = 1, resolution = 256 } = properties;
+    const assetRevision = `${Object.keys(loadedTextures !== null && loadedTextures !== void 0 ? loadedTextures : {}).sort().join('|')}::${Object.keys(loadedModels !== null && loadedModels !== void 0 ? loadedModels : {}).sort().join('|')}`;
+    return (_jsx(Environment, { background: true, environmentIntensity: intensity, resolution: resolution, frames: editMode ? undefined : 1, children: children }, assetRevision));
+}
+const EnvironmentComponent = {
+    name: 'Environment',
+    Editor: ({ component, onUpdate }) => (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "resolution", label: "Resolution", values: component.properties, onChange: onUpdate, min: 64, step: 64, fallback: 256 })] })),
+    View: EnvironmentView,
+    defaultProperties: {},
+};
+export default EnvironmentComponent;

package/dist/tools/prefabeditor/components/GeometryComponent.js

@@ -1,67 +1,67 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer, Input } from "./Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldGroup, NumberField, SelectField } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
-        labels: ["Width", "Height", "Depth"],
-        defaults: [1, 1, 1],
+        fields: [
+            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'depth', label: 'Depth', defaultValue: 1, min: 0.01, step: 0.1 },
+        ],
     },
     sphere: {
-        labels: ["Radius", "Width Segments", "Height Segments"],
-        defaults: [1, 32, 16],
+        fields: [
+            { name: 'radius', label: 'Radius', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'widthSegments', label: 'Width Segments', defaultValue: 32, min: 3, step: 1 },
+            { name: 'heightSegments', label: 'Height Segments', defaultValue: 16, min: 2, step: 1 },
+        ],
     },
     plane: {
-        labels: ["Width", "Height"],
-        defaults: [1, 1],
+        fields: [
+            { name: 'width', label: 'Width', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+        ],
     },
     cylinder: {
-        labels: ["Radius Top", "Radius Bottom", "Height", "Radial Segments"],
-        defaults: [1, 1, 1, 32],
+        fields: [
+            { name: 'radiusTop', label: 'Radius Top', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'radiusBottom', label: 'Radius Bottom', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'height', label: 'Height', defaultValue: 1, min: 0.01, step: 0.1 },
+            { name: 'radialSegments', label: 'Radial Segments', defaultValue: 32, min: 3, step: 1 },
+        ],
     },
 };
+function getDefaultArgs(geometryType) {
+    var _a, _b;
+    return ((_b = (_a = GEOMETRY_ARGS[geometryType]) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map(field => field.defaultValue);
+}
 function GeometryComponentEditor({ component, onUpdate, }) {
-    const { geometryType, args = [] } = component.properties;
-    const schema = GEOMETRY_ARGS[geometryType];
-    const fields = [
-        {
-            name: 'geometryType',
-            type: 'select',
-            label: 'Type',
-            options: [
-                { value: 'box', label: 'Box' },
-                { value: 'sphere', label: 'Sphere' },
-                { value: 'plane', label: 'Plane' },
-                { value: 'cylinder', label: 'Cylinder' },
-            ],
-        },
-        {
-            name: 'args',
-            type: 'custom',
-            label: '',
-            render: ({ values, onChangeMultiple }) => {
-                const currentType = values.geometryType;
-                const currentSchema = GEOMETRY_ARGS[currentType];
-                const currentArgs = values.args || currentSchema.defaults;
-                return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: currentSchema.labels.map((label, i) => {
-                        var _a;
-                        return (_jsx(Input, { label: label, value: (_a = currentArgs[i]) !== null && _a !== void 0 ? _a : currentSchema.defaults[i], step: 0.1, min: 0.01, onChange: value => {
-                                const next = [...currentArgs];
-                                next[i] = value;
-                                onChangeMultiple({ args: next });
-                            } }, label));
-                    }) }));
-            },
-        },
-    ];
+    var _a, _b, _c;
+    const geometryType = (_a = component.properties.geometryType) !== null && _a !== void 0 ? _a : 'box';
+    const schema = (_b = GEOMETRY_ARGS[geometryType]) !== null && _b !== void 0 ? _b : GEOMETRY_ARGS.box;
+    const args = (_c = component.properties.args) !== null && _c !== void 0 ? _c : getDefaultArgs(geometryType);
     // Handle geometry type change to reset args
     const handleChange = (newValues) => {
         if ('geometryType' in newValues && newValues.geometryType !== geometryType) {
-            onUpdate({ geometryType: newValues.geometryType, args: GEOMETRY_ARGS[newValues.geometryType].defaults });
+            onUpdate({ geometryType: newValues.geometryType, args: getDefaultArgs(newValues.geometryType) });
         }
         else {
             onUpdate(newValues);
         }
     };
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: handleChange }));
+    const updateArg = (index, value) => {
+        const next = [...args];
+        next[index] = value;
+        onUpdate({ args: next });
+    };
+    return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "geometryType", label: "Type", values: component.properties, onChange: handleChange, options: [
+                    { value: 'box', label: 'Box' },
+                    { value: 'sphere', label: 'Sphere' },
+                    { value: 'plane', label: 'Plane' },
+                    { value: 'cylinder', label: 'Cylinder' },
+                ] }), schema.fields.map((field, index) => {
+                var _a;
+                return (_jsx(NumberField, { name: field.name, label: field.label, values: { [field.name]: (_a = args[index]) !== null && _a !== void 0 ? _a : field.defaultValue }, onChange: (next) => updateArg(index, next[field.name]), fallback: field.defaultValue, min: field.min, step: field.step }, field.name));
+            })] }));
 }
 // View for Geometry component
 function GeometryComponentView({ properties, children }) {
@@ -87,7 +87,7 @@ const GeometryComponent = {
     nonComposable: true,
     defaultProperties: {
         geometryType: 'box',
-        args: GEOMETRY_ARGS.box.defaults,
+        args: getDefaultArgs('box'),
     }
 };
 export default GeometryComponent;