react-three-game 0.0.100 → 0.0.101

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/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;

package/dist/tools/prefabeditor/prefabStore.js

@@ -5,6 +5,45 @@ import { createStore } from "zustand/vanilla";
 import { collectAssetRefsForIds, collectSubtreeAssetRefs, collectSubtreeIds, cloneSubtree, createPrefabPatch, denormalizePrefab, insertSubtree, isDescendant, normalizePrefab, updateAssetRefsForNodeChange, } from "./prefab";
 const PrefabStoreContext = createContext(null);
 const EMPTY_CHILD_IDS = [];
+function addAssetRefs(assetRefCounts, refs) {
+    refs.forEach(ref => {
+        var _a;
+        assetRefCounts[ref] = ((_a = assetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
+    });
+}
+function removeAssetRefs(assetRefCounts, refs) {
+    refs.forEach(ref => {
+        var _a;
+        const nextCount = ((_a = assetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) - 1;
+        if (nextCount > 0) {
+            assetRefCounts[ref] = nextCount;
+            return;
+        }
+        delete assetRefCounts[ref];
+    });
+}
+function cloneGraphState(state) {
+    return {
+        nodesById: Object.assign({}, state.nodesById),
+        childIdsById: Object.assign({}, state.childIdsById),
+        parentIdById: Object.assign({}, state.parentIdById),
+        assetRefCounts: Object.assign({}, state.assetRefCounts),
+    };
+}
+function removeSubtreeFromGraph(id, state, next) {
+    const ids = collectSubtreeIds(id, state.childIdsById);
+    removeAssetRefs(next.assetRefCounts, collectAssetRefsForIds(ids, state.nodesById));
+    ids.forEach(nodeId => {
+        delete next.nodesById[nodeId];
+        delete next.childIdsById[nodeId];
+        delete next.parentIdById[nodeId];
+    });
+    return ids;
+}
+function insertSubtreeIntoGraph(node, parentId, next) {
+    insertSubtree(node, parentId, next.nodesById, next.childIdsById, next.parentIdById);
+    addAssetRefs(next.assetRefCounts, collectSubtreeAssetRefs(node));
+}
 export function PrefabStoreProvider({ store, children, }) {
     return createElement(PrefabStoreContext.Provider, { value: store }, children);
 }
@@ -42,26 +81,40 @@ export function createPrefabStore(prefab) {
             set(createPrefabPatch(state, {
                 nodesById: Object.assign(Object.assign({}, state.nodesById), { [id]: nextNode }),
             }, nextAssetRefCounts));
+        }, replaceNode: (id, node) => {
+            var _a;
+            const state = get();
+            if (!state.nodesById[id])
+                return;
+            const parentId = state.parentIdById[id];
+            const next = cloneGraphState(state);
+            removeSubtreeFromGraph(id, state, next);
+            insertSubtreeIntoGraph(node, parentId, next);
+            const patch = {
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            };
+            if (id === state.rootId) {
+                patch.rootId = node.id;
+            }
+            else if (parentId) {
+                next.childIdsById[parentId] = ((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []).map(childId => childId === id ? node.id : childId);
+            }
+            set(createPrefabPatch(state, patch, next.assetRefCounts));
         }, addChild: (parentId, node) => {
             var _a;
             const state = get();
             if (!state.nodesById[parentId])
                 return;
-            const nextNodesById = Object.assign({}, state.nodesById);
-            const nextChildIdsById = Object.assign({}, state.childIdsById);
-            const nextParentIdById = Object.assign({}, state.parentIdById);
-            const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            insertSubtree(node, parentId, nextNodesById, nextChildIdsById, nextParentIdById);
-            nextChildIdsById[parentId] = [...((_a = nextChildIdsById[parentId]) !== null && _a !== void 0 ? _a : []), node.id];
-            collectSubtreeAssetRefs(node).forEach(ref => {
-                var _a;
-                nextAssetRefCounts[ref] = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
-            });
+            const next = cloneGraphState(state);
+            insertSubtreeIntoGraph(node, parentId, next);
+            next.childIdsById[parentId] = [...((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []), node.id];
             set(createPrefabPatch(state, {
-                nodesById: nextNodesById,
-                childIdsById: nextChildIdsById,
-                parentIdById: nextParentIdById,
-            }, nextAssetRefCounts));
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            }, next.assetRefCounts));
         }, deleteNode: (id) => {
             var _a;
             const state = get();
@@ -70,31 +123,14 @@ export function createPrefabStore(prefab) {
             const parentId = state.parentIdById[id];
             if (!parentId)
                 return;
-            const idsToDelete = collectSubtreeIds(id, state.childIdsById);
-            const nextNodesById = Object.assign({}, state.nodesById);
-            const nextChildIdsById = Object.assign({}, state.childIdsById);
-            const nextParentIdById = Object.assign({}, state.parentIdById);
-            const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            collectAssetRefsForIds(idsToDelete, state.nodesById).forEach(ref => {
-                var _a;
-                const nextCount = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) - 1;
-                if (nextCount > 0) {
-                    nextAssetRefCounts[ref] = nextCount;
-                    return;
-                }
-                delete nextAssetRefCounts[ref];
-            });
-            idsToDelete.forEach(nodeId => {
-                delete nextNodesById[nodeId];
-                delete nextChildIdsById[nodeId];
-                delete nextParentIdById[nodeId];
-            });
-            nextChildIdsById[parentId] = ((_a = nextChildIdsById[parentId]) !== null && _a !== void 0 ? _a : []).filter(childId => childId !== id);
+            const next = cloneGraphState(state);
+            removeSubtreeFromGraph(id, state, next);
+            next.childIdsById[parentId] = ((_a = next.childIdsById[parentId]) !== null && _a !== void 0 ? _a : []).filter(childId => childId !== id);
             set(createPrefabPatch(state, {
-                nodesById: nextNodesById,
-                childIdsById: nextChildIdsById,
-                parentIdById: nextParentIdById,
-            }, nextAssetRefCounts));
+                nodesById: next.nodesById,
+                childIdsById: next.childIdsById,
+                parentIdById: next.parentIdById,
+            }, next.assetRefCounts));
         }, duplicateNode: (id) => {
             var _a;
             const state = get();
@@ -119,10 +155,7 @@ export function createPrefabStore(prefab) {
             }
             nextChildIdsById[parentId] = siblings;
             const nextAssetRefCounts = Object.assign({}, state.assetRefCounts);
-            collectAssetRefsForIds(collectSubtreeIds(id, state.childIdsById), state.nodesById).forEach(ref => {
-                var _a;
-                nextAssetRefCounts[ref] = ((_a = nextAssetRefCounts[ref]) !== null && _a !== void 0 ? _a : 0) + 1;
-            });
+            addAssetRefs(nextAssetRefCounts, collectAssetRefsForIds(collectSubtreeIds(id, state.childIdsById), state.nodesById));
             set(createPrefabPatch(state, {
                 nodesById: nextNodesById,
                 childIdsById: nextChildIdsById,

package/package.json

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