react-three-game 0.0.55 → 0.0.57

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

@@ -1,30 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { colors } from '../styles';
 // ============================================================================
-// Shared Styles
+// Shared Styles (derived from shared color tokens)
 // ============================================================================
-// Shared styles
 const styles = {
     input: {
         width: '80px',
-        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)',
+        backgroundColor: colors.bgInput,
+        border: `1px solid ${colors.border}`,
+        padding: '3px 6px',
+        fontSize: '11px',
+        color: colors.text,
         fontFamily: 'monospace',
         outline: 'none',
         textAlign: 'right',
+        borderRadius: 3,
     },
     label: {
         display: 'block',
-        fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.9)',
+        fontSize: '10px',
+        color: colors.textMuted,
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
+        fontWeight: 500,
     },
 };
+function getNumericStep(step, fallback) {
+    if (typeof step === 'number' && Number.isFinite(step) && step > 0)
+        return step;
+    if (typeof step === 'string') {
+        const parsed = parseFloat(step);
+        if (Number.isFinite(parsed) && parsed > 0)
+            return parsed;
+    }
+    return fallback;
+}
+function getStepPrecision(step) {
+    var _a;
+    if (!Number.isFinite(step) || step <= 0)
+        return 3;
+    const stepString = step.toString();
+    if (stepString.includes('e-')) {
+        const exponent = stepString.split('e-')[1];
+        return exponent ? parseInt(exponent, 10) : 3;
+    }
+    const decimal = stepString.split('.')[1];
+    return (_a = decimal === null || decimal === void 0 ? void 0 : decimal.length) !== null && _a !== void 0 ? _a : 0;
+}
 export function Input({ value, onChange, step, min, max, style, label }) {
     const [draft, setDraft] = useState(() => value.toString());
     useEffect(() => {
@@ -46,14 +70,11 @@ export function Input({ value, onChange, step, min, max, style, label }) {
     };
     const dragState = useRef(null);
     const startScrub = (e) => {
-        if (!label)
-            return;
-        e.preventDefault();
         dragState.current = {
             startX: e.clientX,
             startValue: value
         };
-        e.target.setPointerCapture(e.pointerId);
+        e.currentTarget.setPointerCapture(e.pointerId);
         document.body.style.cursor = "ew-resize";
     };
     const onScrubMove = (e) => {
@@ -61,18 +82,21 @@ export function Input({ value, onChange, step, min, max, style, label }) {
             return;
         const { startX, startValue } = dragState.current;
         const dx = e.clientX - startX;
-        let speed = 0.02;
+        const baseStep = getNumericStep(step, 0.1);
+        let scrubStep = baseStep;
         if (e.shiftKey)
-            speed *= 0.1; // fine
+            scrubStep /= 10;
         if (e.altKey)
-            speed *= 5; // coarse
-        let nextValue = startValue + dx * speed;
+            scrubStep *= 10;
+        const precision = getStepPrecision(scrubStep);
+        const deltaSteps = Math.round(dx / 8);
+        let nextValue = startValue + deltaSteps * scrubStep;
         // Apply min/max constraints
         if (min !== undefined && nextValue < min)
             nextValue = min;
         if (max !== undefined && nextValue > max)
             nextValue = max;
-        setDraft(nextValue.toFixed(3));
+        setDraft(nextValue.toFixed(precision));
         onChange(nextValue);
     };
     const endScrub = (e) => {
@@ -80,29 +104,29 @@ export function Input({ value, onChange, step, min, max, style, label }) {
             return;
         dragState.current = null;
         document.body.style.cursor = "";
-        e.target.releasePointerCapture(e.pointerId);
+        e.currentTarget.releasePointerCapture(e.pointerId);
     };
     if (label) {
         return (_jsxs("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-            }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, cursor: 'ew-resize', userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub, children: label }), _jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
+            }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), children: label }), _jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
                         if (e.key === 'Enter') {
                             e.target.blur();
                         }
-                    }, step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) })] }));
+                    }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub })] }));
     }
     return (_jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
             if (e.key === 'Enter') {
                 e.target.blur();
             }
-        }, step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) }));
+        }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub }));
 }
 export function Label({ children }) {
     return _jsx("label", { style: styles.label, children: children });
 }
-export function Vector3Input({ label, value, onChange, snap }) {
+export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
     const snapValue = (num) => {
         if (!snap)
             return num;
@@ -123,13 +147,12 @@ export function Vector3Input({ label, value, onChange, snap }) {
         }
     };
     const startScrub = (e, index) => {
-        e.preventDefault();
         dragState.current = {
             index,
             startX: e.clientX,
             startValue: value[index]
         };
-        e.target.setPointerCapture(e.pointerId);
+        e.currentTarget.setPointerCapture(e.pointerId);
         document.body.style.cursor = "ew-resize";
     };
     const onScrubMove = (e) => {
@@ -158,40 +181,41 @@ export function Vector3Input({ label, value, onChange, snap }) {
             return;
         dragState.current = null;
         document.body.style.cursor = "";
-        e.target.releasePointerCapture(e.pointerId);
+        e.currentTarget.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 }
+        { key: "x", color: '#e06c75', index: 0 },
+        { key: "y", color: '#98c379', index: 1 },
+        { key: "z", color: '#61afef', 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: {
+    return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }, children: [_jsx("label", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0 }), children: label }), labelExtra] }), _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,
+                        backgroundColor: colors.bgInput,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 3,
                         padding: '4px 6px',
-                        minHeight: 32,
-                    }, children: [_jsx("span", { style: {
-                                fontSize: '12px',
-                                fontWeight: 'bold',
+                        minHeight: 28,
+                        cursor: 'ew-resize',
+                    }, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: [_jsx("span", { style: {
+                                fontSize: 11,
+                                fontWeight: 600,
                                 color,
                                 width: 12,
-                                cursor: 'ew-resize',
                                 userSelect: 'none',
-                            }, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: key.toUpperCase() }), _jsx("input", { style: {
+                            }, children: key.toUpperCase() }), _jsx("input", { style: {
                                 flex: 1,
                                 backgroundColor: 'transparent',
                                 border: 'none',
-                                fontSize: '12px',
-                                color: 'rgba(165, 243, 252, 1)',
+                                fontSize: 11,
+                                color: colors.text,
                                 fontFamily: 'monospace',
                                 outline: 'none',
                                 width: '100%',
                                 minWidth: 0,
+                                cursor: 'inherit',
                             }, type: "text", value: draft[index], onChange: e => {
                                 const next = [...draft];
                                 next[index] = e.target.value;
@@ -209,11 +233,11 @@ export function ColorInput({ label, value, onChange }) {
     return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 4, justifyContent: 'space-between' }, children: [_jsx("input", { type: "color", style: {
                             height: 32,
                             width: 48,
-                            backgroundColor: 'transparent',
-                            border: '1px solid rgba(34, 211, 238, 0.3)',
-                            borderRadius: 4,
+                            backgroundColor: colors.bgInput,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: 3,
                             cursor: 'pointer',
-                            padding: 0,
+                            padding: 2,
                             flexShrink: 0,
                         }, value: value, onChange: e => onChange(e.target.value) }), _jsx("input", { type: "text", style: Object.assign({}, styles.input), value: value, onChange: e => onChange(e.target.value) })] })] }));
 }
@@ -224,14 +248,43 @@ export function BooleanInput({ label, value, onChange }) {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [label && _jsx(Label, { children: label }), _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)',
+                    accentColor: colors.accent,
                     cursor: 'pointer',
                 }, checked: value, onChange: e => onChange(e.target.checked) })] }));
 }
 export function SelectInput({ label, value, onChange, options }) {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [label && _jsx(Label, { children: label }), _jsx("select", { style: styles.input, value: value, onChange: e => onChange(e.target.value), children: options.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }));
 }
+function bindFieldChange(name, onChange) {
+    return (value) => onChange({ [name]: value });
+}
+export function FieldGroup({ children }) {
+    return _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: children });
+}
+export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
+    var _a;
+    return (_jsx(Input, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }));
+}
+export function StringField({ name, label, values, onChange, fallback = '', placeholder, }) {
+    var _a;
+    return (_jsx(StringInput, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), placeholder: placeholder }));
+}
+export function ColorField({ name, label, values, onChange, fallback = '#ffffff', }) {
+    var _a;
+    return (_jsx(ColorInput, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange) }));
+}
+export function BooleanField({ name, label, values, onChange, fallback = false, }) {
+    var _a;
+    return (_jsx(BooleanInput, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange) }));
+}
+export function SelectField({ name, label, values, onChange, fallback, options, }) {
+    var _a, _b, _c, _d;
+    return (_jsx(SelectInput, { label: label, value: (_d = (_b = (_a = values[name]) !== null && _a !== void 0 ? _a : fallback) !== null && _b !== void 0 ? _b : (_c = options[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '', onChange: bindFieldChange(name, onChange), options: options }));
+}
+export function Vector3Field({ name, label, values, onChange, fallback = [0, 0, 0], snap, labelExtra, }) {
+    var _a;
+    return (_jsx(Vector3Input, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), snap: snap, labelExtra: labelExtra }));
+}
 export function FieldRenderer({ fields, values, onChange }) {
     const updateField = (name, value) => {
         onChange({ [name]: value });

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

@@ -1,12 +1,18 @@
 import { Component } from './ComponentRegistry';
-import { MeshStandardMaterialProperties } from 'three';
-export interface MaterialProps extends Omit<MeshStandardMaterialProperties, 'args'> {
+import { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
+export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
+    materialType?: 'standard' | 'basic';
+    transmission?: number;
+    thickness?: number;
+    ior?: number;
     texture?: string;
     repeat?: boolean;
     repeatCount?: [number, number];
     generateMipmaps?: boolean;
     minFilter?: string;
     magFilter?: string;
+    normalMapTexture?: string;
+    normalScale?: [number, number];
 }
 declare const MaterialComponent: Component;
 export default MaterialComponent;

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

@@ -11,39 +11,112 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { FieldRenderer, Input } from './Input';
+import { colors } from '../styles';
 import { useMemo } from 'react';
-import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
+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;
 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]);
-    return (_jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleTextureViewer, { file: value || undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+    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: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
+                }, 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 }) }))] }));
+                    }, basePath: basePath }) }), document.body)] }));
 }
 function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
+    var _a;
+    const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
+    const isStandardMaterial = materialType === 'standard';
     const fields = [
+        {
+            name: 'materialType',
+            type: 'select',
+            label: 'Material Type',
+            options: [
+                { value: 'standard', label: 'Standard' },
+                { value: 'basic', label: 'Basic' },
+            ],
+        },
         { name: 'color', type: 'color', label: 'Color' },
+        { name: 'toneMapped', type: 'boolean', label: 'Tone Mapped' },
         { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
         { name: 'transparent', type: 'boolean', label: 'Transparent' },
         { name: 'opacity', type: 'number', label: 'Opacity', min: 0, max: 1, step: 0.01 },
-        { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
-        { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
-        { name: 'transmission', type: 'number', label: 'Transmission', min: 0, max: 1, step: 0.01 },
-        { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
-        { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
+        ...(isStandardMaterial ? [
+            { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
+            { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
+            { name: 'transmission', type: 'number', label: 'Transmission', min: 0, max: 1, step: 0.01 },
+            { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
+            { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
+        ] : []),
+        {
+            name: 'side',
+            type: 'select',
+            label: 'Side',
+            options: [
+                { value: 'FrontSide', label: 'Front' },
+                { value: 'BackSide', label: 'Back' },
+                { value: 'DoubleSide', label: 'Double' },
+            ],
+        },
         {
             name: 'texture',
             type: 'custom',
@@ -62,6 +135,21 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                         return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1 })] }));
                     },
                 }] : []),
+            {
+                name: 'normalMapTexture',
+                type: 'custom',
+                label: 'Normal Map',
+                render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
+            },
+            ...(component.properties.normalMapTexture ? [{
+                    name: 'normalScale',
+                    type: 'custom',
+                    label: 'Normal Scale (X, Y)',
+                    render: ({ value, onChange }) => {
+                        var _a, _b;
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01 })] }));
+                    },
+                }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },
             {
                 name: 'minFilter',
@@ -91,7 +179,8 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties, loadedTextures }) {
-    var _a;
+    var _a, _b, _c;
+    const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
     const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
@@ -99,9 +188,14 @@ function MaterialComponentView({ properties, loadedTextures }) {
     const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
     const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    const normalMapTextureName = properties === null || properties === void 0 ? void 0 : properties.normalMapTexture;
+    const normalScaleProp = properties === null || properties === void 0 ? void 0 : properties.normalScale;
+    const normalMapTexture = normalMapTextureName && loadedTextures ? loadedTextures[normalMapTextureName] : undefined;
+    const materialSource = properties !== null && properties !== void 0 ? properties : {};
     // Destructure all material props and separate custom texture handling props
-    const _b = properties || {}, { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map } = _b, // Filter out map since we set it explicitly
-    materialProps = __rest(_b, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map"]);
+    const { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp, metalness: _metalness, roughness: _roughness, transmission: _transmission, thickness: _thickness, ior: _ior } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side", "metalness", "roughness", "transmission", "thickness", "ior"]);
+    const sideMap = { FrontSide, BackSide, DoubleSide };
+    const resolvedSide = sideProp ? ((_b = sideMap[sideProp]) !== null && _b !== void 0 ? _b : FrontSide) : FrontSide;
     const minFilterMap = {
         NearestFilter,
         LinearFilter,
@@ -135,10 +229,29 @@ function MaterialComponentView({ properties, loadedTextures }) {
         t.needsUpdate = true;
         return t;
     }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], generateMipmaps, minFilter, magFilter]);
+    const finalNormalMap = useMemo(() => {
+        if (!normalMapTexture)
+            return undefined;
+        const t = normalMapTexture.clone();
+        t.colorSpace = LinearSRGBColorSpace;
+        t.needsUpdate = true;
+        return t;
+    }, [normalMapTexture]);
+    const normalScaleVec = useMemo(() => {
+        var _a, _b;
+        if (!finalNormalMap)
+            return undefined;
+        return new Vector2((_a = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _a !== void 0 ? _a : 1, (_b = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _b !== void 0 ? _b : 1);
+    }, [finalNormalMap, normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0], normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]]);
     if (!properties) {
         return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
     }
-    return (_jsx("meshStandardMaterial", Object.assign({ map: finalTexture }, materialProps), (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
+    const materialKey = (_c = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _c !== void 0 ? _c : 'no-texture';
+    const sharedProps = Object.assign({ map: finalTexture, side: resolvedSide }, materialProps);
+    if (materialType === 'basic') {
+        return _jsx("meshBasicMaterial", Object.assign({}, sharedProps), materialKey);
+    }
+    return (_jsx("meshStandardMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: normalScaleVec }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -146,7 +259,9 @@ const MaterialComponent = {
     View: MaterialComponentView,
     nonComposable: true,
     defaultProperties: {
+        materialType: 'standard',
         color: '#ffffff',
+        toneMapped: true,
         wireframe: false,
         transparent: false,
         opacity: 1,

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

@@ -1,24 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { FieldRenderer } from './Input';
+const PICKER_POPUP_WIDTH = 260;
+const PICKER_POPUP_HEIGHT = 360;
 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: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
                     onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }))] }));
+                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, 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 = "" }) {
     const fields = [