react-three-game 0.0.41 → 0.0.42

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -0,0 +1,293 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapControls, TransformControls, useHelper } from "@react-three/drei";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
+import components from "./components";
+import { loadModel } from "../dragdrop/modelLoader";
+import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
+import { 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;
+    // 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;
+    // prefab root state
+    const [models, setModels] = useState({});
+    const [textures, setTextures] = useState({});
+    const loading = useRef(new Set());
+    const objectRefs = useRef({});
+    const [selectedObject, setSelectedObject] = useState(null);
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        root: rootRef.current
+    }), []);
+    const registerRef = useCallback((id, obj) => {
+        objectRefs.current[id] = obj;
+        if (id === selectedId)
+            setSelectedObject(obj);
+    }, [selectedId]);
+    useEffect(() => {
+        const originalError = console.error;
+        console.error = (...args) => {
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph'))
+                return;
+            originalError.apply(console, args);
+        };
+        return () => { console.error = originalError; };
+    }, []);
+    useEffect(() => {
+        var _a;
+        setSelectedObject(selectedId ? (_a = objectRefs.current[selectedId]) !== null && _a !== void 0 ? _a : null : null);
+    }, [selectedId]);
+    const onTransformChange = () => {
+        if (!selectedId || !onPrefabChange)
+            return;
+        const obj = objectRefs.current[selectedId];
+        if (!obj)
+            return;
+        const parentWorld = computeParentWorldMatrix(data.root, selectedId);
+        const local = parentWorld.clone().invert().multiply(obj.matrixWorld);
+        const { position, rotation, scale } = decompose(local);
+        const root = updateNode(data.root, selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
+                    type: "Transform",
+                    properties: { position, rotation, scale },
+                } }) })));
+        onPrefabChange(Object.assign(Object.assign({}, data), { root }));
+    };
+    useEffect(() => {
+        const modelsToLoad = new Set();
+        const texturesToLoad = new Set();
+        walk(data.root, node => {
+            var _a, _b, _c, _d, _e, _f;
+            ((_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);
+        });
+        modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
+            if (models[file] || loading.current.has(file))
+                return;
+            loading.current.add(file);
+            const path = file.startsWith("/")
+                ? `${basePath}${file}`
+                : `${basePath}/${file}`;
+            const res = yield loadModel(path);
+            res.success && res.model &&
+                setModels(m => (Object.assign(Object.assign({}, m), { [file]: res.model })));
+        }));
+        const loader = new TextureLoader();
+        texturesToLoad.forEach(file => {
+            if (textures[file] || loading.current.has(file))
+                return;
+            loading.current.add(file);
+            const path = file.startsWith("/")
+                ? `${basePath}${file}`
+                : `${basePath}/${file}`;
+            loader.load(path, tex => {
+                tex.colorSpace = SRGBColorSpace;
+                setTextures(t => (Object.assign(Object.assign({}, t), { [file]: tex })));
+            });
+        });
+    }, [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, 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}`))] }))] }));
+});
+export function GameObjectRenderer(props) {
+    var _a, _b, _c;
+    const node = props.gameObject;
+    if (!node || node.hidden || node.disabled)
+        return null;
+    const isInstanced = (_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.instanced;
+    const prevInstancedRef = useRef(undefined);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    useEffect(() => {
+        if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
+            setIsTransitioning(true);
+            const timer = setTimeout(() => setIsTransitioning(false), 100);
+            return () => clearTimeout(timer);
+        }
+        prevInstancedRef.current = isInstanced;
+    }, [isInstanced]);
+    if (isTransitioning)
+        return null;
+    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    return isInstanced
+        ? _jsx(InstancedNode, Object.assign({}, props), key)
+        : _jsx(StandardNode, Object.assign({}, props), key);
+}
+function isPhysicsProps(v) {
+    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
+}
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    const localTransform = getNodeTransformProps(gameObject);
+    const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
+        ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
+        : undefined;
+    const groupRef = useRef(null);
+    const clickValid = useRef(false);
+    useEffect(() => {
+        if (editMode) {
+            registerRef(gameObject.id, groupRef.current);
+            return () => registerRef(gameObject.id, null);
+        }
+    }, [gameObject.id, registerRef, editMode]);
+    const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
+    if (editMode) {
+        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+                        if (clickValid.current) {
+                            e.stopPropagation();
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+                            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+                        }
+                        clickValid.current = false;
+                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps })] }));
+    }
+    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, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const groupRef = useRef(null);
+    const helperRef = useRef(null);
+    const clickValid = useRef(false);
+    const isSelected = selectedId === gameObject.id;
+    const stillInstanced = useInstanceCheck(gameObject.id);
+    useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
+    useEffect(() => {
+        registerRef(gameObject.id, groupRef.current);
+        return () => registerRef(gameObject.id, null);
+    }, [gameObject.id, registerRef]);
+    const world = parentMatrix.clone().multiply(compose(gameObject));
+    const onDown = (e) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+    const onUp = (e) => {
+        if (clickValid.current) {
+            e.stopPropagation();
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+        }
+        clickValid.current = false;
+    };
+    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
+    const ready = !((_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) ||
+        loadedModels[gameObject.components.model.properties.filename];
+    const hasPhysics = physics && ready && !stillInstanced;
+    const transform = getNodeTransformProps(gameObject);
+    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, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
+    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, children: inner }, physicsKey)) : null] }));
+    }
+    if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
+        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey));
+    }
+    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
+}
+function walk(node, fn) {
+    var _a;
+    fn(node);
+    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => walk(c, fn));
+}
+function compose(node) {
+    const { position, rotation, scale } = getNodeTransformProps(node);
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}
+function decompose(m) {
+    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
+    m.decompose(p, q, s);
+    const e = new Euler().setFromQuaternion(q);
+    return {
+        position: [p.x, p.y, p.z],
+        rotation: [e.x, e.y, e.z],
+        scale: [s.x, s.y, s.z],
+    };
+}
+function getNodeTransformProps(node) {
+    var _a, _b, _c, _d, _e;
+    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    return {
+        position: (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0],
+        rotation: (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0],
+        scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
+    };
+}
+function computeParentWorldMatrix(root, targetId) {
+    let result = null;
+    const visit = (node, parent) => {
+        var _a;
+        if (node.id === targetId) {
+            result = parent.clone();
+            return;
+        }
+        const world = parent.clone().multiply(compose(node));
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => !result && visit(c, world));
+    };
+    visit(root, IDENTITY);
+    return result !== null && result !== void 0 ? result : IDENTITY;
+}
+function renderCoreNode(gameObject, ctx, parentMatrix) {
+    var _a, _b, _c;
+    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;
+    const model = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
+    const geometryDef = geometry && getComponent("Geometry");
+    const materialDef = material && getComponent("Material");
+    const modelDef = model && getComponent("Model");
+    const contextProps = {
+        loadedModels: ctx.loadedModels,
+        loadedTextures: ctx.loadedTextures,
+        editMode: ctx.editMode,
+        parentMatrix,
+        registerRef: ctx.registerRef,
+    };
+    const wrappers = [];
+    const leaves = [];
+    if (gameObject.components) {
+        Object.entries(gameObject.components)
+            .filter(([k]) => !["geometry", "material", "model", "transform", "physics"].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] })));
+    }
+    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] }));
+    }
+    else {
+        core = _jsx(_Fragment, { children: leaves });
+    }
+    return wrappers.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), core);
+}
+export default PrefabRoot;

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

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { ComponentData, GameObject } from "../types";
+export interface Component {
+    name: string;
+    Editor: FC<{
+        node?: GameObject;
+        component: ComponentData;
+        onUpdate: (newComp: any) => void;
+        basePath?: string;
+        transformMode?: "translate" | "rotate" | "scale";
+        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
+    }>;
+    defaultProperties: any;
+    View?: FC<any>;
+}
+export declare function registerComponent(component: Component): void;
+export declare function getComponent(name: string): Component | undefined;
+export declare function getAllComponents(): Record<string, Component>;

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

@@ -0,0 +1,13 @@
+const REGISTRY = {};
+export function registerComponent(component) {
+    if (REGISTRY[component.name]) {
+        throw new Error(`Component with name ${component.name} already registered.`);
+    }
+    REGISTRY[component.name] = component;
+}
+export function getComponent(name) {
+    return REGISTRY[name];
+}
+export function getAllComponents() {
+    return Object.assign({}, REGISTRY);
+}

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

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

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Vector3 } from "three";
+import { Input, Label } from "./Input";
+function DirectionalLightComponentEditor({ component, onUpdate }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const props = {
+        color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
+        intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
+        castShadow: (_c = component.properties.castShadow) !== null && _c !== void 0 ? _c : true,
+        shadowMapSize: (_d = component.properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024,
+        shadowCameraNear: (_e = component.properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1,
+        shadowCameraFar: (_f = component.properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100,
+        shadowCameraTop: (_g = component.properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30,
+        shadowCameraBottom: (_h = component.properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30,
+        shadowCameraLeft: (_j = component.properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30,
+        shadowCameraRight: (_k = component.properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30,
+        targetOffset: (_l = component.properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0]
+    };
+    const textInputStyle = {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { color: e.target.value })) }), _jsx("input", { type: "text", style: textInputStyle, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { color: e.target.value })) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Intensity" }), _jsx(Input, { step: "0.1", value: props.intensity, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { intensity: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Cast Shadow" }), _jsx("input", { type: "checkbox", style: { height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }, checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { castShadow: e.target.checked })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Shadow Map Size" }), _jsx(Input, { step: "256", value: props.shadowMapSize, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowMapSize: value })) })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Shadow Camera" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: "0.1", value: props.shadowCameraNear, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraNear: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: "1", value: props.shadowCameraFar, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraFar: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: "1", value: props.shadowCameraTop, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraTop: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: "1", value: props.shadowCameraBottom, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraBottom: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: "1", value: props.shadowCameraLeft, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraLeft: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: "1", value: props.shadowCameraRight, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraRight: value })) })] })] })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Target Offset" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: "0.5", value: props.targetOffset[0], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [value, props.targetOffset[1], props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: "0.5", value: props.targetOffset[1], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], value, props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: "0.5", value: props.targetOffset[2], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], props.targetOffset[1], value] })) })] })] })] })] });
+}
+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];
+    const directionalLightRef = useRef(null);
+    const targetRef = useRef(null);
+    // Set up light target reference when both refs are ready
+    useEffect(() => {
+        if (directionalLightRef.current && targetRef.current) {
+            directionalLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    // 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]);
+    });
+    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) => {
+                                    const points = [
+                                        new Vector3(0, 0, 0),
+                                        new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
+                                    ];
+                                    geo.setFromPoints(points);
+                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] }))] }));
+}
+const DirectionalLightComponent = {
+    name: 'DirectionalLight',
+    Editor: DirectionalLightComponentEditor,
+    View: DirectionalLightView,
+    defaultProperties: {}
+};
+export default DirectionalLightComponent;

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

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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Label } from "./Input";
+const GEOMETRY_ARGS = {
+    box: {
+        labels: ["Width", "Height", "Depth"],
+        defaults: [1, 1, 1],
+    },
+    sphere: {
+        labels: ["Radius", "Width Segments", "Height Segments"],
+        defaults: [1, 32, 16],
+    },
+    plane: {
+        labels: ["Width", "Height"],
+        defaults: [1, 1],
+    },
+};
+function GeometryComponentEditor({ component, onUpdate, }) {
+    const { geometryType, args = [] } = component.properties;
+    const schema = GEOMETRY_ARGS[geometryType];
+    const selectStyle = {
+        width: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: geometryType, onChange: e => {
+                            const type = e.target.value;
+                            onUpdate({ geometryType: type, args: GEOMETRY_ARGS[type].defaults });
+                        }, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] })] }), schema.labels.map((label, i) => {
+                var _a;
+                return (_jsxs("div", { children: [_jsx(Label, { children: label }), _jsx(Input, { value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: value => {
+                                const next = [...args];
+                                next[i] = value;
+                                onUpdate({ args: next });
+                            } })] }, label));
+            })] }));
+}
+// View for Geometry component
+function GeometryComponentView({ properties, children }) {
+    const { geometryType, args = [] } = properties;
+    // Only return the geometry node, do not wrap in mesh or group
+    switch (geometryType) {
+        case "box":
+            return _jsx("boxGeometry", { args: args });
+        case "sphere":
+            return _jsx("sphereGeometry", { args: args });
+        case "plane":
+            return _jsx("planeGeometry", { args: args });
+        default:
+            return _jsx("boxGeometry", { args: [1, 1, 1] });
+    }
+}
+const GeometryComponent = {
+    name: 'Geometry',
+    Editor: GeometryComponentEditor,
+    View: GeometryComponentView,
+    defaultProperties: {
+        geometryType: 'box',
+        args: GEOMETRY_ARGS.box.defaults,
+    }
+};
+export default GeometryComponent;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+interface InputProps {
+    value: number;
+    onChange: (value: number) => void;
+    step?: string | number;
+    min?: number;
+    max?: number;
+    style?: React.CSSProperties;
+}
+export declare function Input({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Vector3Input({ label, value, onChange, snap }: {
+    label: string;
+    value: [number, number, number];
+    onChange: (v: [number, number, number]) => void;
+    snap?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+// Shared styles
+const styles = {
+    input: {
+        width: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    },
+    label: {
+        display: 'block',
+        fontSize: '9px',
+        color: 'rgba(34, 211, 238, 0.6)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        marginBottom: 2,
+    },
+};
+export function Input({ value, onChange, step, min, max, style }) {
+    return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value)), step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) }));
+}
+export function Label({ children }) {
+    return _jsx("label", { style: styles.label, children: children });
+}
+export function Vector3Input({ label, value, onChange, snap }) {
+    const snapValue = (num) => {
+        if (!snap)
+            return num;
+        return Math.round(num / snap) * snap;
+    };
+    const [draft, setDraft] = useState(() => value.map(v => v.toString()));
+    // Sync external changes (gizmo, undo, etc.)
+    useEffect(() => {
+        setDraft(value.map(v => v.toString()));
+    }, [value[0], value[1], value[2]]);
+    const dragState = useRef(null);
+    const commit = (index) => {
+        const num = parseFloat(draft[index]);
+        if (Number.isFinite(num)) {
+            const next = [...value];
+            next[index] = snapValue(num);
+            onChange(next);
+        }
+    };
+    const startScrub = (e, index) => {
+        e.preventDefault();
+        dragState.current = {
+            index,
+            startX: e.clientX,
+            startValue: value[index]
+        };
+        e.target.setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+    const onScrubMove = (e) => {
+        if (!dragState.current)
+            return;
+        const { index, startX, startValue } = dragState.current;
+        const dx = e.clientX - startX;
+        let speed = 0.02;
+        if (e.shiftKey)
+            speed *= 0.1; // fine
+        if (e.altKey)
+            speed *= 5; // coarse
+        const rawValue = startValue + dx * speed;
+        const nextValue = snapValue(rawValue);
+        const next = [...value];
+        next[index] = nextValue;
+        setDraft(d => {
+            const copy = [...d];
+            copy[index] = nextValue.toFixed(3);
+            return copy;
+        });
+        onChange(next);
+    };
+    const endScrub = (e) => {
+        if (!dragState.current)
+            return;
+        dragState.current = null;
+        document.body.style.cursor = "";
+        e.target.releasePointerCapture(e.pointerId);
+    };
+    const axes = [
+        { key: "x", color: 'rgba(248, 113, 113, 1)', index: 0 },
+        { key: "y", color: 'rgba(134, 239, 172, 1)', index: 1 },
+        { key: "z", color: 'rgba(96, 165, 250, 1)', index: 2 }
+    ];
+    return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("label", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 4 }), children: label }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: axes.map(({ key, color, index }) => (_jsxs("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 4,
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        border: '1px solid rgba(34, 211, 238, 0.2)',
+                        borderRadius: 4,
+                        padding: '4px 6px',
+                        minHeight: 32,
+                    }, children: [_jsx("span", { style: {
+                                fontSize: '12px',
+                                fontWeight: 'bold',
+                                color,
+                                width: 12,
+                                cursor: 'ew-resize',
+                                userSelect: 'none',
+                            }, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: key.toUpperCase() }), _jsx("input", { style: {
+                                flex: 1,
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                fontSize: '12px',
+                                color: 'rgba(165, 243, 252, 1)',
+                                fontFamily: 'monospace',
+                                outline: 'none',
+                                width: '100%',
+                                minWidth: 0,
+                            }, type: "text", value: draft[index], onChange: e => {
+                                const next = [...draft];
+                                next[index] = e.target.value;
+                                setDraft(next);
+                            }, onBlur: () => commit(index), onKeyDown: e => {
+                                if (e.key === "Enter") {
+                                    e.target.blur();
+                                }
+                            } })] }, key))) })] }));
+}

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

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