react-three-game 0.0.65 → 0.0.67

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

@@ -1,12 +1,23 @@
 import type { RapierRigidBody } from '@react-three/rapier';
 /** Physics event types (built-in) */
 export type PhysicsEventType = 'sensor:enter' | 'sensor:exit' | 'collision:enter' | 'collision:exit';
+export type InteractionEventType = 'click';
 /** Payload for physics events */
 export interface PhysicsEventPayload {
     sourceEntityId: string;
     targetEntityId: string | null;
     targetRigidBody: RapierRigidBody | null | undefined;
 }
+export interface ClickEventPayload {
+    sourceEntityId: string;
+    instanceEntityId?: string;
+    point: [number, number, number];
+    button: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
 /**
  * Register your custom event types here by extending this interface:
  *
@@ -22,6 +33,7 @@ export interface GameEventMap {
     'sensor:exit': PhysicsEventPayload;
     'collision:enter': PhysicsEventPayload;
     'collision:exit': PhysicsEventPayload;
+    'click': ClickEventPayload;
 }
 /** All registered event types */
 export type GameEventType = keyof GameEventMap | (string & {});
@@ -31,11 +43,12 @@ type EventHandler<T = unknown> = (payload: T) => void;
 /**
  * Game event system for all game interactions.
  *
- * Built-in physics events:
+ * Built-in events:
  * - sensor:enter - Something entered a sensor collider
  * - sensor:exit - Something exited a sensor collider
  * - collision:enter - A collision started
  * - collision:exit - A collision ended
+ * - click - A prefab entity with a Click component was clicked in play mode
  *
  * Custom events:
  * - Emit any event type with any payload

package/dist/tools/prefabeditor/GameEvents.js

@@ -4,11 +4,12 @@ const subscribers = new Map();
 /**
  * Game event system for all game interactions.
  *
- * Built-in physics events:
+ * Built-in events:
  * - sensor:enter - Something entered a sensor collider
  * - sensor:exit - Something exited a sensor collider
  * - collision:enter - A collision started
  * - collision:exit - A collision ended
+ * - click - A prefab entity with a Click component was clicked in play mode
  *
  * Custom events:
  * - Emit any event type with any payload

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

@@ -12,6 +12,8 @@ export declare function getRepeatAxesFromModelProperties(properties: Record<stri
 export type InstanceData = {
     id: string;
     sourceId: string;
+    clickable?: boolean;
+    locked?: boolean;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
@@ -32,7 +34,9 @@ export declare function useInstanceCheck(id: string): boolean;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
     sourceId?: string;
+    clickable?: boolean;
     modelUrl: string;
+    locked?: boolean;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -129,9 +129,23 @@ function emitCollisionExit(sourceId, payload) {
         targetRigidBody: payload.other.rigidBody,
     });
 }
+function emitClick(sourceId, instanceId, event) {
+    gameEvents.emit('click', {
+        sourceEntityId: sourceId,
+        instanceEntityId: instanceId && instanceId !== sourceId ? instanceId : undefined,
+        point: [event.point.x, event.point.y, event.point.z],
+        button: event.button,
+        altKey: event.nativeEvent.altKey,
+        ctrlKey: event.nativeEvent.ctrlKey,
+        metaKey: event.nativeEvent.metaKey,
+        shiftKey: event.nativeEvent.shiftKey,
+    });
+}
 function instanceEquals(a, b) {
     return a.id === b.id &&
         a.sourceId === b.sourceId &&
+        a.clickable === b.clickable &&
+        a.locked === b.locked &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
         arrayEquals(a.rotation, b.rotation) &&
@@ -308,22 +322,30 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
     }, [group.instances]);
     // Handle click on instanced mesh in edit mode
     const handleClick = (e) => {
-        if (!editMode || !onSelect)
-            return;
-        e.stopPropagation();
-        // Get the instance index from the intersection
         const instanceId = e.instanceId;
-        if (instanceId !== undefined && group.instances[instanceId]) {
-            onSelect(group.instances[instanceId].sourceId);
+        const instance = instanceId !== undefined ? group.instances[instanceId] : undefined;
+        if (!instance)
+            return;
+        if (editMode) {
+            if (!onSelect || instance.locked)
+                return;
+            e.stopPropagation();
+            onSelect(instance.sourceId);
+            return;
         }
+        if (!instance.clickable)
+            return;
+        e.stopPropagation();
+        emitClick(instance.sourceId, instance.id, e);
     };
+    const shouldHandleClick = editMode || group.instances.some(inst => inst.clickable);
     // Add key to force remount when instance count changes significantly (helps with cleanup)
     const rigidBodyKey = `rb_${modelKey}_${group.instances.map(inst => `${inst.id}:${getPhysicsSignature(inst.physics)}`).join('|')}`;
     return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, children: Array.from({ length: partCount }).map((_, i) => {
             const mesh = flatMeshes[`${modelKey}__${i}`];
             if (!mesh)
                 return null;
-            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: editMode ? handleClick : undefined }, i));
+            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: shouldHandleClick ? handleClick : undefined }, i));
         }) }, rigidBodyKey));
 }
 // Render non-physics instances using Merged (instancing without rigid bodies)
@@ -336,7 +358,10 @@ function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, on
 function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef, selectedId, editMode }) {
     const clickValid = useRef(false);
     const groupRef = useRef(null);
+    const isLocked = Boolean(instance.locked);
     const isSelected = selectedId === instance.id || selectedId === instance.sourceId;
+    const canSelect = editMode && !isLocked;
+    const canClick = !editMode && Boolean(instance.clickable);
     // Use BoxHelper when object is selected in edit mode
     useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
     useEffect(() => {
@@ -345,13 +370,18 @@ function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef
         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", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+    return (_jsx("group", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: canSelect || canClick ? (e) => { e.stopPropagation(); clickValid.current = true; } : undefined, onPointerMove: canSelect || canClick ? () => { clickValid.current = false; } : undefined, onPointerUp: canSelect || canClick ? (e) => {
             if (clickValid.current) {
                 e.stopPropagation();
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.sourceId);
+                if (editMode) {
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.sourceId);
+                }
+                else if (instance.clickable) {
+                    emitClick(instance.sourceId, instance.id, e);
+                }
             }
             clickValid.current = false;
-        }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
+        } : undefined, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
 }
 // Hook to check if an instance exists
 export function useInstanceCheck(id) {
@@ -360,19 +390,21 @@ export function useInstanceCheck(id) {
     return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.hasInstance(id)) !== null && _a !== void 0 ? _a : false;
 }
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
-export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+export const GameInstance = React.forwardRef(({ id, sourceId, clickable = false, modelUrl, locked = false, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
     const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
     const removeInstance = ctx === null || ctx === void 0 ? void 0 : ctx.removeInstance;
     const instance = useMemo(() => ({
         id,
         sourceId: sourceId !== null && sourceId !== void 0 ? sourceId : id,
+        clickable,
+        locked,
         meshPath: modelUrl,
         position,
         rotation,
         scale,
         physics,
-    }), [id, sourceId, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), getPhysicsSignature(physics)]);
+    }), [id, sourceId, clickable, locked, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), getPhysicsSignature(physics)]);
     useEffect(() => {
         if (!addInstance || !removeInstance)
             return;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapControls, TransformControls } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import PrefabRoot from "./PrefabRoot";
@@ -15,7 +16,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { createImageNode, createModelNode, exportGLB as exportSceneGLB, exportGLBData, insertNode } from "./utils";
+import { computeParentWorldMatrix, createImageNode, createModelNode, decompose, exportGLB as exportSceneGLB, exportGLBData, findNode, focusCameraOnObject, insertNode, updateNode } from "./utils";
 import { loadFiles } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
@@ -40,29 +41,57 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
     const [history, setHistory] = useState([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
+    const [selectedObject, setSelectedObject] = useState(null);
     const throttleRef = useRef(null);
     const lastDataRef = useRef(JSON.stringify(loadedPrefab));
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
+    const controlsRef = useRef(null);
     const onPrefabChangeRef = useRef(onPrefabChange);
     const pendingPrefabChangeRef = useRef(null);
     const [injectedModels, setInjectedModels] = useState({});
     const [injectedTextures, setInjectedTextures] = useState({});
-    useEffect(() => {
-        onPrefabChangeRef.current = onPrefabChange;
-    }, [onPrefabChange]);
+    onPrefabChangeRef.current = onPrefabChange;
+    const setSelection = (nodeId) => {
+        var _a, _b;
+        const nextNode = nodeId ? findNode(loadedPrefab.root, nodeId) : null;
+        if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.locked) {
+            return;
+        }
+        setSelectedId(nodeId);
+        setSelectedObject(nodeId ? (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId)) !== null && _b !== void 0 ? _b : null : null);
+    };
+    const toggleEditMode = () => {
+        setEditMode(prev => {
+            const next = !prev;
+            if (!next) {
+                setSelectedId(null);
+                setSelectedObject(null);
+            }
+            return next;
+        });
+    };
+    const setSelectedIdState = (value) => {
+        setSelection(typeof value === 'function' ? value(selectedId) : value);
+    };
     const replacePrefab = (prefab, options) => {
         if (throttleRef.current)
             clearTimeout(throttleRef.current);
         lastDataRef.current = JSON.stringify(prefab);
         pendingPrefabChangeRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? null : prefab;
-        setSelectedId(null);
+        setSelection(null);
         setInjectedModels({});
         setInjectedTextures({});
         setHistory([prefab]);
         setHistoryIndex(0);
         setLoadedPrefab(prefab);
     };
+    const setPrefab = (prefab) => {
+        if (selectedId && !findNode(prefab.root, selectedId)) {
+            setSelection(null);
+        }
+        updatePrefab(prefab);
+    };
     useEffect(() => {
         if (initialPrefab)
             replacePrefab(initialPrefab, { notifyChange: false });
@@ -90,7 +119,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             return Object.assign(Object.assign({}, prev), { root: insertNode(prev.root, node, options === null || options === void 0 ? void 0 : options.parentId) });
         });
         if ((options === null || options === void 0 ? void 0 : options.select) !== false) {
-            setSelectedId(node.id);
+            setSelection(node.id);
         }
         return node;
     };
@@ -115,6 +144,8 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
     const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
     useEffect(() => {
+        if (!editMode)
+            return;
         const handleKeyDown = (e) => {
             if (!(e.ctrlKey || e.metaKey))
                 return;
@@ -129,7 +160,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [historyIndex, history]);
+    }, [editMode, historyIndex, history]);
     useEffect(() => {
         const currentStr = JSON.stringify(loadedPrefab);
         if (currentStr === lastDataRef.current)
@@ -165,7 +196,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const clearSelection = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!selectedId)
             return;
-        setSelectedId(null);
+        setSelection(null);
         yield new Promise(resolve => {
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => resolve());
@@ -190,11 +221,31 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     });
     const handleFocusNode = (nodeId) => {
         var _a;
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.focusNode(nodeId);
+        const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId);
+        const controls = controlsRef.current;
+        const camera = controls === null || controls === void 0 ? void 0 : controls.object;
+        if (!object || !controls || !camera)
+            return;
+        focusCameraOnObject(object, camera, controls.target, () => { var _a; return (_a = controls.update) === null || _a === void 0 ? void 0 : _a.call(controls); });
+    };
+    const handleTransformChange = () => {
+        var _a;
+        if (!selectedId)
+            return;
+        const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(selectedId);
+        if (!object)
+            return;
+        const parentWorld = computeParentWorldMatrix(loadedPrefab.root, selectedId);
+        const local = parentWorld.clone().invert().multiply(object.matrixWorld);
+        const { position, rotation, scale } = decompose(local);
+        updatePrefab(prev => (Object.assign(Object.assign({}, prev), { root: updateNode(prev.root, selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
+                        type: "Transform",
+                        properties: { position, rotation, scale },
+                    } }) }))) })));
     };
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
-        if (!enableWindowDrop)
+        if (!enableWindowDrop || !editMode)
             return;
         function handleDragOver(e) {
             e.preventDefault();
@@ -227,21 +278,22 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             window.removeEventListener('dragover', handleDragOver);
             window.removeEventListener('drop', handleDrop);
         };
-    }, [enableWindowDrop]);
+    }, [editMode, enableWindowDrop]);
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,
         exportGLBData: handleExportGLBData,
         clearSelection,
         prefab: loadedPrefab,
-        setPrefab: replacePrefab,
+        setPrefab,
         replacePrefab,
         addModel,
         addTexture,
         rootRef: prefabRootRef
-    }), [loadedPrefab]);
-    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
+    }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, selectedId: selectedId, onSelect: setSelection, onSelectedObjectChange: editMode ? setSelectedObject : undefined, onFocusNode: editMode ? handleFocusNode : undefined, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
     return _jsxs(EditorContext.Provider, { value: {
+            editMode,
             transformMode,
             setTransformMode,
             snapResolution,
@@ -250,10 +302,19 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             setPositionSnap,
             rotationSnap,
             setRotationSnap,
-            onFocusNode: handleFocusNode,
+            onFocusNode: editMode ? handleFocusNode : undefined,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, children: [_jsx(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] }))] });
+        }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { onPointerMissed: editMode
+                    ? (event) => {
+                        var _a, _b, _c, _d;
+                        const button = (_c = (_a = event.button) !== null && _a !== void 0 ? _a : (_b = event.sourceEvent) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : 0;
+                        if (button === 0 && selectedId) {
+                            setSelection(null);
+                        }
+                        (_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: [physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content, editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleEditMode, children: editMode ? "▶" : "⏸" }), uiPlugins] }), editMode && (_jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedIdState, 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,21 +1,24 @@
-import { Group, Matrix4, Object3D, Texture } from "three";
+import { Group, Matrix4, Object3D } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
+import { LoadedModels, LoadedTextures } from "../dragdrop";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
+    getObject: (nodeId: string) => Object3D | null;
     focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
     data: Prefab;
-    onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    onSelectedObjectChange?: (object: Object3D | null) => void;
+    onFocusNode?: (nodeId: string) => void;
     basePath?: string;
-    injectedModels?: Record<string, Object3D>;
-    injectedTextures?: Record<string, Texture>;
+    injectedModels?: LoadedModels;
+    injectedTextures?: LoadedTextures;
 } & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {
@@ -25,8 +28,8 @@ interface RendererProps {
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
     registerRigidBodyRef: (id: string, rb: any) => void;
-    loadedModels: Record<string, Object3D>;
-    loadedTextures: Record<string, Texture>;
+    loadedModels: LoadedModels;
+    loadedTextures: LoadedTextures;
     editMode?: boolean;
     parentMatrix?: Matrix4;
 }