react-three-game 0.0.66 → 0.0.67

package/dist/index.d.ts

@@ -19,4 +19,4 @@ export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, I
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
 export * from './tools/dragdrop';
-export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/index.js

@@ -19,4 +19,4 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 // Asset Tools
 export * from './tools/dragdrop';
-export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/shared/GameCanvas.js

@@ -33,7 +33,7 @@ extend({
 export default function GameCanvas(_a) {
     var { loader = false, children, glConfig, canvasRef, onCreated, style } = _a, props = __rest(_a, ["loader", "children", "glConfig", "canvasRef", "onCreated", "style"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: Object.assign({ touchAction: 'none', userSelect: 'none' }, style), shadows: { type: PCFShadowMap }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
                     shadowMap: true, antialias: true }, glConfig));

package/dist/tools/assetviewer/page.d.ts

@@ -19,14 +19,25 @@ interface SoundListViewerProps {
     basePath?: string;
 }
 export declare function SoundListViewer({ files, selected, onSelect, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TexturePicker({ value, onChange, basePath }: {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModelPicker({ value, onChange, basePath, pickerKey }: {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    basePath?: string;
+    pickerKey?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleTextureViewer({ file, basePath }: {
     file?: string;
     basePath?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleModelViewer({ file, basePath }: {
     file?: string;
     basePath?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SingleSoundViewer({ file, basePath }: {
     file?: string;
     basePath?: string;

package/dist/tools/assetviewer/page.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
-import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
+import { Component as ReactComponent, Suspense, useEffect, useLayoutEffect, useState, useRef } from "react";
+import { createPortal } from 'react-dom';
 import { TextureLoader } from "three";
 import { loadModel } from "../dragdrop";
 class ErrorBoundary extends ReactComponent {
@@ -155,15 +156,68 @@ function SoundCard({ file, onSelect, basePath = "" }) {
     const fullPath = basePath ? `/${basePath}${file}` : file;
     return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { color: '#f9fafb', fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
 }
+const PICKER_POPUP_WIDTH = 260;
+const PICKER_POPUP_HEIGHT = 360;
+function AssetPicker({ value, onChange, basePath, manifestFolder, preview, renderList, rootStyle, controlsStyle, changeButtonStyle, clearButtonStyle, popupStyle, }) {
+    const [files, setFiles] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
+    const [resolvedPopupStyle, setResolvedPopupStyle] = useState(null);
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        fetch(`${basePath}/${manifestFolder}/manifest.json`)
+            .then(r => r.json())
+            .then(data => setFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, [basePath, manifestFolder]);
+    useLayoutEffect(() => {
+        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
+            return;
+        const updatePosition = () => {
+            var _a;
+            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect)
+                return;
+            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
+            const fallbackLeft = rect.right + 8;
+            const fitsLeft = preferredLeft >= 8;
+            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
+            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
+            setResolvedPopupStyle(Object.assign({ position: 'fixed', left,
+                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)', background: '#111827', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6 }, popupStyle));
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [popupStyle, showPicker]);
+    return (_jsxs("div", { style: rootStyle, children: [preview, _jsxs("div", { style: controlsStyle, children: [_jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: changeButtonStyle, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => onChange(undefined), style: clearButtonStyle, children: "Clear" })] }), showPicker && resolvedPopupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: resolvedPopupStyle, onMouseLeave: () => setShowPicker(false), children: renderList({
+                    files,
+                    value,
+                    onSelect: (file) => {
+                        onChange(file);
+                        setShowPicker(false);
+                    },
+                    basePath,
+                }) }), document.body)] }));
+}
+export function TexturePicker({ value, onChange, basePath = "" }) {
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4 }, clearButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4, marginLeft: 4 }, preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+}
+export function ModelPicker({ value, onChange, basePath = "", pickerKey }) {
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, popupStyle: { background: 'rgba(0,0,0,0.9)', border: '1px solid rgba(34, 211, 238, 0.3)' }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
+}
 // Single Asset Viewer Components - display only one selected asset
 export function SingleTextureViewer({ file, basePath = "" }) {
     if (!file)
-        return null;
+        return _jsx("div", { style: { width: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
     return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleModelViewer({ file, basePath = "" }) {
     if (!file)
-        return null;
+        return _jsx("div", { style: { width: 112, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
     return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { }, size: 112 }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleSoundViewer({ file, basePath = "" }) {

package/dist/tools/dragdrop/index.d.ts

@@ -1,4 +1,4 @@
 export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
 export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
 export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
-export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";
+export type { LoadedModel, LoadedTexture, LoadedModels, LoadedTextures, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -1,6 +1,8 @@
 import type { Object3D, Texture } from "three";
 export type LoadedModel = Object3D;
 export type LoadedTexture = Texture;
+export type LoadedModels = Record<string, LoadedModel>;
+export type LoadedTextures = Record<string, LoadedTexture>;
 export type ModelLoadResult = {
     success: boolean;
     model?: LoadedModel;

package/dist/tools/prefabeditor/PrefabRoot.d.ts

@@ -1,6 +1,7 @@
-import { Group, Matrix4, Object3D, Texture } from "three";
+import { Group, Matrix4, Object3D } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
+import { LoadedModels, LoadedTextures } from "../dragdrop";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
@@ -16,8 +17,8 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onSelectedObjectChange?: (object: Object3D | null) => void;
     onFocusNode?: (nodeId: string) => void;
     basePath?: string;
-    injectedModels?: Record<string, Object3D>;
-    injectedTextures?: Record<string, Texture>;
+    injectedModels?: LoadedModels;
+    injectedTextures?: LoadedTextures;
 } & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {
@@ -27,8 +28,8 @@ interface RendererProps {
     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>;
+    loadedModels: LoadedModels;
+    loadedTextures: LoadedTextures;
     editMode?: boolean;
     parentMatrix?: Matrix4;
 }

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -57,13 +57,22 @@ export const PrefabRoot = forwardRef(({ editMode, data, selectedId, onSelect, on
         const modelsToLoad = new Set();
         const texturesToLoad = new Set();
         walk(data.root, node => {
-            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);
+            var _a;
+            Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
+                var _a, _b, _c, _d;
+                if (!(component === null || component === void 0 ? void 0 : component.type))
+                    return;
+                if (component.type === 'Model' && ((_a = component.properties) === null || _a === void 0 ? void 0 : _a.filename)) {
+                    modelsToLoad.add(component.properties.filename);
+                }
+                if (component.type === 'Material') {
+                    ((_b = component.properties) === null || _b === void 0 ? void 0 : _b.texture) && texturesToLoad.add(component.properties.texture);
+                    ((_c = component.properties) === null || _c === void 0 ? void 0 : _c.normalMapTexture) && texturesToLoad.add(component.properties.normalMapTexture);
+                }
+                if (component.type === 'SpotLight' && ((_d = component.properties) === null || _d === void 0 ? void 0 : _d.map)) {
+                    texturesToLoad.add(component.properties.map);
+                }
+            });
         });
         modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
             if (availableModels[file] || loading.current.has(file))

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

@@ -10,81 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { extend } from '@react-three/fiber';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { FieldRenderer, Label, NumberInput } from './Input';
-import { colors } from '../styles';
 import { useMemo } from 'react';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
+import { TexturePicker } from '../../assetviewer/page';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, Vector2, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
-const PICKER_POPUP_WIDTH = 260;
-const PICKER_POPUP_HEIGHT = 360;
 extend({
     MeshBasicNodeMaterial,
     MeshStandardNodeMaterial,
 });
-function TexturePicker({ value, onChange, basePath }) {
-    const [textureFiles, setTextureFiles] = useState([]);
-    const [showPicker, setShowPicker] = useState(false);
-    const [popupStyle, setPopupStyle] = useState(null);
-    const triggerRef = useRef(null);
-    useEffect(() => {
-        fetch(`${basePath}/textures/manifest.json`)
-            .then(r => r.json())
-            .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
-            .catch(console.error);
-    }, [basePath]);
-    useLayoutEffect(() => {
-        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
-            return;
-        const updatePosition = () => {
-            var _a;
-            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!rect)
-                return;
-            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
-            const fallbackLeft = rect.right + 8;
-            const fitsLeft = preferredLeft >= 8;
-            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
-            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setPopupStyle({
-                position: 'fixed',
-                left,
-                top,
-                background: colors.bg,
-                padding: 12,
-                border: `1px solid ${colors.border}`,
-                borderRadius: 6,
-                width: PICKER_POPUP_WIDTH,
-                height: PICKER_POPUP_HEIGHT,
-                overflow: 'hidden',
-                zIndex: 1000,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
-            });
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
-        };
-    }, [showPicker]);
-    // Only show 3D preview for server-hosted textures (starting with / or http)
-    const canPreview = value && (value.startsWith('/') || value.startsWith('http'));
-    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [canPreview
-                ? _jsx(SingleTextureViewer, { file: value, basePath: basePath })
-                : value
-                    ? _jsx("span", { style: { fontSize: 10, opacity: 0.6, maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value })
-                    : null, _jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
-                    onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
-                        onChange(file);
-                        setShowPicker(false);
-                    }, basePath: basePath }) }), document.body)] }));
-}
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';

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

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useContext, useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import { ModelPicker } from '../../assetviewer/page';
+import { useContext, useMemo } from 'react';
 import { BooleanField, FieldGroup, Label, NumberInput, SelectInput } from './Input';
 import { EditorContext } from '../EditorContext';
 import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';
-const PICKER_POPUP_WIDTH = 260;
-const PICKER_POPUP_HEIGHT = 360;
 const AXIS_OPTIONS = [
     { value: 'x', label: 'X' },
     { value: 'y', label: 'Y' },
@@ -71,84 +68,12 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
                                     }, title: "Remove repeat axis", children: "\u00D7" })) : null] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Count" }), _jsx(NumberInput, { value: axisConfig.count, onChange: (count) => updateAxis(index, { count: Math.max(1, Math.floor(count)) }), step: 1, min: 1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { children: [_jsx(Label, { children: "Offset" }), _jsx(NumberInput, { value: axisConfig.offset, onChange: (offset) => updateAxis(index, { offset: quantize(offset, positionSnap) }), step: positionSnap > 0 ? positionSnap : 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] })] }, `${axisConfig.axis}-${index}`));
             })] }));
 }
-function ModelPicker({ value, onChange, basePath, nodeId }) {
-    const [modelFiles, setModelFiles] = useState([]);
-    const [showPicker, setShowPicker] = useState(false);
-    const [popupStyle, setPopupStyle] = useState(null);
-    const triggerRef = useRef(null);
-    useEffect(() => {
-        fetch(`${basePath}/models/manifest.json`)
-            .then(r => r.json())
-            .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
-            .catch(console.error);
-    }, [basePath]);
-    useLayoutEffect(() => {
-        if (!showPicker || !triggerRef.current || typeof window === 'undefined')
-            return;
-        const updatePosition = () => {
-            var _a;
-            const rect = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (!rect)
-                return;
-            const preferredLeft = rect.left - PICKER_POPUP_WIDTH - 8;
-            const fallbackLeft = rect.right + 8;
-            const fitsLeft = preferredLeft >= 8;
-            const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
-            const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setPopupStyle({
-                position: 'fixed',
-                left,
-                top,
-                background: 'rgba(0,0,0,0.9)',
-                padding: 12,
-                border: '1px solid rgba(34, 211, 238, 0.3)',
-                borderRadius: 6,
-                width: PICKER_POPUP_WIDTH,
-                height: PICKER_POPUP_HEIGHT,
-                overflow: 'hidden',
-                zIndex: 1000,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
-            });
-        };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
-        return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
-        };
-    }, [showPicker]);
-    const handleModelSelect = (file) => {
-        const filename = file.startsWith('/') ? file.slice(1) : file;
-        onChange(filename);
-        setShowPicker(false);
-    };
-    return (_jsxs("div", { style: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, children: [_jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: {
-                            width: '100%',
-                            padding: '6px 8px',
-                            backgroundColor: '#1f2937',
-                            color: 'inherit',
-                            fontSize: 10,
-                            cursor: 'pointer',
-                            border: '1px solid rgba(34, 211, 238, 0.3)',
-                        }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
-                            onChange(undefined);
-                        }, style: {
-                            width: '100%',
-                            padding: '6px 8px',
-                            backgroundColor: '#1f2937',
-                            color: 'inherit',
-                            fontSize: 10,
-                            cursor: 'pointer',
-                            border: '1px solid rgba(34, 211, 238, 0.3)',
-                        }, children: "Clear" })] }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }), document.body)] }));
-}
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     var _a;
     const editorContext = useContext(EditorContext);
     const positionSnap = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.positionSnap) !== null && _a !== void 0 ? _a : 0.5;
     const repeatAxes = getRepeatAxesFromModelProperties(component.properties);
-    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.instanced && (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "repeat", label: "Repeat", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.repeat && (_jsx(RepeatAxisEditor, { axes: repeatAxes, onChange: (nextAxes) => onUpdate({ repeatAxes: nextAxes }), positionSnap: positionSnap }))] }))] }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, pickerKey: node === null || node === void 0 ? void 0 : node.id }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.instanced && (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "repeat", label: "Repeat", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.repeat && (_jsx(RepeatAxisEditor, { axes: repeatAxes, onChange: (nextAxes) => onUpdate({ repeatAxes: nextAxes }), positionSnap: positionSnap }))] }))] }));
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {

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

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, useMemo, useState } from "react";
-import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
+import { BooleanField, ColorField, FieldGroup, Label, NumberField } from "./Input";
 import { SpotLightHelper } from "three";
 import { useFrame } from "@react-three/fiber";
+import { TexturePicker } from "../../assetviewer/page";
 const spotLightDefaults = {
     color: '#ffffff',
-    intensity: 1,
-    angle: Math.PI / 6,
+    intensity: 200,
+    angle: 0.5,
     penumbra: 0.5,
     distance: 100,
     castShadow: true,
 };
-function SpotLightComponentEditor({ component, onUpdate }) {
+function SpotLightComponentEditor({ component, onUpdate, basePath = "" }) {
     const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
-    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true })] }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 200 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }));
 }
-function SpotLightView({ properties, editMode, isSelected }) {
+function SpotLightView({ properties, editMode, isSelected, loadedTextures }) {
     const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
     const color = merged.color;
     const intensity = merged.intensity;
@@ -23,6 +24,7 @@ function SpotLightView({ properties, editMode, isSelected }) {
     const penumbra = merged.penumbra;
     const distance = merged.distance;
     const castShadow = merged.castShadow;
+    const textureMap = merged.map && loadedTextures ? loadedTextures[merged.map] : undefined;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
     const [spotLight, setSpotLight] = useState(null);
@@ -43,7 +45,7 @@ function SpotLightView({ properties, editMode, isSelected }) {
             spotLightHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "high performance 3D game engine for React",
   "main": "dist/index.js",
   "module": "dist/index.js",