@needle-tools/engine 2.28.0-pre → 2.30.0-pre

package/src/engine/engine_components.js

@@ -6,6 +6,14 @@ import { getParam } from './engine_utils';
 
 const debug = getParam("debuggetcomponent");
 
+function tryGetObject(obj) {
+    if(obj === null || obj === undefined) return obj;
+    if(obj.isObject3D) return obj;
+    // handle threejs intersection object
+    if (obj.object && obj.object.isObject3D) return obj.object;
+    return obj;
+}
+
 export function registerComponent(script, context) {
     if (!script) return;
     const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
@@ -134,6 +142,14 @@ const getComponentsInChildren = function (componentType, obj, arr) {
 
 const getComponentInParent = function (componentType, obj) {
     if (!obj) return null;
+    if (Array.isArray(obj)) {
+        for (let i = 0; i < obj.length; i++) {
+            const o = tryGetObject(obj[i]);
+            const res = getComponentInParent(componentType, o);
+            if (res) return res;
+        }
+        return null;
+    }
     // console.log(obj);
     const res = getComponent(componentType, obj);
     if (res) return res;

package/src/engine/engine_input.ts

@@ -1,10 +1,34 @@
 import * as THREE from 'three';
+import { assign } from './engine_serialization_core';
 import { Context } from './engine_setup';
 
-export declare type PointerEventArgs = { button: number; clientX: number; clientY: number; pointerId?: number, pointerType: string, source?: Event };
+export declare type PointerEventArgs = {
+    button: number;
+    clientX: number;
+    clientY: number;
+    pointerId?: number,
+    pointerType: string,
+    source?: Event
+};
+
+export class KeyEventArgs {
+    key: string;
+    keyType: string;
+    source?: Event;
+    constructor(evt : KeyboardEvent){
+        this.key = evt.key;
+        this.keyType = evt.type;
+        this.source = evt;
+    }
+}
 
 export enum InputEvents {
-    PointerDown = "pointerDown",
+    PointerDown = "pointerdown",
+    PointerUp = "pointerup",
+    PointerMove = "pointermove",
+    KeyDown = "keydown",
+    KeyUp = "keyup",
+    KeyPressed = "keypress"
 }
 
 // export class InputEvent extends Event {
@@ -244,29 +268,32 @@ export class Input extends EventTarget {
 
     private keysPressed: { [key: number]: { pressed: boolean, frame: number, startFrame: number, key: string } } = {};
 
-    private onKeyDown(evt) {
+    private onKeyDown(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const ex = this.keysPressed[evt.keyCode];
+        const ex = this.keysPressed[evt.key];
         if (ex && ex.pressed) return;
-        this.keysPressed[evt.keyCode] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key };
+        this.keysPressed[evt.key] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key };
+        this.onDispatchEvent(InputEvents.KeyDown, new KeyEventArgs(evt));
     }
-    private onKeyPressed(evt) {
+    private onKeyPressed(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const p = this.keysPressed[evt.keyCode];
+        const p = this.keysPressed[evt.key];
         if (!p) return;
         p.pressed = true;
         p.frame = this.context.time.frameCount + 1;
+        this.onDispatchEvent(InputEvents.KeyPressed, new KeyEventArgs(evt));
+
     }
-    private onKeyUp(evt) {
+    private onKeyUp(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const p = this.keysPressed[evt.keyCode];
+        const p = this.keysPressed[evt.key];
         if (!p) return;
         p.pressed = false;
         p.frame = this.context.time.frameCount + 1;
-        // console.log("UP", evt.key, evt.keyCode, this.keysPressed);
+        this.onDispatchEvent(InputEvents.KeyUp, new KeyEventArgs(evt));
     }
 
     private onMouseWheel(_evt) {
@@ -297,8 +324,8 @@ export class Input extends EventTarget {
     private onPointerDown(evt: PointerEvent) {
         if (evt.defaultPrevented) return;
         if (evt.pointerType === undefined && evt.pointerId === undefined) return;
-        if (evt.preventDefault)
-            evt.preventDefault();
+        // if (evt.preventDefault)
+        //     evt.preventDefault();
         let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
         if (evt.pointerId === undefined && evt.button !== undefined) {
             i = evt.button;
@@ -308,12 +335,12 @@ export class Input extends EventTarget {
         // evt.stopPropagation();
     }
 
-    private onPointerMove(evt: PointerEvent, suppressPreventDefault: boolean | undefined = undefined) {
+    private onPointerMove(evt: PointerEvent) {
         // console.log(evt);
         if (evt.defaultPrevented) return;
         if (evt.pointerType === undefined && evt.pointerId === undefined) return;
-        if (suppressPreventDefault !== true)
-            evt.preventDefault();
+        // if (suppressPreventDefault !== true)
+        //     evt.preventDefault();
         let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
         if (evt.pointerId === undefined && evt.button !== undefined) {
             i = evt.button;
@@ -321,13 +348,14 @@ export class Input extends EventTarget {
         if (i < 0) i = 0;
         const args = { button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: evt.pointerType, source: evt };
         this.onMove(args);
+        this.onDispatchEvent(InputEvents.PointerMove, evt);
     }
 
-    private onPointerUp(evt: PointerEvent, suppressPreventDefault: boolean | undefined = undefined) {
+    private onPointerUp(evt: PointerEvent) {
         if (evt.defaultPrevented) return;
         if (evt.pointerType === undefined && evt.pointerId === undefined) return;
-        if (suppressPreventDefault !== true)
-            evt.preventDefault();
+        // if (suppressPreventDefault !== true)
+        //     evt.preventDefault();
         // console.log(evt, this._pointerIds);
         let i = evt.pointerType === "mouse" ? evt.button : this.getPointerIndex(evt.pointerId);
         // console.log("INDEX", i);
@@ -338,6 +366,7 @@ export class Input extends EventTarget {
         this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: evt.pointerType, source: evt });
         // console.log(this.getPointerPressedCount());
         // evt.stopPropagation();
+        this.onDispatchEvent(InputEvents.PointerUp, evt);
     }
 
     // private onMouseDown(evt){
@@ -385,8 +414,7 @@ export class Input extends EventTarget {
         this.updatePointerPosition(evt);
         // console.log("DOWN", this._pointerDown, this.mousePositionRC);
 
-        Context.Current = this.context;
-        this.dispatchEvent(new Event(InputEvents.PointerDown));
+        this.onDispatchEvent(InputEvents.PointerDown, evt);
     }
     // moveEvent?: Event;
     private onMove(evt: PointerEventArgs) {
@@ -474,6 +502,20 @@ export class Input extends EventTarget {
         while (arr.length <= index) arr.push(null as any);
         arr[index] = value;
     }
+
+    private onDispatchEvent(name: InputEvents, args: PointerEventArgs | KeyEventArgs) {
+        const prevContext = Context.Current;
+        try {
+
+            Context.Current = this.context;
+            const e = new Event(name);
+            assign(e, args);
+            this.dispatchEvent(e);
+        }
+        finally {
+            Context.Current = prevContext;
+        }
+    }
 }
 
 

package/src/engine/engine_physics.ts

@@ -71,6 +71,7 @@ class CannonCollision {
 
 export class RaycastOptions {
     ray: THREE.Ray | undefined = undefined;
+    cam : THREE.Camera | undefined | null = undefined;
     screenPoint: THREE.Vector2 | undefined = undefined;
     raycaster: THREE.Raycaster | undefined = undefined;
     results: Array<THREE.Intersection> | undefined = undefined;
@@ -193,7 +194,7 @@ export class Physics {
             rc.ray.copy(options.ray);
         }
         else {
-            const cam = this.context.mainCamera;
+            const cam = options.cam ?? this.context.mainCamera;
             if (!cam) {
                 console.error("Can not perform raycast - no main camera found");
                 if (this.defaultRaycastOptions.results) this.defaultRaycastOptions.results.length = 0;

package/src/engine/engine_playerview.ts

@@ -0,0 +1,80 @@
+import { getParam } from "./engine_utils";
+import { Object3D } from "three";
+import { Context } from "./engine_setup";
+
+const debug = getParam("debugplayerview");
+
+export enum ViewDevice {
+    Browser = "browser",
+    Headset = "headset",
+    Handheld = "handheld",
+}
+
+export class PlayerView {
+    readonly userId: string;
+    readonly context: Context;
+
+    viewDevice: ViewDevice = ViewDevice.Browser;
+
+    get currentObject(): Object3D | undefined | null {
+        return this._object;
+    }
+    set currentObject(obj: Object3D | undefined | null) {
+        this._object = obj;
+    }
+
+    get isConnected(): boolean {
+        return this.context.connection.userIsInRoom(this.userId);
+    }
+
+    removed: boolean = false;
+
+    private _object: undefined | Object3D | null;
+
+    constructor(userId: string, context: Context) {
+        this.userId = userId;
+        this.context = context;
+    }
+}
+
+export class PlayerViewManager {
+
+    private readonly context: Context;
+    private readonly playerViews = new Map<string, PlayerView>();
+
+    constructor(context: Context) {
+        this.context = context;
+    }
+
+    setPlayerView(id: string, obj: Object3D | undefined | null, device: ViewDevice) {
+        let view = this.playerViews.get(id);
+        if (!view) {
+            view = new PlayerView(id, this.context);
+            this.playerViews.set(id, view);
+        }
+        view.viewDevice = device;
+        view.currentObject = obj;
+        view.removed = false;
+    }
+
+    getPlayerView(id: string | null | undefined): PlayerView | undefined {
+        if (!id) return undefined;
+        if (!this.context.connection.userIsInRoom(id)) {
+            this.playerViews.delete(id);
+            return undefined;
+        }
+        const view = this.playerViews.get(id);
+        return view;
+    }
+
+    removePlayerView(id: string, device: ViewDevice) {
+        const view = this.playerViews.get(id);
+        if (view?.viewDevice === device) {
+            if (debug)
+                console.log("REMOVE", id);
+            view.removed = true;
+            this.playerViews.delete(id);
+        }
+    }
+
+}

package/src/engine/engine_serialization.ts

@@ -1,4 +1,6 @@
 import { serializeObject, deserializeObject } from "./engine_serialization_core";
 import * as builtin from "./engine_serialization_builtin_serializer";
 // export builtin so it will be called and registered
-export { serializeObject, deserializeObject, builtin };
+export { serializeObject, deserializeObject, builtin };
+
+export { serializeable } from "./engine_serialization_decorator"

package/src/engine/engine_serialization_core.ts

@@ -248,6 +248,14 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
             for (const key in typeInfo) {
                 const serializedEntryInfo = typeInfo[key];
                 const data = serializedData[key];
+
+
+                if (obj[key] !== undefined && data === undefined) {
+                    // if a field is marked as serialized and has some default value
+                    // but no data was serialized do not override the default value with undefined
+                    continue;
+                }
+
                 context.path = key;
 
                 if (serializedEntryInfo === null) {

package/src/engine/engine_setup.ts

@@ -26,6 +26,7 @@ import { RendererData } from './engine_rendererdata';
 import { Addressables } from './engine_addressables';
 import { Application } from './engine_application';
 import { LightDataRegistry, ILightDataRegistry } from './engine_lightdata';
+import { PlayerViewManager } from './engine_playerview';
 
 
 const debug = utils.getParam("debugSetup");
@@ -71,6 +72,11 @@ export enum FrameEvent {
 	PhysicsStep = 10,
 }
 
+export enum XRSessionMode {
+	ImmersiveVR = "immersive-vr",
+	ImmersiveAR = "immersive-ar",
+}
+
 export declare type OnBeforeRenderCallback = (renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, geometry: THREE.BufferGeometry, material: THREE.Material, group: THREE.Group) => void
 
 export class Context {
@@ -108,6 +114,7 @@ export class Context {
 	get domX(): number { return this.domElement.offsetLeft; }
 	get domY(): number { return this.domElement.offsetTop; }
 	get isInXR() { return this.renderer.xr?.isPresenting || false; }
+	xrSessionMode : XRSessionMode | undefined = undefined;
 	get xrSession() { return this.renderer.xr?.getSession(); }
 	get arOverlayElement(): HTMLElement {
 		const el = this.domElement as any;
@@ -165,6 +172,7 @@ export class Context {
 	rendererData: RendererData;
 	addressables: Addressables;
 	lightmaps: ILightDataRegistry;
+	players : PlayerViewManager;
 
 	private _sizeChanged: boolean = false;
 	private _isCreated: boolean = false;
@@ -212,6 +220,7 @@ export class Context {
 		this.rendererData = new RendererData(this);
 		this.addressables = new Addressables(this);
 		this.lightmaps = new LightDataRegistry(this);
+		this.players = new PlayerViewManager(this);
 
 		window.addEventListener('resize', this.updateSize.bind(this));
 		const ro = new ResizeObserver(_ => this._sizeChanged = true);
@@ -310,6 +319,21 @@ export class Context {
 		(this.mainCameraComponent as Camera)?.applyClearFlagsIfIsActiveCamera();
 	}
 
+	removeCamera(cam?: Camera | null) {
+		if(!cam) return;
+		const index = this._cameraStack.indexOf(cam);
+		if (index >= 0) this._cameraStack.splice(index, 1);
+
+		if (this.mainCameraComponent === cam) {
+			this.mainCameraComponent = undefined;
+		
+			if (this._cameraStack.length > 0) {
+				const last = this._cameraStack[this._cameraStack.length - 1];
+				this.setCurrentCamera(last);
+			}
+		}
+	}
+
 	private _onBeforeRenderListeners: { [key: string]: OnBeforeRenderCallback[] } = {};
 
 	/** use this to subscribe to onBeforeRender events on threejs objects */

package/src/engine/engine_utils.ts

@@ -181,17 +181,43 @@ export function delay(milliseconds: number): Promise<void> {
 // if a timeline is exported via menu item the audio clip path is relative to the glb (same folder)
 // we need to detect that here and build the new audio source path relative to the new glb location
 // the same is/might be true for any file that is/will be exported via menu item
-export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
-    if (path && glbLocation && !path.includes("/")) {
-        // get directory of glb and prepend it to the audio file path
-        const pathIndex = glbLocation.lastIndexOf("/");
-        if (pathIndex >= 0) {
-            const newPath = glbLocation.substring(0, pathIndex + 1) + path;
-            return newPath;
+const debugGetPath = getParam("debugsourcepath");
+export function getPath(source: SourceIdentifier | undefined, uri: string): string {
+    if (source === undefined) {
+        if (debugGetPath) console.warn("getPath: source is undefined, returning uri", uri);
+        return uri;
+    }
+    if (uri.startsWith("http")) {
+        if (debugGetPath) console.warn("getPath: uri is absolute, returning uri", uri);
+        return uri;
+    }
+    const pathIndex = source.lastIndexOf("/");
+    if (pathIndex >= 0) {
+        let newUri = source.substring(0, pathIndex + 1);
+
+        const uriDirectoryIndex = uri.lastIndexOf("/");
+        if (uriDirectoryIndex >= 0) {
+            newUri += uri.substring(uriDirectoryIndex + 1);
+        } else {
+            newUri += uri;
         }
+        if (debugGetPath) console.log("getPath:", source, " - changed uri from\n", uri, "\n→ ", newUri);
+        return newUri;
     }
-    return path;
+    return uri;
 }
+// export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
+//     if (path && glbLocation && !path.includes("/")) {
+//         // get directory of glb and prepend it to the audio file path
+//         const pathIndex = glbLocation.lastIndexOf("/");
+//         if (pathIndex >= 0) {
+//             const newPath = glbLocation.substring(0, pathIndex + 1) + path;
+//             return newPath;
+//         }
+//     }
+//     return path;
+// }
+
 
 export type WriteCallback = (data: any) => void;
 

package/src/engine/extensions/NEEDLE_deferred_texture.ts

@@ -3,7 +3,7 @@ import { GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/j
 import { SourceIdentifier } from "../engine_gltf";
 import { Context } from "../engine_setup";
 import { addDracoAndKTX2Loaders } from "../engine_loaders";
-import { getParam } from "../engine_utils";
+import { getParam, getPath } from "../engine_utils";
 
 export const EXTENSION_NAME = "NEEDLE_deferred_texture";
 
@@ -11,24 +11,27 @@ const debug = getParam("debugdeferredtextures")
 
 declare type DeferredTextureModel = {
     uri: string;
-    guid?: string;
+    guid: string;
     usage?: string,
 }
 
 export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
 
-    static assignTextureLOD(context: Context, material: Material, level: number = 0) {
+    static assignTextureLOD(context: Context, source : SourceIdentifier | undefined, material: Material, level: number = 0) {
         if (!material) return;
         for (const slot of Object.keys(material)) {
             const val = material[slot];
             if (val?.isTexture === true) {
                 if (debug)
-                    console.log("FIND", slot, val?.name, val?.userData, val);
-                NEEDLE_deferred_texture.getOrLoadTexture(context, material, slot, val, level).then(t => {
+                    console.log("-----------\n", "FIND", material.name, slot, val?.name, val?.userData, val);
+                NEEDLE_deferred_texture.getOrLoadTexture(context, source, material, slot, val, level).then(t => {
                     if (t?.isTexture === true) {
                         t.needsUpdate = true;
+                        if (debug)
+                            console.log("Assign LOD", material.name, slot, t.name, t["guid"], material, "Prev:", val, "Now:", t, "\n--------------");
                         material[slot] = t;
                         material.needsUpdate = true;
+
                     }
                 });
             }
@@ -67,9 +70,8 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
     // }
 
     afterRoot(gltf: GLTF): null {
-
         if (debug)
-            console.log("AFTER", gltf);
+            console.log("AFTER", this.sourceId, gltf);
         this.parser.json.textures?.forEach((textureInfo, index) => {
             if (textureInfo?.extensions) {
                 const ext: DeferredTextureModel = textureInfo?.extensions[EXTENSION_NAME];
@@ -91,29 +93,31 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
     private static cache = new Map<string, DeferredTextureModel>();
     private static resolved: { [key: string]: Texture } = {};
 
-    private static async getOrLoadTexture(context: Context, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
+    private static async getOrLoadTexture(context: Context, source : SourceIdentifier | undefined, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
 
         const key = current.uuid;
-        const ext: DeferredTextureModel = NEEDLE_deferred_texture.cache.get(key) || current.userData.deferred;
+        const ext: DeferredTextureModel | undefined = NEEDLE_deferred_texture.cache.get(key);// || current.userData.deferred;
         if (ext) {
             if (debug)
                 console.log(key, ext.uri, ext.guid);
-            const uri = ext.uri;
+            const uri = getPath(source, ext.uri);
             if (uri.endsWith(".glb") || uri.endsWith(".gltf")) {
                 if (!ext.guid) {
                     console.warn("missing pointer for glb/gltf texture", ext);
                     return null;
                 }
-                const resolveKey = ext.uri + "_" + ext.guid;
-                if (this.resolved[resolveKey])
+                const resolveKey = uri + "_" + ext.guid;
+                if (this.resolved[resolveKey]) {
+                    if (debug) console.log("Texture has already been loaded: " + resolveKey, material.name, slot, current.name);
                     return this.resolved[resolveKey];
+                }
 
                 const loader = new GLTFLoader();
                 addDracoAndKTX2Loaders(loader, context);
-                if (debug) console.log("Load " + uri, material.name, slot);
+                if (debug) console.log("Load " + uri, material.name, slot, ext.guid);
                 const gltf = await loader.loadAsync(uri);
                 const parser = gltf.parser;
-
+                if (debug) console.log("Loading finished " + uri, material.name, slot, ext.guid);
                 let index = -1;
                 let found = false;
                 for (const tex of gltf.parser.json.textures) {
@@ -137,20 +141,22 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
 
                 // const index = Number.parseInt(ext.pointer.substring("textures/".length));
                 const tex = await parser.getDependency("texture", index);
+                if (tex) {
+                    tex.guid = ext.guid;
+                }
                 this.resolved[resolveKey] = tex as Texture;
-
                 if (debug)
-                    console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material);
+                    console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material, resolveKey);
                 return tex;
             }
             else {
-
+                if (debug) console.log("Load texture from uri: " + uri);
                 const loader = new TextureLoader();
-                const loaded = await loader.loadAsync(ext.uri);
+                const loaded = await loader.loadAsync(uri);
                 if (loaded && debug) {
                     console.log(ext, loaded);
                 }
-                else console.warn("failed loading", ext.uri);
+                else console.warn("failed loading", uri);
                 return loaded;
             }
             // loader.then((h: Texture) => {

package/src/engine/extensions/NEEDLE_lighting_settings.ts

@@ -99,13 +99,14 @@ export class SceneLightSettings extends Behaviour {
     onEnable() {
         const isActive = this.context.mainCameraComponent?.sourceId === this.sourceId;
         if (debug)
-            console.log("enable", this.sourceId, isActive, this, this.context.mainCameraComponent?.sourceId);
+            console.log("Enable scene lighting", this.sourceId, isActive, this, this.context.mainCameraComponent?.sourceId);
         if (!isActive) {
+            if(debug) console.warn("This is no active?!", this.context.mainCameraComponent?.sourceId)
             // this.enabled = false;
             // return;
         }
         if (this.ambientMode == AmbientMode.Flat) {
-            if (this.ambientLight) {
+            if (this.ambientLight && !this._ambientLightObj) {
                 this._ambientLightObj = new AmbientLight(this.ambientLight, Math.PI * this.ambientIntensity);
             }
             if (this._ambientLightObj) {
@@ -155,6 +156,7 @@ export class SceneLightSettings extends Behaviour {
         if (debug)
             console.log("disable", this.sourceId, this);
         if (this._lightProbeObj) this._lightProbeObj.removeFromParent();
+        if(this._ambientLightObj) this._ambientLightObj.removeFromParent();
         if (this.sourceId)
             this.context.rendererData.disableReflection();
     }

package/src/engine/extensions/extension_utils.ts

@@ -10,13 +10,20 @@ declare type DependencyInfo = {
     dependencyName: string,
 }
 
-const rootExtensionPrefix = "/extensions/";
+const rootExtensionPrefix = ["/extensions/", "extensions/"];
 const defaultDependencies = [
     { prefix: "/nodes/", dependencyName: "node" },
     { prefix: "/meshes/", dependencyName: "mesh" },
     { prefix: "/materials/", dependencyName: "material" },
     { prefix: "/textures/", dependencyName: "texture" },
-    { prefix: "/animations/", dependencyName: "animation" }
+    { prefix: "/animations/", dependencyName: "animation" },
+
+    // legacy support
+    { prefix: "nodes/", dependencyName: "node" },
+    { prefix: "meshes/", dependencyName: "mesh" },
+    { prefix: "materials/", dependencyName: "material" },
+    { prefix: "textures/", dependencyName: "texture" },
+    { prefix: "animations/", dependencyName: "animation" },
 ]
 
 export async function resolveReferences(parser: GLTFParser, obj) {
@@ -95,16 +102,21 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParser, obj, promi
 
 
 function resolveExtension(parser: GLTFParser, str): Promise<void> | null {
-    if (parser && parser.plugins && typeof str === "string" && str.startsWith(rootExtensionPrefix)) {
-        let name = str.substring(rootExtensionPrefix.length);
-        const endIndex = name.indexOf("/");
-        if (endIndex >= 0) name = name.substring(0, endIndex);
-        const ext = parser.plugins[name] as IExtensionReferenceResolver;
-        if (debugExtension)
-            console.log(name, ext);
-        if (typeof ext?.resolve === "function") {
-            const path = str.substring(rootExtensionPrefix.length + name.length + 1);
-            return ext.resolve(parser, path);
+    if (parser && parser.plugins && typeof str === "string") {
+        for (const prefix of rootExtensionPrefix) {
+            if (str.startsWith(prefix)) {
+                let name = str.substring(prefix.length);
+                const endIndex = name.indexOf("/");
+                if (endIndex >= 0) name = name.substring(0, endIndex);
+                const ext = parser.plugins[name] as IExtensionReferenceResolver;
+                if (debugExtension)
+                    console.log(name, ext);
+                if (typeof ext?.resolve === "function") {
+                    const path = str.substring(prefix.length + name.length + 1);
+                    return ext.resolve(parser, path);
+                }
+                break;
+            }
         }
     }
     return null;

package/src/engine/extensions/extensions.ts

@@ -26,8 +26,9 @@ export function registerComponentExtension(loader: GLTFLoader): NEEDLE_component
 class PointerResolver {
     resolvePath(path: string) {
         if (path.includes('/extensions/builtin_components/'))
-            path = path.replace('/extensions/builtin_components/', '/userData/components/');
-
+            return path.replace('/extensions/builtin_components/', '/userData/components/');
+        if (path.includes('extensions/builtin_components/'))
+            return path.replace('extensions/builtin_components/', '/userData/components/');
         return path;
     }
 }