react-three-game 0.0.94 → 0.0.96

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { ThreeEvent } from '@react-three/fiber';
-import { Object3D, Group } from "three";
+import type { ReactNode } from "react";
+import type { ThreeEvent } from '@react-three/fiber';
+import type { Object3D } from "three";
 export type RepeatAxisConfig = {
     axis: 'x' | 'y' | 'z';
     count: number;
@@ -8,7 +8,7 @@ export type RepeatAxisConfig = {
 };
 export declare const DEFAULT_REPEAT_AXES: RepeatAxisConfig[];
 export declare function normalizeRepeatAxes(value: unknown): RepeatAxisConfig[];
-export declare function getRepeatAxesFromModelProperties(properties: Record<string, any>): RepeatAxisConfig[];
+export declare function getRepeatAxesFromModelProperties(properties: Record<string, unknown>): RepeatAxisConfig[];
 export type InstanceData = {
     id: string;
     sourceId: string;
@@ -20,7 +20,7 @@ export type InstanceData = {
     meshPath: string;
 };
 export declare function GameInstanceProvider({ children, models, onSelect, onClick, registerRef, selectedId, editMode }: {
-    children: React.ReactNode;
+    children: ReactNode;
     models: {
         [filename: string]: Object3D;
     };
@@ -31,7 +31,7 @@ export declare function GameInstanceProvider({ children, models, onSelect, onCli
     editMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useInstanceCheck(id: string): boolean;
-export declare const GameInstance: React.ForwardRefExoticComponent<{
+export declare function GameInstance({ id, sourceId, modelUrl, locked, position, rotation, scale, visible, onClick: _onClick, }: {
     id: string;
     sourceId?: string;
     modelUrl: string;
@@ -41,4 +41,4 @@ export declare const GameInstance: React.ForwardRefExoticComponent<{
     scale: [number, number, number];
     visible?: boolean;
     onClick?: (event: ThreeEvent<PointerEvent>, nodeId: string, object: Object3D | null) => void;
-} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+}): null;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useRef, useState, useEffect } from "react";
+import { createContext, useContext, useMemo, useRef, useState, useEffect } from "react";
 import { Merged, useHelper } from '@react-three/drei';
 import { Mesh, Matrix4, BoxHelper } from "three";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 import { usePointerEvents } from "./usePointerEvents";
 export const DEFAULT_REPEAT_AXES = [{ axis: 'x', count: 1, offset: 1 }];
+const EMPTY_INSTANCE_STORE = createInstanceRegistryStore();
 export function normalizeRepeatAxes(value) {
     if (!Array.isArray(value)) {
         return DEFAULT_REPEAT_AXES;
@@ -14,14 +15,15 @@ export function normalizeRepeatAxes(value) {
     const normalized = value.reduce((result, entry) => {
         if (!entry || typeof entry !== 'object')
             return result;
-        const axisValue = entry.axis;
+        const record = entry;
+        const axisValue = record.axis;
         if (axisValue !== 'x' && axisValue !== 'y' && axisValue !== 'z')
             return result;
         if (seen.has(axisValue))
             return result;
         seen.add(axisValue);
-        const countValue = Number(entry.count);
-        const offsetValue = Number(entry.offset);
+        const countValue = Number(record.count);
+        const offsetValue = Number(record.offset);
         result.push({
             axis: axisValue,
             count: Number.isFinite(countValue) ? Math.max(1, Math.floor(countValue)) : 1,
@@ -141,7 +143,7 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
             const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
             let partIndex = 0;
             model.traverse((obj) => {
-                if (obj.isMesh) {
+                if (obj instanceof Mesh) {
                     // Clone geometry and bake relative transform
                     const geom = obj.geometry.clone();
                     geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
@@ -157,7 +159,9 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
     // Cleanup geometries when models change
     useEffect(() => {
         return () => {
-            Object.values(flatMeshes).forEach(mesh => mesh.geometry.dispose());
+            Object.values(flatMeshes).forEach(mesh => {
+                mesh.geometry.dispose();
+            });
         };
     }, [flatMeshes]);
     const instances = useMemo(() => Object.values(instancesById), [instancesById]);
@@ -194,12 +198,16 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
             })] }));
 }
 function InstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, onClick, registerRef, selectedId, editMode }) {
-    const InstanceComponents = useMemo(() => Array.from({ length: partCount }, (_, i) => instancesMap[`${modelKey}__${i}`]).filter(Boolean), [instancesMap, modelKey, partCount]);
+    const instanceEntries = useMemo(() => Array.from({ length: partCount }, (_, i) => {
+        const partKey = `${modelKey}__${i}`;
+        const Component = instancesMap[partKey];
+        return Component ? { partKey, Component } : null;
+    }).filter((entry) => Boolean(entry)), [instancesMap, modelKey, partCount]);
     const visibleInstances = useMemo(() => group.instances.filter(instance => instance.visible !== false), [group.instances]);
-    return (_jsx(_Fragment, { children: visibleInstances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, InstanceComponents: InstanceComponents, onSelect: onSelect, onClick: onClick, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
+    return (_jsx(_Fragment, { children: visibleInstances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, instanceEntries: instanceEntries, onSelect: onSelect, onClick: onClick, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
 }
 // Individual instance item with its own click state
-function InstanceGroupItem({ instance, InstanceComponents, onSelect, onClick, registerRef, selectedId, editMode }) {
+function InstanceGroupItem({ instance, instanceEntries, onSelect, onClick, registerRef, selectedId, editMode }) {
     const groupRef = useRef(null);
     const isLocked = Boolean(instance.locked);
     const isSelected = selectedId === instance.id || selectedId === instance.sourceId;
@@ -217,24 +225,26 @@ function InstanceGroupItem({ instance, InstanceComponents, onSelect, onClick, re
         },
     });
     // Use BoxHelper when object is selected in edit mode
-    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+    const helperTarget = editMode && isSelected && groupRef.current
+        ? { current: groupRef.current }
+        : null;
+    useHelper(helperTarget, BoxHelper, 'cyan');
     useEffect(() => {
         if (editMode)
             return;
         registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, groupRef.current);
         return () => registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, null);
     }, [editMode, instance.id, registerRef]);
-    return (_jsx("group", Object.assign({ ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale }, pointerHandlers, { children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) })));
+    return (_jsx("group", Object.assign({ ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale }, pointerHandlers, { children: instanceEntries.map(({ partKey, Component }) => _jsx(Component, {}, partKey)) })));
 }
 export function useInstanceCheck(id) {
+    var _a;
     const ctx = useContext(GameInstanceContext);
-    return ctx ? useStore(ctx.store, state => Boolean(state.instancesById[id] || state.sourceInstanceIdsById[id])) : false;
+    const store = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.store) !== null && _a !== void 0 ? _a : EMPTY_INSTANCE_STORE;
+    return useStore(store, state => Boolean(state.instancesById[id] || state.sourceInstanceIdsById[id]));
 }
-export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked = false, position, rotation, scale, visible = true, onClick: _onClick, }, ref) => {
+export function GameInstance({ id, sourceId, modelUrl, locked = false, position, rotation, scale, visible = true, onClick: _onClick, }) {
     const ctx = useContext(GameInstanceContext);
-    const [positionX, positionY, positionZ] = position;
-    const [rotationX, rotationY, rotationZ] = rotation;
-    const [scaleX, scaleY, scaleZ] = scale;
     const instance = useMemo(() => ({
         id,
         sourceId: sourceId !== null && sourceId !== void 0 ? sourceId : id,
@@ -244,22 +254,7 @@ export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked =
         position,
         rotation,
         scale,
-    }), [
-        id,
-        sourceId,
-        locked,
-        visible,
-        modelUrl,
-        positionX,
-        positionY,
-        positionZ,
-        rotationX,
-        rotationY,
-        rotationZ,
-        scaleX,
-        scaleY,
-        scaleZ,
-    ]);
+    }), [id, sourceId, locked, visible, modelUrl, position, rotation, scale]);
     useEffect(() => {
         if (!ctx)
             return;
@@ -269,6 +264,6 @@ export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked =
         return () => {
             removeInstance(instance.id);
         };
-    }, [ctx === null || ctx === void 0 ? void 0 : ctx.store, instance]);
+    }, [ctx, instance]);
     return null;
-});
+}

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

@@ -1,5 +1,5 @@
 import GameCanvas from "../../shared/GameCanvas";
-import { Prefab } from "./types";
+import type { Prefab } from "./types";
 import { PrefabEditorMode, type Scene } from "./PrefabRoot";
 import type { ExportGLBOptions } from "./utils";
 export interface PrefabEditorRef extends Scene {

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -79,6 +79,10 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     const transformControlsRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const isEditMode = mode === PrefabEditorMode.Edit;
+    const detachTransformControls = useCallback(() => {
+        var _a;
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+    }, []);
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getNode = useCallback((nodeId) => { var _a; return (_a = prefabStore.getState().nodesById[nodeId]) !== null && _a !== void 0 ? _a : null; }, [prefabStore]);
     const getRoot = useCallback(() => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null; }, []);
@@ -158,13 +162,13 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         updateMode(initialMode);
     }, [initialMode, updateMode]);
     const loadPrefab = useCallback((prefab, options) => {
-        var _a, _b;
-        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+        var _a;
+        detachTransformControls();
         const before = prefabStore.getState();
         prefabStore.getState().replacePrefab(prefab);
         const after = prefabStore.getState();
         if (after !== before && (options === null || options === void 0 ? void 0 : options.notifyChange) !== false) {
-            (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, prefab);
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, prefab);
         }
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
@@ -175,7 +179,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         else {
             setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
         }
-    }, [prefabStore]);
+    }, [detachTransformControls, prefabStore]);
     useEffect(() => {
         if (initialPrefab)
             loadPrefab(initialPrefab, { resetHistory: true, notifyChange: false });
@@ -205,17 +209,25 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     const importPrefab = useCallback((prefab) => {
         add(regenerateIds(prefab.root));
     }, [add]);
-    const applyHistory = (index) => {
-        var _a, _b;
-        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+    const applyHistory = useCallback((index) => {
+        var _a;
+        detachTransformControls();
         prefabStore.getState().replacePrefab(history[index]);
-        (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, history[index]);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
         setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
-    };
-    const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
-    const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
+    }, [detachTransformControls, history, prefabStore]);
+    const undo = useCallback(() => {
+        if (historyIndex > 0) {
+            applyHistory(historyIndex - 1);
+        }
+    }, [applyHistory, historyIndex]);
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            applyHistory(historyIndex + 1);
+        }
+    }, [applyHistory, history.length, historyIndex]);
     useEffect(() => {
         if (!isEditMode)
             return;
@@ -233,7 +245,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isEditMode, historyIndex, history]);
+    }, [isEditMode, redo, undo]);
     const handleScreenshot = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -383,7 +395,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
                                 }
                                 (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
                             }
-                            : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) }) });
+                            : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: transformMode === "translate" ? "world" : "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { type: "button", style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) }) });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -1,8 +1,9 @@
-import { Matrix4, Object3D, Texture } from "three";
-import { ThreeEvent } from "@react-three/fiber";
-import { GameObject as GameObjectType, Prefab } from "./types";
-import { LoadedModels } from "../dragdrop";
-import { PrefabStoreApi } from "./prefabStore";
+import { Matrix4 } from "three";
+import type { Object3D, Texture } from "three";
+import type { ThreeEvent } from "@react-three/fiber";
+import type { GameObject as GameObjectType, Prefab } from "./types";
+import type { LoadedModels } from "../dragdrop";
+import type { PrefabStoreApi } from "./prefabStore";
 export declare enum PrefabEditorMode {
     Edit = "edit",
     Play = "play"

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Euler, Matrix4, } from "three";
+import { Euler, Matrix4 } from "three";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent, getNodeUserData } from "./types";
 import { getComponentDef, getComponentAssetRefs, registerComponent } from "./components/ComponentRegistry";
 import { builtinComponents } from "./components";
 import { loadModel, loadSound, loadTexture } from "../dragdrop";
-import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties } from "./InstanceProvider";
 import { composeTransform, decompose } from "./utils";
 import { createPrefabStore, PrefabStoreProvider, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
 import { AssetRuntimeContext, NodeScope } from "./assetRuntime";
@@ -29,6 +29,14 @@ const IDENTITY = new Matrix4();
 const EMPTY_MODELS = {};
 const EMPTY_TEXTURES = {};
 const EMPTY_SOUNDS = {};
+const EMPTY_NODE_COMPONENTS = {
+    geometry: undefined,
+    material: undefined,
+    model: undefined,
+    sprite: undefined,
+    clickEventName: null,
+    composition: [],
+};
 /** Resolve a relative or absolute asset file path against a base path. */
 function resolveAssetPath(basePath, file) {
     if (file.startsWith("http://") || file.startsWith("https://"))
@@ -84,6 +92,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         throw new Error("PrefabRoot requires either a `data` or `store` prop");
     });
     const resolvedStore = store !== null && store !== void 0 ? store : ownedStore;
+    if (!resolvedStore) {
+        throw new Error("PrefabRoot requires either a `data` or `store` prop");
+    }
     const usesOwnedStore = resolvedStore === ownedStore;
     const rootId = useStore(resolvedStore, state => state.rootId);
     const assetManifestKey = useStore(resolvedStore, state => state.assetManifestKey);
@@ -155,6 +166,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         }
     }, [data, resolvedStore, usesOwnedStore]);
     useEffect(() => {
+        void assetManifestKey;
         const syncAssets = (snapshot = resolvedStore.getState()) => {
             const modelsToLoad = new Set();
             const texturesToLoad = new Set();
@@ -187,23 +199,34 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
                     }
                 });
             };
-            modelsToLoad.forEach(file => loadAsset(file, models, injectedModels, failedModels.current, path => loadModel(path).then(result => {
-                if (result.success && result.model)
-                    setModels(m => (Object.assign(Object.assign({}, m), { [file]: result.model })));
-                return result;
-            })));
-            texturesToLoad.forEach(file => loadAsset(file, textures, injectedTextures, failedTextures.current, path => loadTexture(path).then(result => {
-                if (result.success && result.texture)
-                    setTextures(t => (Object.assign(Object.assign({}, t), { [file]: result.texture })));
-                return result;
-            })));
-            soundsToLoad.forEach(file => loadAsset(file, sounds, injectedSounds, failedSounds.current, path => loadSound(path).then(result => {
-                if (result.success && result.sound) {
-                    soundManager.setBuffer(file, result.sound);
-                    setSounds(s => (Object.assign(Object.assign({}, s), { [file]: result.sound })));
-                }
-                return result;
-            })));
+            modelsToLoad.forEach(file => {
+                loadAsset(file, models, injectedModels, failedModels.current, path => loadModel(path).then(result => {
+                    const loadedModel = result.model;
+                    if (result.success && loadedModel) {
+                        setModels(currentModels => (Object.assign(Object.assign({}, currentModels), { [file]: loadedModel })));
+                    }
+                    return result;
+                }));
+            });
+            texturesToLoad.forEach(file => {
+                loadAsset(file, textures, injectedTextures, failedTextures.current, path => loadTexture(path).then(result => {
+                    const loadedTexture = result.texture;
+                    if (result.success && loadedTexture) {
+                        setTextures(currentTextures => (Object.assign(Object.assign({}, currentTextures), { [file]: loadedTexture })));
+                    }
+                    return result;
+                }));
+            });
+            soundsToLoad.forEach(file => {
+                loadAsset(file, sounds, injectedSounds, failedSounds.current, path => loadSound(path).then(result => {
+                    const loadedSound = result.sound;
+                    if (result.success && loadedSound) {
+                        soundManager.setBuffer(file, loadedSound);
+                        setSounds(currentSounds => (Object.assign(Object.assign({}, currentSounds), { [file]: loadedSound })));
+                    }
+                    return result;
+                }));
+            });
         };
         syncAssets();
     }, [resolvedStore, assetManifestKey, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
@@ -240,11 +263,12 @@ function getClickEventName(component) {
     return typeof eventName === 'string' && eventName.trim() ? eventName.trim() : null;
 }
 function analyzeNodeComponents(node) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let bufferGeometry;
     let geometry;
     let material;
     let model;
+    let sprite;
     const composition = [];
     for (const [key, component] of Object.entries((_a = node.components) !== null && _a !== void 0 ? _a : {})) {
         if (!(component === null || component === void 0 ? void 0 : component.type))
@@ -264,6 +288,9 @@ function analyzeNodeComponents(node) {
             case "Model":
                 model = component;
                 break;
+            case "Sprite":
+                sprite = component;
+                break;
             default: {
                 const def = getComponentDef(component.type);
                 if (!(def === null || def === void 0 ? void 0 : def.View))
@@ -281,7 +308,8 @@ function analyzeNodeComponents(node) {
         geometry: bufferGeometry !== null && bufferGeometry !== void 0 ? bufferGeometry : geometry,
         material,
         model,
-        clickEventName: (_c = (_b = getClickEventName(bufferGeometry)) !== null && _b !== void 0 ? _b : getClickEventName(geometry)) !== null && _c !== void 0 ? _c : getClickEventName(model),
+        sprite,
+        clickEventName: (_d = (_c = (_b = getClickEventName(bufferGeometry)) !== null && _b !== void 0 ? _b : getClickEventName(geometry)) !== null && _c !== void 0 ? _c : getClickEventName(model)) !== null && _d !== void 0 ? _d : getClickEventName(sprite),
         composition,
     };
 }
@@ -330,13 +358,11 @@ export function GameObjectRenderer(props) {
 function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef, onSelect, onEditNodeClick, onClick, isVisible = true }) {
     var _a, _b;
     const gameObject = usePrefabNode(nodeId);
-    if (!gameObject)
-        return null;
-    const analyzedComponents = useMemo(() => analyzeNodeComponents(gameObject), [gameObject]);
+    const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const localTransform = getNodeTransformProps(gameObject);
-    const isLocked = Boolean(gameObject.locked);
-    const nodeVisible = isVisible && !gameObject.hidden;
-    const metadataProps = getNodeMetadataProps(gameObject);
+    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
+    const nodeVisible = isVisible && !(gameObject === null || gameObject === void 0 ? void 0 : gameObject.hidden);
+    const metadataProps = gameObject ? getNodeMetadataProps(gameObject) : { name: '', userData: {} };
     const groupProps = Object.assign(Object.assign({}, metadataProps), { visible: nodeVisible, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
     const modelUrl = (_b = (_a = analyzedComponents.model) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl), [gameObject, modelUrl, parentMatrix]);
@@ -348,9 +374,13 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
         }
     }, [editMode, nodeId, registerRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
+        if (!gameObject)
+            return;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onEditNodeClick === null || onEditNodeClick === void 0 ? void 0 : onEditNodeClick(event, gameObject);
     });
+    if (!gameObject)
+        return null;
     const renderedInstances = instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, visible: nodeVisible, locked: isLocked, onClick: onClick }, instance.id)));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), renderedInstances] }));
@@ -360,20 +390,19 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
 function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, isVisible = true, }) {
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
-    if (!gameObject)
-        return null;
-    const analyzedComponents = useMemo(() => analyzeNodeComponents(gameObject), [gameObject]);
+    const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const isSelected = selectedId === nodeId;
-    const isLocked = Boolean(gameObject.locked);
-    const nodeVisible = isVisible && !gameObject.hidden;
-    const stillInstanced = useInstanceCheck(nodeId);
-    const metadataProps = getNodeMetadataProps(gameObject);
+    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
+    const nodeVisible = isVisible && !(gameObject === null || gameObject === void 0 ? void 0 : gameObject.hidden);
+    const metadataProps = gameObject ? getNodeMetadataProps(gameObject) : { name: '', userData: {} };
     const groupRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
         groupRef.current = object;
         registerRef(nodeId, object);
     }, [nodeId, registerRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
+        if (!gameObject)
+            return;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onEditNodeClick === null || onEditNodeClick === void 0 ? void 0 : onEditNodeClick(event, gameObject);
     });
@@ -386,7 +415,6 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
         }
         : undefined;
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const ready = isNodeReady(analyzedComponents.model, loadedModels);
     const transform = getNodeTransformProps(gameObject);
     const transformProps = {
         position: transform.position,
@@ -395,6 +423,8 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
     };
     const groupProps = Object.assign(Object.assign({}, metadataProps), transformProps);
     const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, onEditNodeClick: onEditNodeClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode, isVisible: nodeVisible });
+    if (!gameObject)
+        return null;
     const inner = renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes);
     const editAnchor = editMode ? (_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) })) : null;
     const standardNode = (_jsxs("group", Object.assign({ ref: handleGroupRef }, groupProps, { visible: nodeVisible }, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));
@@ -417,7 +447,7 @@ function getModelRepeatSettings(node) {
     };
 }
 function buildRepeatedInstances(gameObject, parentMatrix, modelUrl) {
-    if (!modelUrl)
+    if (!gameObject || !modelUrl)
         return [];
     const transform = getNodeTransformProps(gameObject);
     const repeat = getModelRepeatSettings(gameObject);
@@ -471,24 +501,58 @@ function getNodeTransformProps(node) {
 function renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes) {
     var _a, _b, _c, _d;
     const geometry = analyzedComponents.geometry;
-    const geometryDef = analyzedComponents.geometry && getComponentDef(analyzedComponents.geometry.type);
-    const materialDef = analyzedComponents.material && getComponentDef(analyzedComponents.material.type);
-    const modelDef = analyzedComponents.model && getComponentDef(analyzedComponents.model.type);
-    const geometryProperties = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _a !== void 0 ? _a : {};
-    const meshVisible = geometryProperties.visible !== false;
-    const meshCastShadow = meshVisible && geometryProperties.castShadow !== false;
-    const meshReceiveShadow = meshVisible && geometryProperties.receiveShadow !== false;
-    let primaryContent = null;
-    if (((_b = analyzedComponents.geometry) === null || _b === void 0 ? void 0 : _b.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
-        primaryContent = (_jsxs("mesh", Object.assign({ visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow }, primaryClickHandlers, { children: [_jsx(geometryDef.View, { properties: analyzedComponents.geometry.properties }), analyzedComponents.material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: analyzedComponents.material.properties }, "material"))] })));
+    const model = analyzedComponents.model;
+    const material = analyzedComponents.material;
+    const sprite = analyzedComponents.sprite;
+    const shapeKind = (sprite === null || sprite === void 0 ? void 0 : sprite.type) ? 'sprite' : (geometry === null || geometry === void 0 ? void 0 : geometry.type) ? 'mesh' : (model === null || model === void 0 ? void 0 : model.type) ? 'model' : 'none';
+    let materialContent = null;
+    switch (shapeKind) {
+        case 'sprite': {
+            const materialDef = (material === null || material === void 0 ? void 0 : material.type) ? getComponentDef(material.type) : undefined;
+            if ((material === null || material === void 0 ? void 0 : material.properties) && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View)) {
+                const materialIsSprite = material.properties.materialType === 'sprite';
+                materialContent = (_jsx(materialDef.View, { properties: Object.assign(Object.assign({}, material.properties), { materialType: 'sprite', transparent: materialIsSprite ? material.properties.transparent : true, depthTest: materialIsSprite ? material.properties.depthTest : false, depthWrite: materialIsSprite ? material.properties.depthWrite : false }) }, "material"));
+            }
+            break;
+        }
+        case 'mesh': {
+            const materialDef = (material === null || material === void 0 ? void 0 : material.type) ? getComponentDef(material.type) : undefined;
+            if ((material === null || material === void 0 ? void 0 : material.properties) && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View)) {
+                materialContent = _jsx(materialDef.View, { properties: material.properties }, "material");
+            }
+            break;
+        }
     }
-    else if (((_c = analyzedComponents.model) === null || _c === void 0 ? void 0 : _c.type)
-        && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View)
-        && !((_d = analyzedComponents.model.properties) === null || _d === void 0 ? void 0 : _d.instanced)
-        && isNodeReady(analyzedComponents.model, loadedModels)) {
-        primaryContent = primaryClickHandlers ? (_jsx("group", Object.assign({}, primaryClickHandlers, { children: _jsx(modelDef.View, { properties: analyzedComponents.model.properties }) }))) : (_jsx(modelDef.View, { properties: analyzedComponents.model.properties }));
+    let primaryContent = null;
+    let contentChildren = childNodes;
+    switch (shapeKind) {
+        case 'sprite': {
+            primaryContent = (_jsxs("sprite", Object.assign({ center: (_b = (_a = sprite === null || sprite === void 0 ? void 0 : sprite.properties) === null || _a === void 0 ? void 0 : _a.center) !== null && _b !== void 0 ? _b : [0.5, 0.5] }, primaryClickHandlers, { children: [materialContent, childNodes] })));
+            contentChildren = null;
+            break;
+        }
+        case 'mesh': {
+            const geometryDef = (geometry === null || geometry === void 0 ? void 0 : geometry.type) ? getComponentDef(geometry.type) : undefined;
+            if (!(geometry === null || geometry === void 0 ? void 0 : geometry.properties) || !(geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View))
+                break;
+            const GeometryView = geometryDef.View;
+            const geometryProperties = (_c = geometry.properties) !== null && _c !== void 0 ? _c : {};
+            const visible = geometryProperties.visible !== false;
+            primaryContent = (_jsxs("mesh", Object.assign({ visible: visible, castShadow: visible && geometryProperties.castShadow !== false, receiveShadow: visible && geometryProperties.receiveShadow !== false }, primaryClickHandlers, { children: [_jsx(GeometryView, { properties: geometry.properties }), materialContent] })));
+            break;
+        }
+        case 'model': {
+            if (!(model === null || model === void 0 ? void 0 : model.type) || ((_d = model.properties) === null || _d === void 0 ? void 0 : _d.instanced) || !isNodeReady(model, loadedModels))
+                break;
+            const modelDef = getComponentDef(model.type);
+            if (!(modelDef === null || modelDef === void 0 ? void 0 : modelDef.View))
+                break;
+            const modelContent = _jsx(modelDef.View, { properties: model.properties });
+            primaryContent = primaryClickHandlers ? _jsx("group", Object.assign({}, primaryClickHandlers, { children: modelContent })) : modelContent;
+            break;
+        }
     }
-    let content = _jsxs(_Fragment, { children: [primaryContent, childNodes] });
+    let content = _jsxs(_Fragment, { children: [primaryContent, contentChildren] });
     for (const { key, View, properties } of analyzedComponents.composition) {
         content = (_jsx(View, { properties: properties, children: content }, key));
     }

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

@@ -1,19 +1,22 @@
 import { type ReactNode } from 'react';
 import type { ThreeElement } from '@react-three/fiber';
-import { Component } from './ComponentRegistry';
-import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
-import { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
+import type { Component } from './ComponentRegistry';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
+import type { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
 declare module '@react-three/fiber' {
     interface ThreeElements {
         meshBasicNodeMaterial: ThreeElement<typeof MeshBasicNodeMaterial>;
         meshStandardNodeMaterial: ThreeElement<typeof MeshStandardNodeMaterial>;
+        spriteNodeMaterial: ThreeElement<typeof SpriteNodeMaterial>;
     }
 }
-export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
-    materialType?: 'standard' | 'basic';
+export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale' | 'side'> {
+    materialType?: 'standard' | 'basic' | 'sprite';
     transmission?: number;
     thickness?: number;
     ior?: number;
+    rotation?: number;
+    sizeAttenuation?: boolean;
     texture?: string;
     offset?: [number, number];
     repeat?: boolean;
@@ -25,8 +28,14 @@ export interface MaterialProps extends Omit<MeshStandardMaterialProperties & Mes
     magFilter?: string;
     normalMapTexture?: string;
     normalScale?: [number, number];
+    side?: keyof typeof SIDE_MAP;
 }
 export type MaterialOverrides = Record<string, unknown>;
+declare const SIDE_MAP: {
+    readonly FrontSide: 0;
+    readonly BackSide: 1;
+    readonly DoubleSide: 2;
+};
 export declare function useMaterialOverrides(): MaterialOverrides;
 export declare function MaterialOverridesProvider({ overrides, children, }: {
     overrides: MaterialOverrides;

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

@@ -15,7 +15,7 @@ import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
 import { FieldRenderer, Label, NumberInput } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
-import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
+import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
 import { TexturePicker } from '../../assetviewer/page';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
 function Vector2Editor({ label, value, onChange, min, max, step, }) {
@@ -24,6 +24,39 @@ function Vector2Editor({ label, value, onChange, min, max, step, }) {
 }
 const EMPTY_MATERIAL_OVERRIDES = Object.freeze({});
 const MaterialOverridesContext = createContext(EMPTY_MATERIAL_OVERRIDES);
+const SIDE_MAP = { FrontSide, BackSide, DoubleSide };
+const MIN_FILTER_MAP = {
+    NearestFilter,
+    LinearFilter,
+    NearestMipmapNearestFilter,
+    NearestMipmapLinearFilter,
+    LinearMipmapNearestFilter,
+    LinearMipmapLinearFilter,
+};
+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);
 }
@@ -35,14 +68,16 @@ export function MaterialOverridesProvider({ overrides, children, }) {
 extend({
     MeshBasicNodeMaterial,
     MeshStandardNodeMaterial,
+    SpriteNodeMaterial,
 });
-function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
+function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
     var _a;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
     const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
+    const isSpriteMaterial = materialType === 'sprite';
     const fields = [
         {
             name: 'materialType',
@@ -51,13 +86,22 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
             options: [
                 { value: 'standard', label: 'Standard' },
                 { value: 'basic', label: 'Basic' },
+                { value: 'sprite', label: 'Sprite' },
             ],
         },
         { name: 'color', type: 'color', label: 'Color' },
         { name: 'toneMapped', type: 'boolean', label: 'Tone Mapped' },
-        { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        ...(!isSpriteMaterial ? [
+            { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        ] : []),
         { name: 'transparent', type: 'boolean', label: 'Transparent' },
         { name: 'opacity', type: 'number', label: 'Opacity', min: 0, max: 1, step: 0.01 },
+        ...(isSpriteMaterial ? [
+            { name: 'rotation', type: 'number', label: 'Rotation', step: 0.01 },
+            { name: 'sizeAttenuation', type: 'boolean', label: 'Size Attenuation' },
+            { name: 'depthTest', type: 'boolean', label: 'Depth Test' },
+            { name: 'depthWrite', type: 'boolean', label: 'Depth Write' },
+        ] : []),
         ...(isStandardMaterial ? [
             { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
             { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
@@ -65,16 +109,16 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
             { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
             { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
         ] : []),
-        {
-            name: 'side',
-            type: 'select',
-            label: 'Side',
-            options: [
-                { value: 'FrontSide', label: 'Front' },
-                { value: 'BackSide', label: 'Back' },
-                { value: 'DoubleSide', label: 'Double' },
-            ],
-        },
+        ...(!isSpriteMaterial ? [{
+                name: 'side',
+                type: 'select',
+                label: 'Side',
+                options: [
+                    { value: 'FrontSide', label: 'Front' },
+                    { value: 'BackSide', label: 'Back' },
+                    { value: 'DoubleSide', label: 'Double' },
+                ],
+            }] : []),
         {
             name: 'texture',
             type: 'custom',
@@ -103,13 +147,13 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Speed (X, Y)',
                     render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Speed", value: value, onChange: onChange, step: 0.01 })),
                 }] : []),
-            {
-                name: 'normalMapTexture',
-                type: 'custom',
-                label: 'Normal Map',
-                render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
-            },
-            ...(component.properties.normalMapTexture ? [{
+            ...(!isSpriteMaterial ? [{
+                    name: 'normalMapTexture',
+                    type: 'custom',
+                    label: 'Normal Map',
+                    render: ({ value, onChange }) => (_jsx(TexturePicker, { value: value, onChange: onChange, basePath: basePath })),
+                }] : []),
+            ...(!isSpriteMaterial && component.properties.normalMapTexture ? [{
                     name: 'normalScale',
                     type: 'custom',
                     label: 'Normal Scale (X, Y)',
@@ -144,90 +188,83 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
-    const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
-    const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
-    const offset = properties === null || properties === void 0 ? void 0 : properties.offset;
-    const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
-    const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
-    const animateOffset = properties === null || properties === void 0 ? void 0 : properties.animateOffset;
-    const offsetSpeed = properties === null || properties === void 0 ? void 0 : properties.offsetSpeed;
-    const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
-    const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
-    const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
-    const texture = textureName ? (_b = getTexture(textureName)) !== null && _b !== void 0 ? _b : undefined : undefined;
-    const normalMapTextureName = properties === null || properties === void 0 ? void 0 : properties.normalMapTexture;
-    const normalScaleProp = properties === null || properties === void 0 ? void 0 : properties.normalScale;
-    const normalMapTexture = normalMapTextureName ? (_c = getTexture(normalMapTextureName)) !== null && _c !== void 0 ? _c : undefined : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
+    const materialType = (_a = materialSource.materialType) !== null && _a !== void 0 ? _a : 'standard';
+    const textureName = materialSource.texture;
+    const normalMapTextureName = materialSource.normalMapTexture;
+    const offset = materialSource.offset;
+    const repeat = materialSource.repeat;
+    const repeatCount = materialSource.repeatCount;
+    const animateOffset = materialSource.animateOffset;
+    const offsetSpeed = materialSource.offsetSpeed;
+    const generateMipmaps = materialSource.generateMipmaps !== false;
+    const minFilter = (_b = materialSource.minFilter) !== null && _b !== void 0 ? _b : 'LinearMipmapLinearFilter';
+    const magFilter = (_c = materialSource.magFilter) !== null && _c !== void 0 ? _c : 'LinearFilter';
+    const texture = textureName ? getTexture(textureName) : undefined;
+    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, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
-    const sideMap = { FrontSide, BackSide, DoubleSide };
-    const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
-    const minFilterMap = {
-        NearestFilter,
-        LinearFilter,
-        NearestMipmapNearestFilter,
-        NearestMipmapLinearFilter,
-        LinearMipmapNearestFilter,
-        LinearMipmapLinearFilter
-    };
-    const magFilterMap = {
-        NearestFilter,
-        LinearFilter
-    };
-    const animatedOffsetRef = useRef([(_e = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _e !== void 0 ? _e : 0, (_f = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _f !== void 0 ? _f : 0]);
+    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 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(() => {
-        var _a, _b, _c, _d;
         if (!texture)
             return undefined;
-        const t = texture.clone();
-        if (repeat) {
-            t.wrapS = t.wrapT = RepeatWrapping;
-            if (repeatCount)
-                t.repeat.set(repeatCount[0], repeatCount[1]);
-        }
-        else {
-            t.wrapS = t.wrapT = ClampToEdgeWrapping;
-            t.repeat.set(1, 1);
-        }
-        t.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);
-        t.colorSpace = SRGBColorSpace;
-        t.generateMipmaps = generateMipmaps;
-        t.minFilter = (_c = minFilterMap[minFilter]) !== null && _c !== void 0 ? _c : LinearMipmapLinearFilter;
-        t.magFilter = (_d = magFilterMap[magFilter]) !== null && _d !== void 0 ? _d : LinearFilter;
-        t.needsUpdate = true;
-        return t;
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, minFilter, magFilter]);
-    animatedOffsetRef.current = [(_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];
+        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: LinearSRGBColorSpace,
+            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]);
+    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;
-        if (!finalTexture || !animateOffset)
+        if ((!finalTexture && !finalNormalMap) || !animateOffset)
             return;
         const nextX = animatedOffsetRef.current[0] + ((_a = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[0]) !== null && _a !== void 0 ? _a : 0) * delta;
         const nextY = animatedOffsetRef.current[1] + ((_b = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[1]) !== null && _b !== void 0 ? _b : 0) * delta;
         animatedOffsetRef.current = [nextX, nextY];
-        finalTexture.offset.set(nextX, nextY);
+        finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.offset.set(nextX, nextY);
+        finalNormalMap === null || finalNormalMap === void 0 ? void 0 : finalNormalMap.offset.set(nextX, nextY);
     });
-    const finalNormalMap = useMemo(() => {
-        if (!normalMapTexture)
-            return undefined;
-        const t = normalMapTexture.clone();
-        t.colorSpace = LinearSRGBColorSpace;
-        t.needsUpdate = true;
-        return t;
-    }, [normalMapTexture]);
+    const overrides = useMaterialOverrides();
     if (!properties) {
-        return _jsx("meshStandardNodeMaterial", { color: "red", wireframe: true });
+        return _jsx("meshStandardNodeMaterial", { attach: "material", color: "red", wireframe: true });
     }
-    const overrides = useMaterialOverrides();
+    const materialKey = `${materialType}:${textureName !== null && textureName !== void 0 ? textureName : 'none'}:${normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'none'}`;
     const sharedProps = Object.assign(Object.assign({ map: finalTexture, side: resolvedSide }, materialProps), overrides);
     if (materialType === 'basic') {
-        return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps));
+        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps), materialKey);
+    }
+    if (materialType === 'sprite') {
+        const spriteTransparent = materialSource.transparent !== false;
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, 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 }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_j = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _j !== void 0 ? _j : 1, (_k = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _k !== void 0 ? _k : 1] : undefined })));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, 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',
@@ -240,6 +277,7 @@ const MaterialComponent = {
         wireframe: false,
         transparent: false,
         opacity: 1,
+        sizeAttenuation: true,
         offset: [0, 0],
         animateOffset: false,
         offsetSpeed: [0, 0],

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

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const ModelComponent: Component;
 export default ModelComponent;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelPicker } from '../../assetviewer/page';
 import { useMemo } from 'react';
+import { Mesh } from 'three';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput, StringField } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
 import { useEditorContext } from '../PrefabEditor';
@@ -46,23 +47,20 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
 // View for Model component
 function ModelComponentView({ properties, children }) {
     const { getModel } = useAssetRuntime();
-    // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
-    if (!properties.filename || properties.instanced)
-        return _jsx(_Fragment, { children: children });
-    const sourceModel = getModel(properties.filename);
+    const sourceModel = properties.filename ? getModel(properties.filename) : null;
     // Clone model once and set up shadows - memoized to avoid cloning on every render
     const clonedModel = useMemo(() => {
-        if (!sourceModel)
+        if (!sourceModel || !properties.filename || properties.instanced)
             return null;
         const clone = sourceModel.clone();
         clone.traverse((obj) => {
-            if (obj.isMesh) {
+            if (obj instanceof Mesh) {
                 obj.castShadow = true;
                 obj.receiveShadow = true;
             }
         });
         return clone;
-    }, [sourceModel]);
+    }, [properties.filename, properties.instanced, sourceModel]);
     if (!clonedModel)
         return _jsx(_Fragment, { children: children });
     return _jsx("primitive", { object: clonedModel, children: children });

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

@@ -0,0 +1,8 @@
+import type { Component } from './ComponentRegistry';
+export interface SpriteProps {
+    center?: [number, number];
+    emitClickEvent?: boolean;
+    clickEventName?: string;
+}
+declare const SpriteComponent: Component;
+export default SpriteComponent;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BooleanField, FieldRenderer, NumberInput, StringField } from './Input';
+function Vector2Editor({ value, onChange, min, max, step, }) {
+    var _a, _b;
+    return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, onChange: x => { var _a; return onChange([x, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 0]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 0, onChange: y => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, y]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }));
+}
+function SpriteComponentEditor({ component, onUpdate, }) {
+    const fields = [
+        {
+            name: 'center',
+            type: 'custom',
+            label: 'Center',
+            render: ({ value, onChange }) => (_jsx(Vector2Editor, { value: value, onChange: onChange, min: 0, max: 1, step: 0.01 })),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }), _jsxs("div", { style: { marginTop: 8 }, 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, fallback: "node:click" })) : null] })] }));
+}
+const SpriteComponent = {
+    name: 'Sprite',
+    Editor: SpriteComponentEditor,
+    defaultProperties: {
+        center: [0.5, 0.5],
+        emitClickEvent: false,
+        clickEventName: 'node:click',
+    },
+};
+export default SpriteComponent;

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

@@ -1,28 +1,36 @@
-import TransformComponent from './TransformComponent';
-import GeometryComponent from './GeometryComponent';
-import BufferGeometryComponent from './BufferGeometryComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
-import MaterialComponent from './MaterialComponent';
-import SpotLightComponent from './SpotLightComponent';
-import PointLightComponent from './PointLightComponent';
-import DirectionalLightComponent from './DirectionalLightComponent';
-import AmbientLightComponent from './AmbientLightComponent';
-import EnvironmentComponent from './EnvironmentComponent';
-import CameraComponent from './CameraComponent';
-import SoundComponent from './SoundComponent';
-import DataComponent from './DataComponent';
+// biome-ignore assist/source/organizeImports: <in order of display in the editor>
+import TransformComponent from "./TransformComponent";
+import GeometryComponent from "./GeometryComponent";
+import BufferGeometryComponent from "./BufferGeometryComponent";
+import ModelComponent from "./ModelComponent";
+import SpriteComponent from "./SpriteComponent";
+import TextComponent from "./TextComponent";
+import MaterialComponent from "./MaterialComponent";
+import SpotLightComponent from "./SpotLightComponent";
+import PointLightComponent from "./PointLightComponent";
+import DirectionalLightComponent from "./DirectionalLightComponent";
+import AmbientLightComponent from "./AmbientLightComponent";
+import EnvironmentComponent from "./EnvironmentComponent";
+import CameraComponent from "./CameraComponent";
+import SoundComponent from "./SoundComponent";
+import DataComponent from "./DataComponent";
+// this controls the order of components in the editor, and also which components are available to add
 export const builtinComponents = [
     TransformComponent,
+    // geometry components
     GeometryComponent,
     BufferGeometryComponent,
     ModelComponent,
+    SpriteComponent,
     TextComponent,
+    // material components
     MaterialComponent,
+    // light components
     SpotLightComponent,
     PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
+    // other components
     EnvironmentComponent,
     CameraComponent,
     SoundComponent,

package/package.json

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