react-three-game 0.0.99 → 0.0.101

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useHelper } from "@react-three/drei";
-import { useRef, useEffect, useState } from "react";
-import { useFrame } from "@react-three/fiber";
+import { useEffect, useRef } from "react";
 import { CameraHelper } from "three";
 import { useNode } from "../assetRuntime";
 import { BooleanField, ColorField, NumberField, NumberInput, Vector3Input } from "./Input";
@@ -23,141 +22,54 @@ const directionalLightDefaults = {
     shadowCameraRight: 5,
     targetOffset: [0, -5, 0],
 };
-const frustumLabelStyle = {
-    fontSize: 10,
-    textTransform: 'uppercase',
-    letterSpacing: '0.06em',
-    color: colors.textMuted,
-    textAlign: 'center',
-};
-const frustumCellStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
-const frustumInputStyle = {
-    width: 62,
-    minWidth: 62,
-    textAlign: 'center',
-};
-const centerLockButtonStyle = {
-    width: 34,
-    height: 34,
-    borderRadius: 0,
-    border: `1px solid ${colors.border}`,
-    background: colors.bgInput,
-    color: colors.textMuted,
-    cursor: 'pointer',
-    fontSize: 14,
-    lineHeight: 1,
-    padding: 0,
-};
-function areFrustumSidesLocked(values) {
-    const top = Math.abs(values.shadowCameraTop);
-    const bottom = Math.abs(values.shadowCameraBottom);
-    const left = Math.abs(values.shadowCameraLeft);
-    const right = Math.abs(values.shadowCameraRight);
-    return top === bottom && top === left && top === right;
-}
-function ShadowFrustumField({ values, onChange, }) {
-    const [locked, setLocked] = useState(() => areFrustumSidesLocked(values));
-    const updateSide = (side, nextValue) => {
-        if (!locked) {
-            onChange({ [side]: nextValue });
-            return;
-        }
-        const magnitude = Math.abs(nextValue);
-        onChange({
-            shadowCameraTop: magnitude,
-            shadowCameraBottom: -magnitude,
-            shadowCameraLeft: -magnitude,
-            shadowCameraRight: magnitude,
-        });
-    };
-    const toggleLocked = () => {
-        setLocked(current => {
-            const nextLocked = !current;
-            if (nextLocked) {
-                const magnitude = Math.max(Math.abs(values.shadowCameraTop), Math.abs(values.shadowCameraBottom), Math.abs(values.shadowCameraLeft), Math.abs(values.shadowCameraRight));
-                onChange({
-                    shadowCameraTop: magnitude,
-                    shadowCameraBottom: -magnitude,
-                    shadowCameraLeft: -magnitude,
-                    shadowCameraRight: magnitude,
-                });
-            }
-            return nextLocked;
-        });
-    };
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("div", { style: Object.assign(Object.assign({}, frustumLabelStyle), { textAlign: 'left' }), children: "Shadow Frustum" }), _jsxs("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: '1fr auto 1fr',
-                    gridTemplateRows: 'auto auto auto',
-                    gap: 8,
-                    alignItems: 'center',
-                }, children: [_jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Top" }), _jsx(NumberInput, { value: values.shadowCameraTop, onChange: nextValue => updateSide('shadowCameraTop', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Left" }), _jsx(NumberInput, { value: values.shadowCameraLeft, onChange: nextValue => updateSide('shadowCameraLeft', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", { style: frustumCellStyle, children: _jsx("button", { type: "button", onClick: toggleLocked, style: Object.assign(Object.assign({}, centerLockButtonStyle), { color: locked ? colors.accent : colors.textMuted, borderColor: locked ? colors.accentBorder : colors.border, background: locked ? colors.accentBg : colors.bgInput }), title: locked ? 'Frustum sides locked' : 'Frustum sides unlocked', children: locked ? '🔒' : '🔓' }) }), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Right" }), _jsx(NumberInput, { value: values.shadowCameraRight, onChange: nextValue => updateSide('shadowCameraRight', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Bottom" }), _jsx(NumberInput, { value: values.shadowCameraBottom, onChange: nextValue => updateSide('shadowCameraBottom', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {})] })] }));
+function ShadowFrustumField({ values, onChange }) {
+    // Minimal, no lock UI for simplicity (can add back if needed)
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("div", { style: { fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em', color: colors.textMuted, textAlign: 'left' }, children: "Shadow Frustum" }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx(NumberInput, { value: values.shadowCameraTop, onChange: v => onChange({ shadowCameraTop: v }), step: 0.5, style: { width: 62, minWidth: 62, textAlign: 'center' }, label: "Top" }), _jsx(NumberInput, { value: values.shadowCameraBottom, onChange: v => onChange({ shadowCameraBottom: v }), step: 0.5, style: { width: 62, minWidth: 62, textAlign: 'center' }, label: "Bottom" }), _jsx(NumberInput, { value: values.shadowCameraLeft, onChange: v => onChange({ shadowCameraLeft: v }), step: 0.5, style: { width: 62, minWidth: 62, textAlign: 'center' }, label: "Left" }), _jsx(NumberInput, { value: values.shadowCameraRight, onChange: v => onChange({ shadowCameraRight: v }), step: 0.5, style: { width: 62, minWidth: 62, textAlign: 'center' }, label: "Right" })] })] }));
 }
 function DirectionalLightComponentEditor({ component, onUpdate }) {
     const values = mergeWithDefaults(directionalLightDefaults, component.properties);
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs(LightSection, { title: "Light", 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(Vector3Input, { label: "Target Offset", value: values.targetOffset, onChange: targetOffset => onUpdate({ targetOffset }), snap: 0.5 })] }), _jsxs(LightSection, { title: "Shadow", children: [_jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: false }), values.castShadow ? (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "shadowAutoUpdate", label: "Auto Update", values: values, onChange: onUpdate, fallback: true }), _jsx(NumberField, { name: "shadowMapSize", label: "Map Size", values: values, onChange: onUpdate, min: 128, step: 128, fallback: 512 }), _jsx(ShadowBiasField, { name: "shadowBias", label: "Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(ShadowBiasField, { name: "shadowNormalBias", label: "Normal Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(NumberField, { name: "shadowCameraNear", label: "Near", values: values, onChange: onUpdate, min: 0.001, step: 0.1, fallback: 0.5 }), _jsx(NumberField, { name: "shadowCameraFar", label: "Far", values: values, onChange: onUpdate, min: 0.1, step: 1, fallback: 500 }), _jsx(ShadowFrustumField, { values: values, onChange: onUpdate })] })) : null] })] }));
 }
 function DirectionalLightView({ properties, children }) {
+    var _a;
     const { editMode, isSelected } = useNode();
     const merged = mergeWithDefaults(directionalLightDefaults, properties);
-    const color = merged.color;
-    const intensity = merged.intensity;
-    const castShadow = merged.castShadow;
-    const shadowMapSize = merged.shadowMapSize;
-    const shadowBias = merged.shadowBias;
-    const shadowNormalBias = merged.shadowNormalBias;
-    const shadowAutoUpdate = merged.shadowAutoUpdate;
-    const shadowCameraNear = merged.shadowCameraNear;
-    const shadowCameraFar = merged.shadowCameraFar;
-    const shadowCameraTop = merged.shadowCameraTop;
-    const shadowCameraBottom = merged.shadowCameraBottom;
-    const shadowCameraLeft = merged.shadowCameraLeft;
-    const shadowCameraRight = merged.shadowCameraRight;
-    const targetOffset = merged.targetOffset;
+    const lightProps = {
+        color: merged.color,
+        intensity: merged.intensity,
+        castShadow: merged.castShadow,
+        "shadow-mapSize-width": merged.shadowMapSize,
+        "shadow-mapSize-height": merged.shadowMapSize,
+        "shadow-bias": merged.shadowBias,
+        "shadow-normalBias": merged.shadowNormalBias,
+        "shadow-autoUpdate": merged.shadowAutoUpdate,
+        "shadow-camera-near": merged.shadowCameraNear,
+        "shadow-camera-far": merged.shadowCameraFar,
+        "shadow-camera-top": merged.shadowCameraTop,
+        "shadow-camera-bottom": merged.shadowCameraBottom,
+        "shadow-camera-left": merged.shadowCameraLeft,
+        "shadow-camera-right": merged.shadowCameraRight,
+    };
     const directionalLightRef = useRef(null);
     const targetRef = useRef(null);
     const shadowCameraRef = useRef(null);
-    const [shadowCamera, setShadowCamera] = useState(null);
-    const helperTarget = editMode && isSelected && castShadow && shadowCameraRef.current
-        ? { current: shadowCameraRef.current }
-        : null;
+    // Show CameraHelper only in edit mode, selected, and castShadow
+    const showHelper = editMode && isSelected && merged.castShadow;
+    const helperTarget = showHelper && shadowCameraRef.current ? { current: shadowCameraRef.current } : null;
     useHelper(helperTarget, CameraHelper);
-    // Use a local target object so node transforms rotate the light direction naturally.
-    useEffect(() => {
-        if (directionalLightRef.current && targetRef.current) {
-            directionalLightRef.current.target = targetRef.current;
-            const nextShadowCamera = directionalLightRef.current.shadow.camera;
-            shadowCameraRef.current = nextShadowCamera;
-            setShadowCamera(castShadow ? nextShadowCamera : null);
-        }
-    });
     useEffect(() => {
-        var _a;
-        const shadow = (_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
-        if (!shadow)
-            return;
-        shadow.needsUpdate = true;
-        shadow.camera.updateProjectionMatrix();
-    });
-    useFrame(() => {
-        if (!directionalLightRef.current || !targetRef.current)
-            return;
-        directionalLightRef.current.target.updateMatrixWorld();
-        if (shadowCamera && castShadow) {
-            shadowCamera.updateProjectionMatrix();
-            shadowCamera.updateMatrixWorld();
+        if (directionalLightRef.current) {
+            shadowCameraRef.current = directionalLightRef.current.shadow.camera;
         }
-    });
-    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": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { children: _jsx("bufferAttribute", { attach: "attributes-position", args: [new Float32Array([0, 0, 0, targetOffset[0], targetOffset[1], targetOffset[2]]), 3] }) }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] })), children] }));
+    }, []);
+    return (_jsxs("group", { children: [_jsxs("directionalLight", Object.assign({ ref: directionalLightRef }, lightProps, { 
+                // Attach the target object
+                target: (_a = targetRef.current) !== null && _a !== void 0 ? _a : undefined, children: [children, editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: merged.color, wireframe: true })] }), _jsxs("mesh", { position: merged.targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: merged.color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { children: _jsx("bufferAttribute", { attach: "attributes-position", args: [new Float32Array([0, 0, 0, merged.targetOffset[0], merged.targetOffset[1], merged.targetOffset[2]]), 3] }) }), _jsx("lineBasicMaterial", { color: merged.color, opacity: 0.6, transparent: true })] })] }))] })), _jsx("object3D", { ref: targetRef, position: merged.targetOffset })] }));
 }
 const DirectionalLightComponent = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: {}
+    defaultProperties: {},
 };
 export default DirectionalLightComponent;

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

@@ -10,6 +10,7 @@ function EnvironmentView({ properties, children, }) {
 }
 const EnvironmentComponent = {
     name: 'Environment',
+    disableSiblingComposition: true,
     Editor: ({ component, onUpdate }) => (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "resolution", label: "Resolution", values: component.properties, onChange: onUpdate, min: 64, step: 64, fallback: 256 })] })),
     View: EnvironmentView,
     defaultProperties: {},

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

@@ -82,6 +82,7 @@ function GeometryComponentView({ properties, children }) {
 }
 const GeometryComponent = {
     name: 'Geometry',
+    disableSiblingComposition: 'geometry',
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
     defaultProperties: {

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

@@ -57,6 +57,7 @@ interface InputProps {
     min?: number;
     max?: number;
     style?: React.CSSProperties;
+    label?: string;
 }
 export declare function NumberInput({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare function Label({ children }: {

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

@@ -11,6 +11,7 @@ declare module '@react-three/fiber' {
     }
 }
 export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale' | 'side'> {
+    attach?: string;
     materialType?: 'standard' | 'basic' | 'sprite';
     transmission?: number;
     thickness?: number;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useRef } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
 import { assetRef, assetRefs } from './ComponentRegistry';
@@ -38,26 +38,6 @@ const MAG_FILTER_MAP = {
     NearestFilter,
     LinearFilter,
 };
-function cloneConfiguredTexture({ texture, repeat, repeatCount, offset, colorSpace, generateMipmaps, minFilter, magFilter, }) {
-    var _a, _b;
-    const clonedTexture = texture.clone();
-    if (repeat) {
-        clonedTexture.wrapS = clonedTexture.wrapT = RepeatWrapping;
-        if (repeatCount)
-            clonedTexture.repeat.set(repeatCount[0], repeatCount[1]);
-    }
-    else {
-        clonedTexture.wrapS = clonedTexture.wrapT = ClampToEdgeWrapping;
-        clonedTexture.repeat.set(1, 1);
-    }
-    clonedTexture.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
-    clonedTexture.colorSpace = colorSpace;
-    clonedTexture.generateMipmaps = generateMipmaps;
-    clonedTexture.minFilter = minFilter;
-    clonedTexture.magFilter = magFilter;
-    clonedTexture.needsUpdate = true;
-    return clonedTexture;
-}
 export function useMaterialOverrides() {
     return useContext(MaterialOverridesContext);
 }
@@ -80,6 +60,11 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
     const isStandardMaterial = materialType === 'standard';
     const isSpriteMaterial = materialType === 'sprite';
     const fields = [
+        {
+            name: 'attach',
+            type: 'string',
+            label: 'Attach',
+        },
         {
             name: 'materialType',
             type: 'select',
@@ -208,39 +193,85 @@ function MaterialComponentView({ properties: rawProps }) {
     const normalScaleProp = materialSource.normalScale;
     const normalMapTexture = normalMapTextureName ? getTexture(normalMapTextureName) : undefined;
     // Destructure all material props and separate custom texture handling props
-    const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, rotation, sizeAttenuation, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "rotation", "sizeAttenuation", "side"]);
+    const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, attach, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, rotation, sizeAttenuation, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "attach", "normalMapTexture", "normalScale", "normalMap", "rotation", "sizeAttenuation", "side"]);
     const resolvedSide = sideProp ? (_d = SIDE_MAP[sideProp]) !== null && _d !== void 0 ? _d : FrontSide : FrontSide;
     const resolvedMinFilter = (_e = MIN_FILTER_MAP[minFilter]) !== null && _e !== void 0 ? _e : LinearMipmapLinearFilter;
     const resolvedMagFilter = (_f = MAG_FILTER_MAP[magFilter]) !== null && _f !== void 0 ? _f : LinearFilter;
     const animatedOffsetRef = useRef([(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0]);
     const finalTexture = useMemo(() => {
-        if (!texture)
-            return undefined;
-        return cloneConfiguredTexture({
-            texture,
-            repeat,
-            repeatCount,
-            offset,
-            colorSpace: SRGBColorSpace,
-            generateMipmaps,
-            minFilter: resolvedMinFilter,
-            magFilter: resolvedMagFilter,
-        });
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, resolvedMinFilter, resolvedMagFilter]);
+        return texture ? texture.clone() : undefined;
+    }, [texture]);
+    useEffect(() => {
+        return () => finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.dispose();
+    }, [finalTexture]);
+    useEffect(() => {
+        var _a, _b;
+        if (!finalTexture)
+            return;
+        if (repeat) {
+            finalTexture.wrapS = finalTexture.wrapT = RepeatWrapping;
+            if (repeatCount) {
+                finalTexture.repeat.set(repeatCount[0], repeatCount[1]);
+            }
+        }
+        else {
+            finalTexture.wrapS = finalTexture.wrapT = ClampToEdgeWrapping;
+            finalTexture.repeat.set(1, 1);
+        }
+        finalTexture.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
+        finalTexture.colorSpace = SRGBColorSpace;
+        finalTexture.generateMipmaps = generateMipmaps;
+        finalTexture.minFilter = resolvedMinFilter;
+        finalTexture.magFilter = resolvedMagFilter;
+        finalTexture.needsUpdate = true;
+    }, [
+        finalTexture,
+        repeat,
+        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0],
+        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1],
+        offset === null || offset === void 0 ? void 0 : offset[0],
+        offset === null || offset === void 0 ? void 0 : offset[1],
+        generateMipmaps,
+        resolvedMinFilter,
+        resolvedMagFilter
+    ]);
     const finalNormalMap = useMemo(() => {
-        if (!normalMapTexture)
-            return undefined;
-        return cloneConfiguredTexture({
-            texture: normalMapTexture,
-            repeat,
-            repeatCount,
-            offset,
-            colorSpace: NoColorSpace,
-            generateMipmaps,
-            minFilter: resolvedMinFilter,
-            magFilter: resolvedMagFilter,
-        });
-    }, [normalMapTexture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, resolvedMinFilter, resolvedMagFilter]);
+        return normalMapTexture ? normalMapTexture.clone() : undefined;
+    }, [normalMapTexture]);
+    useEffect(() => {
+        return () => finalNormalMap === null || finalNormalMap === void 0 ? void 0 : finalNormalMap.dispose();
+    }, [finalNormalMap]);
+    useEffect(() => {
+        var _a, _b;
+        if (!finalNormalMap)
+            return;
+        if (repeat) {
+            finalNormalMap.wrapS = finalNormalMap.wrapT = RepeatWrapping;
+            if (repeatCount) {
+                finalNormalMap.repeat.set(repeatCount[0], repeatCount[1]);
+            }
+        }
+        else {
+            finalNormalMap.wrapS = finalNormalMap.wrapT = ClampToEdgeWrapping;
+            finalNormalMap.repeat.set(1, 1);
+        }
+        finalNormalMap.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
+        finalNormalMap.colorSpace = NoColorSpace;
+        finalNormalMap.generateMipmaps = generateMipmaps;
+        finalNormalMap.minFilter = resolvedMinFilter;
+        finalNormalMap.magFilter = resolvedMagFilter;
+        finalNormalMap.needsUpdate = true;
+    }, [
+        finalNormalMap,
+        repeat,
+        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0],
+        repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1],
+        offset === null || offset === void 0 ? void 0 : offset[0],
+        offset === null || offset === void 0 ? void 0 : offset[1],
+        generateMipmaps,
+        resolvedMinFilter,
+        resolvedMagFilter
+    ]);
     animatedOffsetRef.current = [(_j = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _j !== void 0 ? _j : 0, (_k = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _k !== void 0 ? _k : 0];
     useFrame((_, delta) => {
         var _a, _b;
@@ -259,22 +290,28 @@ function MaterialComponentView({ properties: rawProps }) {
     const sharedProps = Object.assign(Object.assign({ map: finalTexture !== null && finalTexture !== void 0 ? finalTexture : null, side: resolvedSide, onUpdate: (material) => {
             material.needsUpdate = true;
         } }, materialProps), overrides);
+    const materialKey = [
+        materialType,
+        textureName !== null && textureName !== void 0 ? textureName : 'no-texture',
+        normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'no-normal',
+    ].join('|');
     if (materialType === 'basic') {
-        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps));
+        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material' }, sharedProps), materialKey);
     }
     if (materialType === 'sprite') {
         const spriteTransparent = materialSource.transparent !== false;
-        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture !== null && finalTexture !== void 0 ? finalTexture : null, color: (_l = materialSource.color) !== null && _l !== void 0 ? _l : '#ffffff', opacity: (_m = materialSource.opacity) !== null && _m !== void 0 ? _m : 1, transparent: spriteTransparent, alphaTest: (_o = materialSource.alphaTest) !== null && _o !== void 0 ? _o : 0, depthTest: (_p = materialSource.depthTest) !== null && _p !== void 0 ? _p : false, depthWrite: (_q = materialSource.depthWrite) !== null && _q !== void 0 ? _q : false, toneMapped: (_r = materialSource.toneMapped) !== null && _r !== void 0 ? _r : true, onUpdate: material => {
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material', map: finalTexture !== null && finalTexture !== void 0 ? finalTexture : null, color: (_l = materialSource.color) !== null && _l !== void 0 ? _l : '#ffffff', opacity: (_m = materialSource.opacity) !== null && _m !== void 0 ? _m : 1, transparent: spriteTransparent, alphaTest: (_o = materialSource.alphaTest) !== null && _o !== void 0 ? _o : 0, depthTest: (_p = materialSource.depthTest) !== null && _p !== void 0 ? _p : false, depthWrite: (_q = materialSource.depthWrite) !== null && _q !== void 0 ? _q : false, toneMapped: (_r = materialSource.toneMapped) !== null && _r !== void 0 ? _r : true, onUpdate: material => {
                 material.needsUpdate = true;
-            } }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true })));
+            } }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap !== null && finalNormalMap !== void 0 ? finalNormalMap : null, normalScale: finalNormalMap ? [(_s = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _s !== void 0 ? _s : 1, (_t = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _t !== void 0 ? _t : 1] : undefined })));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: attach !== null && attach !== void 0 ? attach : 'material' }, sharedProps, { normalMap: finalNormalMap !== null && finalNormalMap !== void 0 ? finalNormalMap : null, normalScale: finalNormalMap ? [(_s = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _s !== void 0 ? _s : 1, (_t = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _t !== void 0 ? _t : 1] : undefined }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',
     Editor: MaterialComponentEditor,
     View: MaterialComponentView,
     defaultProperties: {
+        attach: 'material',
         materialType: 'standard',
         color: '#ffffff',
         toneMapped: true,

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

@@ -5,9 +5,10 @@ import { Mesh } from 'three';
 import { assetRef, assetRefs } from './ComponentRegistry';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput, StringField } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
-import { useEditorContext } from '../PrefabEditor';
+import { useEditorContext, useEditorRef } from '../PrefabEditor';
 import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
-import { colors, ui } from '../styles';
+import { base, colors, ui } from '../styles';
+import { decomposeModelToPrefabNodes } from '../modelPrefab';
 const AXIS_OPTIONS = [
     { value: 'x', label: 'X' },
     { value: 'y', label: 'Y' },
@@ -42,8 +43,49 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     const { positionSnap } = useEditorContext();
+    const editor = useEditorRef();
     const repeatAxes = getRepeatAxesFromModelProperties(component.properties);
-    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: "emitClickEvent", label: "Emit Click Event", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitClickEvent ? (_jsx(StringField, { name: "clickEventName", label: "Click Event Name", values: component.properties, onChange: onUpdate, placeholder: "node:click" })) : null] })) : null, 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 }))] }))] }));
+    const filename = component.properties.filename;
+    const canDecompose = Boolean(node && filename);
+    const handleDecompose = () => {
+        var _a, _b, _c, _d;
+        if (!node || !filename)
+            return;
+        const model = editor.getModel(filename);
+        if (!model) {
+            console.warn(`Model is not loaded yet: ${filename}`);
+            return;
+        }
+        const textureRefs = new Map();
+        const decomposed = decomposeModelToPrefabNodes(model, {
+            idPrefix: node.id,
+            getTexturePath: (texture, usage) => {
+                const key = `embedded/${node.id}/${usage}/${texture.uuid}`;
+                textureRefs.set(key, texture);
+                return key;
+            },
+        });
+        textureRefs.forEach((texture, path) => {
+            editor.addTexture(path, texture);
+        });
+        const preservedComponents = Object.entries((_a = node.components) !== null && _a !== void 0 ? _a : {}).reduce((result, [key, entry]) => {
+            if (!(entry === null || entry === void 0 ? void 0 : entry.type))
+                return result;
+            if (entry.type === 'Model' || entry.type === 'Geometry' || entry.type === 'BufferGeometry' || entry.type === 'Material') {
+                return result;
+            }
+            result[key] = entry;
+            return result;
+        }, {});
+        const decomposedComponents = Object.entries((_b = decomposed.components) !== null && _b !== void 0 ? _b : {}).reduce((result, [key, entry]) => {
+            if (!(entry === null || entry === void 0 ? void 0 : entry.type) || entry.type === 'Transform')
+                return result;
+            result[key] = entry;
+            return result;
+        }, {});
+        editor.replaceNode(node.id, Object.assign(Object.assign({}, node), { name: (_c = node.name) !== null && _c !== void 0 ? _c : decomposed.name, components: Object.assign(Object.assign({}, preservedComponents), decomposedComponents), children: (_d = decomposed.children) !== null && _d !== void 0 ? _d : [] }));
+    };
+    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, pickerKey: node === null || node === void 0 ? void 0 : node.id }), _jsx("button", { type: "button", style: Object.assign(Object.assign({}, base.btn), { width: '100%' }), onClick: handleDecompose, disabled: !canDecompose, title: canDecompose ? 'Replace this model node with editable geometry and material nodes' : 'Choose a model before decomposing', children: "Decompose Model" }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), !component.properties.instanced ? (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "emitClickEvent", label: "Emit Click Event", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitClickEvent ? (_jsx(StringField, { name: "clickEventName", label: "Click Event Name", values: component.properties, onChange: onUpdate, placeholder: "node:click" })) : null] })) : null, 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, children }) {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { useHelper } from '@react-three/drei';
 import { PointLightHelper } from 'three';
 import { useNode } from '../assetRuntime';
@@ -25,31 +25,25 @@ function PointLightComponentEditor({ component, onUpdate }) {
 function PointLightView({ properties, children }) {
     const { editMode, isSelected } = useNode();
     const merged = mergeWithDefaults(pointLightDefaults, properties);
-    const color = merged.color;
-    const intensity = merged.intensity;
-    const distance = merged.distance;
-    const decay = merged.decay;
-    const castShadow = merged.castShadow;
-    const shadowMapSize = merged.shadowMapSize;
-    const shadowBias = merged.shadowBias;
-    const shadowNormalBias = merged.shadowNormalBias;
-    const shadowAutoUpdate = merged.shadowAutoUpdate;
-    const shadowCameraNear = merged.shadowCameraNear;
-    const shadowCameraFar = merged.shadowCameraFar;
+    const lightProps = {
+        color: merged.color,
+        intensity: merged.intensity,
+        distance: merged.distance,
+        decay: merged.decay,
+        castShadow: merged.castShadow,
+        "shadow-mapSize-width": merged.shadowMapSize,
+        "shadow-mapSize-height": merged.shadowMapSize,
+        "shadow-bias": merged.shadowBias,
+        "shadow-normalBias": merged.shadowNormalBias,
+        "shadow-autoUpdate": merged.shadowAutoUpdate,
+        "shadow-camera-near": merged.shadowCameraNear,
+        "shadow-camera-far": merged.shadowCameraFar,
+    };
     const lightRef = useRef(null);
-    const helperTarget = editMode && isSelected && lightRef.current
-        ? { current: lightRef.current }
-        : null;
-    useHelper(helperTarget, PointLightHelper, 0.5, color);
-    useEffect(() => {
-        var _a;
-        const shadow = (_a = lightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
-        if (!shadow)
-            return;
-        shadow.needsUpdate = true;
-        shadow.camera.updateProjectionMatrix();
-    });
-    return (_jsxs(_Fragment, { children: [_jsx("pointLight", { ref: lightRef, color: color, intensity: intensity, distance: distance, decay: decay, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), editMode && isSelected ? (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] })) : null, children] }));
+    const showHelper = editMode && isSelected && lightRef.current;
+    const helperTarget = showHelper && lightRef.current ? { current: lightRef.current } : null;
+    useHelper(helperTarget, PointLightHelper, 0.5);
+    return (_jsx("group", { children: _jsxs("pointLight", Object.assign({ ref: lightRef }, lightProps, { children: [children, editMode && isSelected && (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: merged.color, wireframe: true })] }))] })) }));
 }
 const PointLightComponent = {
     name: 'PointLight',