react-three-game 0.0.100 → 0.0.102

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, useLayoutEffect, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
 import { assetRef, assetRefs } from './ComponentRegistry';
@@ -38,25 +38,53 @@ 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]);
+function configureTexture(texture, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!texture)
+        return;
+    if (options.repeat) {
+        texture.wrapS = texture.wrapT = RepeatWrapping;
+        texture.repeat.set((_b = (_a = options.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, (_d = (_c = options.repeatCount) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 1);
     }
     else {
-        clonedTexture.wrapS = clonedTexture.wrapT = ClampToEdgeWrapping;
-        clonedTexture.repeat.set(1, 1);
+        texture.wrapS = texture.wrapT = ClampToEdgeWrapping;
+        texture.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;
+    texture.offset.set((_f = (_e = options.offset) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : 0, (_h = (_g = options.offset) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0);
+    texture.colorSpace = options.colorSpace;
+    texture.generateMipmaps = options.generateMipmaps;
+    texture.minFilter = options.minFilter;
+    texture.magFilter = options.magFilter;
+    texture.needsUpdate = true;
+}
+function cloneConfiguredTexture(texture, options) {
+    if (!texture)
+        return undefined;
+    const nextTexture = texture.clone();
+    configureTexture(nextTexture, options);
+    return nextTexture;
+}
+function useConfiguredTexture(texture, options) {
+    var _a, _b, _c, _d;
+    const configuredTexture = useMemo(() => cloneConfiguredTexture(texture, options), [texture]);
+    useEffect(() => {
+        return () => configuredTexture === null || configuredTexture === void 0 ? void 0 : configuredTexture.dispose();
+    }, [configuredTexture]);
+    useLayoutEffect(() => {
+        configureTexture(configuredTexture, options);
+    }, [
+        configuredTexture,
+        options.colorSpace,
+        options.repeat,
+        (_a = options.repeatCount) === null || _a === void 0 ? void 0 : _a[0],
+        (_b = options.repeatCount) === null || _b === void 0 ? void 0 : _b[1],
+        (_c = options.offset) === null || _c === void 0 ? void 0 : _c[0],
+        (_d = options.offset) === null || _d === void 0 ? void 0 : _d[1],
+        options.generateMipmaps,
+        options.minFilter,
+        options.magFilter,
+    ]);
+    return configuredTexture;
 }
 export function useMaterialOverrides() {
     return useContext(MaterialOverridesContext);
@@ -72,14 +100,20 @@ extend({
     SpriteNodeMaterial,
 });
 function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
-    var _a;
+    var _a, _b, _c, _d;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
     const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
     const isSpriteMaterial = materialType === 'sprite';
+    const editorValues = Object.assign(Object.assign({}, component.properties), { generateMipmaps: (_b = component.properties.generateMipmaps) !== null && _b !== void 0 ? _b : true, minFilter: (_c = component.properties.minFilter) !== null && _c !== void 0 ? _c : 'LinearMipmapLinearFilter', magFilter: (_d = component.properties.magFilter) !== null && _d !== void 0 ? _d : 'LinearFilter' });
     const fields = [
+        {
+            name: 'attach',
+            type: 'string',
+            label: 'Attach',
+        },
         {
             name: 'materialType',
             type: 'select',
@@ -166,12 +200,12 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
                 type: 'select',
                 label: 'Min Filter',
                 options: [
+                    { value: 'LinearMipmapLinearFilter', label: 'Linear Mipmap Linear (Default)' },
+                    { value: 'LinearFilter', label: 'Linear' },
+                    { value: 'LinearMipmapNearestFilter', label: 'Linear Mipmap Nearest' },
                     { value: 'NearestFilter', label: 'Nearest' },
                     { value: 'NearestMipmapNearestFilter', label: 'Nearest Mipmap Nearest' },
                     { value: 'NearestMipmapLinearFilter', label: 'Nearest Mipmap Linear' },
-                    { value: 'LinearFilter', label: 'Linear' },
-                    { value: 'LinearMipmapNearestFilter', label: 'Linear Mipmap Nearest' },
-                    { value: 'LinearMipmapLinearFilter', label: 'Linear Mipmap Linear (Default)' },
                 ],
             },
             {
@@ -179,17 +213,17 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
                 type: 'select',
                 label: 'Mag Filter',
                 options: [
-                    { value: 'NearestFilter', label: 'Nearest' },
                     { value: 'LinearFilter', label: 'Linear (Default)' },
+                    { value: 'NearestFilter', label: 'Nearest' },
                 ],
             },
         ] : []),
     ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    return (_jsx(FieldRenderer, { fields: fields, values: editorValues, onChange: onUpdate }));
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
@@ -208,39 +242,21 @@ 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]);
-    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]);
+    const textureConfig = {
+        repeat,
+        repeatCount,
+        offset,
+        generateMipmaps,
+        minFilter: resolvedMinFilter,
+        magFilter: resolvedMagFilter,
+    };
+    const finalTexture = useConfiguredTexture(texture, Object.assign(Object.assign({}, textureConfig), { colorSpace: SRGBColorSpace }));
+    const finalNormalMap = useConfiguredTexture(normalMapTexture, Object.assign(Object.assign({}, textureConfig), { colorSpace: NoColorSpace }));
     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 +275,34 @@ 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',
+        repeat ? 'repeat' : 'clamp',
+        (_l = repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0]) !== null && _l !== void 0 ? _l : 1,
+        (_m = repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1]) !== null && _m !== void 0 ? _m : 1,
+        generateMipmaps ? 'mips' : 'no-mips',
+        minFilter,
+        magFilter,
+    ].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: (_o = materialSource.color) !== null && _o !== void 0 ? _o : '#ffffff', opacity: (_p = materialSource.opacity) !== null && _p !== void 0 ? _p : 1, transparent: spriteTransparent, alphaTest: (_q = materialSource.alphaTest) !== null && _q !== void 0 ? _q : 0, depthTest: (_r = materialSource.depthTest) !== null && _r !== void 0 ? _r : false, depthWrite: (_s = materialSource.depthWrite) !== null && _s !== void 0 ? _s : false, toneMapped: (_t = materialSource.toneMapped) !== null && _t !== void 0 ? _t : 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 ? [(_u = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _u !== void 0 ? _u : 1, (_v = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _v !== void 0 ? _v : 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/SpriteComponent.js

@@ -17,6 +17,7 @@ function SpriteComponentEditor({ component, onUpdate, }) {
 }
 const SpriteComponent = {
     name: 'Sprite',
+    disableSiblingComposition: true,
     Editor: SpriteComponentEditor,
     defaultProperties: {
         center: [0.5, 0.5],

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

@@ -48,6 +48,7 @@ function TransformComponentEditor({ component, onUpdate }) {
 }
 const TransformComponent = {
     name: 'Transform',
+    disableSiblingComposition: true,
     Editor: TransformComponentEditor,
     defaultProperties: {}
 };

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

@@ -0,0 +1,16 @@
+import { Object3D } from 'three';
+import type { Texture } from 'three';
+import type { GameObject } from './types';
+export interface DecomposeModelOptions {
+    /** Prefix used for generated prefab node ids. Defaults to "model". */
+    idPrefix?: string;
+    /** Include invisible Three objects in the generated prefab tree. */
+    includeInvisible?: boolean;
+    /** Return a serializable texture ref for embedded or externally loaded textures. */
+    getTexturePath?: (texture: Texture, usage: 'map' | 'normalMap') => string | null | undefined;
+}
+/**
+ * Converts a live Three object hierarchy into prefab JSON nodes made from
+ * Transform, BufferGeometry, and Material components.
+ */
+export declare function decomposeModelToPrefabNodes(object: Object3D, options?: DecomposeModelOptions): GameObject;

package/dist/tools/prefabeditor/modelPrefab.js

@@ -0,0 +1,180 @@
+import { BackSide, DoubleSide, Mesh, } from 'three';
+function createId(prefix) {
+    return `${prefix}-${crypto.randomUUID()}`;
+}
+function toArrayAttribute(attribute, itemSize, vertexIndices) {
+    if (!attribute || attribute.itemSize < itemSize)
+        return undefined;
+    const values = [];
+    for (const vertexIndex of vertexIndices) {
+        for (let axis = 0; axis < itemSize; axis += 1) {
+            values.push(attribute.getComponent(vertexIndex, axis));
+        }
+    }
+    return values;
+}
+function getSequentialVertexIndices(count) {
+    return Array.from({ length: count }, (_, index) => index);
+}
+function serializeGeometry(geometry) {
+    var _a, _b, _c, _d;
+    const position = geometry.getAttribute('position');
+    const normal = geometry.getAttribute('normal');
+    const uv = geometry.getAttribute('uv');
+    const vertexIndices = getSequentialVertexIndices((_a = position === null || position === void 0 ? void 0 : position.count) !== null && _a !== void 0 ? _a : 0);
+    const index = geometry.index;
+    const indices = [];
+    if (index) {
+        for (let offset = 0; offset < index.count; offset += 1) {
+            indices.push(index.getX(offset));
+        }
+    }
+    else {
+        indices.push(...vertexIndices);
+    }
+    const positions = (_b = toArrayAttribute(position, 3, vertexIndices)) !== null && _b !== void 0 ? _b : [];
+    const normals = (_c = toArrayAttribute(normal, 3, vertexIndices)) !== null && _c !== void 0 ? _c : [];
+    const uvs = (_d = toArrayAttribute(uv, 2, vertexIndices)) !== null && _d !== void 0 ? _d : [];
+    const groups = geometry.groups.map(group => {
+        var _a;
+        return ({
+            start: group.start,
+            count: group.count,
+            materialIndex: (_a = group.materialIndex) !== null && _a !== void 0 ? _a : 0,
+        });
+    });
+    return {
+        positions,
+        indices,
+        normals,
+        uvs,
+        groups,
+        computeVertexNormals: normals.length === 0,
+    };
+}
+function getSideName(side) {
+    if (side === BackSide)
+        return 'BackSide';
+    if (side === DoubleSide)
+        return 'DoubleSide';
+    return 'FrontSide';
+}
+function getMaterialColor(material) {
+    var _a, _b;
+    const maybeColor = material;
+    return (_b = (_a = maybeColor.color) === null || _a === void 0 ? void 0 : _a.getStyle) === null || _b === void 0 ? void 0 : _b.call(_a);
+}
+function getTextureImagePath(texture) {
+    var _a;
+    const image = texture === null || texture === void 0 ? void 0 : texture.image;
+    const path = (_a = image === null || image === void 0 ? void 0 : image.currentSrc) !== null && _a !== void 0 ? _a : image === null || image === void 0 ? void 0 : image.src;
+    if (typeof path === 'string' && path.trim() && !path.startsWith('blob:')) {
+        return path;
+    }
+    return getTextureImageDataUrl(image);
+}
+function getTextureImageDataUrl(image) {
+    if (!image
+        || typeof document === 'undefined'
+        || typeof image.width !== 'number'
+        || typeof image.height !== 'number'
+        || image.width <= 0
+        || image.height <= 0) {
+        return undefined;
+    }
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return undefined;
+        context.drawImage(image, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function getTexturePath(texture, usage, options) {
+    var _a, _b;
+    if (!texture)
+        return undefined;
+    return (_b = (_a = getTextureImagePath(texture)) !== null && _a !== void 0 ? _a : options.getTexturePath(texture, usage)) !== null && _b !== void 0 ? _b : undefined;
+}
+function serializeMaterial(material, attach, options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const source = material;
+    const materialType = 'metalness' in source || 'roughness' in source ? 'standard' : 'basic';
+    const texture = getTexturePath(source.map, 'map', options);
+    const normalMapTexture = getTexturePath(source.normalMap, 'normalMap', options);
+    const normalScale = (_b = (_a = source.normalScale) === null || _a === void 0 ? void 0 : _a.toArray) === null || _b === void 0 ? void 0 : _b.call(_a);
+    return {
+        type: 'Material',
+        properties: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ attach,
+            materialType, color: (_c = getMaterialColor(material)) !== null && _c !== void 0 ? _c : '#ffffff' }, (texture ? { texture } : null)), (normalMapTexture ? { normalMapTexture } : null)), (normalScale ? { normalScale } : null)), { opacity: material.opacity, transparent: material.transparent, side: getSideName(material.side), wireframe: (_d = source.wireframe) !== null && _d !== void 0 ? _d : false, toneMapped: (_e = source.toneMapped) !== null && _e !== void 0 ? _e : true }), (materialType === 'standard' ? {
+            metalness: (_f = source.metalness) !== null && _f !== void 0 ? _f : 0,
+            roughness: (_g = source.roughness) !== null && _g !== void 0 ? _g : 1,
+        } : null)),
+    };
+}
+function getMeshParts(mesh) {
+    const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+    return materials.map((material, index) => {
+        return {
+            key: materials.length > 1 ? `material_${index}` : 'material',
+            material,
+            attach: materials.length > 1 ? `material-${index}` : 'material',
+        };
+    }).filter(part => part.material);
+}
+function createTransformComponent(object) {
+    return {
+        type: 'Transform',
+        properties: {
+            position: object.position.toArray(),
+            rotation: [object.rotation.x, object.rotation.y, object.rotation.z],
+            scale: object.scale.toArray(),
+        },
+    };
+}
+function createNode(object, idPrefix, children = [], components = {}) {
+    return {
+        id: createId(idPrefix),
+        name: object.name || object.type,
+        hidden: object.visible === false ? true : undefined,
+        components: Object.assign({ transform: createTransformComponent(object) }, components),
+        children,
+    };
+}
+function decomposeObject(object, options) {
+    if (!options.includeInvisible && !object.visible)
+        return null;
+    const childNodes = object.children
+        .map(child => decomposeObject(child, options))
+        .filter((child) => child != null);
+    if (!(object instanceof Mesh)) {
+        return createNode(object, options.idPrefix, childNodes);
+    }
+    const parts = getMeshParts(object);
+    const materialComponents = parts.reduce((result, part) => {
+        result[part.key] = serializeMaterial(part.material, part.attach, options);
+        return result;
+    }, {});
+    return createNode(object, options.idPrefix, childNodes, Object.assign({ geometry: {
+            type: 'BufferGeometry',
+            properties: Object.assign(Object.assign({}, serializeGeometry(object.geometry)), { visible: object.visible, castShadow: object.castShadow, receiveShadow: object.receiveShadow }),
+        } }, materialComponents));
+}
+/**
+ * Converts a live Three object hierarchy into prefab JSON nodes made from
+ * Transform, BufferGeometry, and Material components.
+ */
+export function decomposeModelToPrefabNodes(object, options = {}) {
+    var _a, _b, _c, _d, _e;
+    return (_d = decomposeObject(object, {
+        idPrefix: (_a = options.idPrefix) !== null && _a !== void 0 ? _a : 'model',
+        includeInvisible: (_b = options.includeInvisible) !== null && _b !== void 0 ? _b : false,
+        getTexturePath: (_c = options.getTexturePath) !== null && _c !== void 0 ? _c : (() => undefined),
+    })) !== null && _d !== void 0 ? _d : createNode(object, (_e = options.idPrefix) !== null && _e !== void 0 ? _e : 'model');
+}

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

@@ -5,6 +5,7 @@ import { denormalizePrefab, PrefabState, PrefabNodeRecord } from "./prefab";
 export interface PrefabStoreState extends PrefabState {
     replacePrefab: (prefab: Prefab) => void;
     updateNode: (id: string, update: (node: PrefabNodeRecord) => PrefabNodeRecord) => void;
+    replaceNode: (id: string, node: GameObject) => void;
     addChild: (parentId: string, node: GameObject) => void;
     deleteNode: (id: string) => void;
     duplicateNode: (id: string) => string | null;