@needle-tools/engine 4.4.6-beta.5 → 4.5.0-alpha

package/lib/needle-engine.js.map

@@ -1 +1 @@
-{"version":3,"file":"needle-engine.js","sourceRoot":"","sources":["../src/needle-engine.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AAExC,0CAA0C;AAC1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACpK,MAAM,MAAM,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,eAAe;IAChC,MAAM,EAAE;QACJ,WAAW,EAAE,SAAS;KACzB;IACD,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,aAAa,EAAE,aAAa;IAC5B,oBAAoB,EAAE,aAAa;IACnC,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,OAAO;CAC1B,CAAC;AACF,IAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,SAAS,EAAE;IAC7C,OAAO,CAAC,IAAI,CAAC,sCAAsC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;CACtF;AACD,SAAS,cAAc,CAAC,GAAW;IAC/B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACnB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;KAC1B;AACL,CAAC;AACD,OAAO,KAAK,SAAS,MAAM,kCAAkC,CAAC;AAC9D,cAAc,CAAC,SAAS,CAAC,CAAC;AAE1B,OAAO,KAAK,UAAU,MAAM,2CAA2C,CAAC;AACxE,cAAc,CAAC,UAAU,CAAC,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,EAAE;IACzD,QAAQ,MAAM,EAAE;QACZ,KAAK,WAAW,CAAC;QACjB,KAAK,aAAa,CAAC;QACnB,KAAK,QAAQ,CAAC;QACd,KAAK,MAAM;YACP,SAAS;QACb;YACI,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;YACpC,MAAM;KACb;CACJ;AAED,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;IACvB,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;CACjC;KACI;IACD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;QACtB,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;KAC3C;CACJ;AAGD,wBAAwB;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;IACtB,UAAU,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;CAC/B;;IACI,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC"}
+{"version":3,"file":"needle-engine.js","sourceRoot":"","sources":["../src/needle-engine.ts"],"names":[],"mappings":"AAAA,OAAO,yCAAyC,CAAC;AACjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AAExC,0CAA0C;AAC1C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACpK,MAAM,MAAM,GAAG;IACX,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,eAAe;IAChC,MAAM,EAAE;QACJ,WAAW,EAAE,SAAS;KACzB;IACD,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,aAAa,EAAE,aAAa;IAC5B,oBAAoB,EAAE,aAAa;IACnC,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,OAAO;CAC1B,CAAC;AACF,IAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,SAAS,EAAE;IAC7C,OAAO,CAAC,IAAI,CAAC,sCAAsC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;CACtF;AACD,SAAS,cAAc,CAAC,GAAW;IAC/B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACnB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;KAC1B;AACL,CAAC;AACD,OAAO,KAAK,SAAS,MAAM,kCAAkC,CAAC;AAC9D,cAAc,CAAC,SAAS,CAAC,CAAC;AAE1B,OAAO,KAAK,UAAU,MAAM,2CAA2C,CAAC;AACxE,cAAc,CAAC,UAAU,CAAC,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,mBAAmB,CAAC,UAAU,CAAC,EAAE;IACzD,QAAQ,MAAM,EAAE;QACZ,KAAK,WAAW,CAAC;QACjB,KAAK,aAAa,CAAC;QACnB,KAAK,QAAQ,CAAC;QACd,KAAK,MAAM;YACP,SAAS;QACb;YACI,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;YACpC,MAAM;KACb;CACJ;AAED,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;IACvB,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;CACjC;KACI;IACD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;QACtB,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;KAC3C;CACJ;AAGD,wBAAwB;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;IACtB,UAAU,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;CAC/B;;IACI,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.4.6-beta.5",
+  "version": "4.5.0-alpha",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {

package/src/engine/api.ts

@@ -22,7 +22,7 @@
 export * from "./debug/index.js";
 export * from "./engine_addressables.js";
 export { AnimationUtils } from "./engine_animation.js";
-export * from "./engine_application.js";
+export { Application } from "./engine_application.js";
 export * from "./engine_assetdatabase.js";
 export { getCameraController, setAutoFitEnabled, setCameraController, useForAutoFit } from "./engine_camera.js"
 export * from "./engine_components.js";
@@ -33,9 +33,6 @@ export * from "./engine_context.js";
 export * from "./engine_context_registry.js";
 export * from "./engine_coroutine.js"
 export * from "./engine_create_objects.js";
-export * from "./engine_element.js";
-export * from "./engine_element_attributes.js";
-export * from "./engine_element_loading.js";
 export * from "./engine_gameobject.js";
 export { Gizmos } from "./engine_gizmos.js"
 export * from "./engine_gltf.js";
@@ -79,4 +76,7 @@ export * from "./export/index.js";
 export * from "./extensions/index.js";
 export * from "./js-extensions/index.js";
 export * from "./webcomponents/api.js"
+export * from "./webcomponents/needle-engine.attributes.js";
+export * from "./webcomponents/needle-engine.js";
+export * from "./webcomponents/needle-engine.loading.js";
 export * from "./xr/api.js"

package/src/engine/engine_application.ts

@@ -1,6 +1,5 @@
 import { isDevEnvironment } from "./debug/index.js";
 import { Context } from "./engine_setup.js";
-import { NeedleXRSession } from "./engine_xr.js";
 
 export enum ApplicationEvents {
     Visible = "application-visible",
@@ -10,7 +9,11 @@ export enum ApplicationEvents {
 
 let userInteractionRegistered = false;
 const userInteractionCallbacks: Function[] = [];
-function onUserInteraction() {
+/**
+ * Invoked when the user interacts with the page (click, touch, keypress, etc) allowing to play media / audio / start XR
+ * @internal
+ */
+export function internalOnUserInputRegistered() {
     if (userInteractionRegistered) return;
     if (isDevEnvironment()) console.debug("User interaction registered: audio can now be played");
     userInteractionRegistered = true;
@@ -18,15 +21,12 @@ function onUserInteraction() {
     userInteractionCallbacks.length = 0;
     copy.forEach(cb => cb());
 }
-document.addEventListener('mousedown', onUserInteraction);
-document.addEventListener('pointerup', onUserInteraction);
-document.addEventListener('click', onUserInteraction);
-document.addEventListener('dragstart', onUserInteraction);
-document.addEventListener('touchend', onUserInteraction);
-document.addEventListener('keydown', onUserInteraction);
-NeedleXRSession.onXRSessionStart(() => {
-    onUserInteraction();
-})
+document.addEventListener('mousedown', internalOnUserInputRegistered);
+document.addEventListener('pointerup', internalOnUserInputRegistered);
+document.addEventListener('click', internalOnUserInputRegistered);
+document.addEventListener('dragstart', internalOnUserInputRegistered);
+document.addEventListener('touchend', internalOnUserInputRegistered);
+document.addEventListener('keydown', internalOnUserInputRegistered);
 
 /** 
  * The Application class can be used to mute audio globally, and to check if the application (canvas) is currently visible (it's tab is active and not minimized). 

package/src/engine/engine_context.ts

@@ -1019,12 +1019,21 @@ export class Context implements IContext {
 		}
 
 		this.clear();
+
+		const oldRenderer = this.renderer;
+		// We only need to create a new renderer if we don't have one yet
+		// We do prevent creating a new renderer here to avoid flickering when the context is created while the content is still being loaded. This can be the case where CSS transformations update the layout (e.g. scale() while loading + old canvas disposed but in the DOM layout.)
+		const needsNewRenderer = !oldRenderer || oldRenderer["isDisposed"] === true;
+
 		// stop the animation loop if its running during creation
 		// since we do not want to start enabling scripts etc before they are deserialized
-		if (this.isManagedExternally === false) {
+		if (this.isManagedExternally === false && (needsNewRenderer)) {
 			this.createNewRenderer();
-			this.renderer?.setAnimationLoop(null);
 		}
+		else {
+			this.lodsManager.setRenderer(this.renderer);
+		}
+		this.renderer?.setAnimationLoop(null);
 
 		await delay(1);
 

package/src/engine/engine_lifecycle_api.ts

@@ -38,7 +38,8 @@ export function onDestroy(cb: LifecycleMethod, opts?: LifecycleMethodOptions): (
 }
 
 /** Register a callback in the engine start event.   
- * This happens at the beginning of each frame   
+ * This happens once at the beginning of a frame   
+ * (e.g. once when the method is registered, after <needle-engine> is created or the src has changed)   
  * @param cb The callback to be called. Optionally return a function that will be called when the onStart callback is removed again
  * @returns A function that can be called to unregister the callback
  * @example

package/src/engine/webcomponents/buttons.ts

@@ -4,14 +4,26 @@ import { generateQRCode, isMobileDevice } from "../engine_utils.js";
 import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
 import { getIconElement } from "./icons.js";
 
-/** Use the ButtonsFactory to create buttons with icons and functionality   
- * Get access to the default buttons by using `ButtonsFactory.getOrCreate()`  
+/** 
+ * Use the ButtonsFactory to create buttons with icons and functionality   
+ * Get access to the default buttons by using `ButtonsFactory.instance`  
  * The factory will create the buttons if they don't exist yet, and return the existing ones if they do (this allows you to reparent or modify created buttons) 
  */
 export class ButtonsFactory {
 
     private static _instance?: ButtonsFactory;
-    /** Get access to the default HTML button factory.    
+
+    /** 
+     * Get access to the default HTML button factory.    
+     * Use this to get or create default Needle Engine buttons that can be added to your HTML UI  
+     * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
+     */
+    static get instance() {
+        return this.getOrCreate();
+    }
+
+    /** 
+     * Get access to the default HTML button factory.    
      * Use this to get or create default Needle Engine buttons that can be added to your HTML UI  
      * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
      */
@@ -37,7 +49,7 @@ export class ButtonsFactory {
     }
 
     /** Create a fullscreen button (or return the existing one if it already exists) */
-    createFullscreenButton(ctx: IContext) : HTMLButtonElement | null {
+    createFullscreenButton(ctx: IContext): HTMLButtonElement | null {
         if (this._fullscreenButton) {
             return this._fullscreenButton;
         }
@@ -59,7 +71,7 @@ export class ButtonsFactory {
             if (document.fullscreenElement) {
                 document.exitFullscreen();
             } else {
-                if("webkitRequestFullscreen" in ctx.domElement && typeof ctx.domElement["webkitRequestFullscreen"] === "function")
+                if ("webkitRequestFullscreen" in ctx.domElement && typeof ctx.domElement["webkitRequestFullscreen"] === "function")
                     ctx.domElement["webkitRequestFullscreen"]();
                 else if ("requestFullscreen" in ctx.domElement)
                     ctx.domElement.requestFullscreen();
@@ -141,6 +153,22 @@ export class ButtonsFactory {
      */
     get qrButton() { return this._qrButton; }
 
+    private _customQRButtonUrl: string | undefined;
+
+    /** Get or set the QR code button URL - this URL will open when scanning the QR code */
+    set qrButtonUrl(url: string) {
+        // make sure it's a URL
+        try {
+            new URL(url);
+            this._customQRButtonUrl = url;
+        } catch (e) {
+            console.warn(`[Needle] QR code button URL is not a valid URL '${url}'`);
+        }
+    }
+    get qrButtonUrl() {
+        return this._customQRButtonUrl || window.location.href;
+    }
+
     /** Create a QR code button (or return the existing one if it already exists)
      * The QR code button will show a QR code that can be scanned to open the current page on a phone  
      * The QR code will be generated with the current URL when the button is clicked
@@ -150,6 +178,7 @@ export class ButtonsFactory {
 
         if (this._qrButton) return this._qrButton;
 
+        const instance = this;
         const qrCodeButton = document.createElement("button");
         this._qrButton = qrCodeButton;
         qrCodeButton.innerText = "QR Code";
@@ -175,8 +204,8 @@ export class ButtonsFactory {
 
         qrCodeButton.addEventListener("click", () => {
             if (qrCodeContainer.parentNode) return hideQRCode();
-            if (window.location.href.includes("://localhost")) {
-                showBalloonWarning("To access your website from another device in the same local network you have to use the IP address instead of localhost.");
+            if (isDevEnvironment() && window.location.href.includes("://localhost")) {
+                showBalloonWarning("To access your website from another device in the same local network you have to use the IP address instead of localhost. The IP address is logged in your development server console when you start the server.");
             }
             showQRCode();
         });
@@ -233,7 +262,7 @@ export class ButtonsFactory {
         async function generateAndInsertQRCode() {
             const size = 200;
             const code = await generateQRCode({
-                text: window.location.href,
+                text: instance.qrButtonUrl,
                 width: size,
                 height: size,
             });

package/src/engine/{engine_element_overlay.ts → webcomponents/needle-engine.ar-overlay.ts}

@@ -1,5 +1,5 @@
-import { Context } from "./engine_setup.js";
-import { DeviceUtilities,getParam } from "./engine_utils.js";
+import { Context } from "../engine_setup.js";
+import { DeviceUtilities,getParam } from "../engine_utils.js";
 
 const debug = getParam("debugoverlay");
 export const arContainerClassName = "ar";

package/src/engine/{engine_element_extras.ts → webcomponents/needle-engine.extras.ts}

@@ -10,7 +10,7 @@ DO NOT IMPORT ENGINE_ELEMENT FROM HERE
  * Use the addAttributeChangeCallback utility methods to register callback events
  */
 export async function registerObservableAttribute(name: string) {
-    const { NeedleEngineHTMLElement } = await import("./engine_element.js");
+    const { NeedleEngineHTMLElement } = await import("./needle-engine.js");
     if (!NeedleEngineHTMLElement.observedAttributes.includes(name))
         NeedleEngineHTMLElement.observedAttributes.push(name);
 }

package/src/engine/{engine_element_loading.ts → webcomponents/needle-engine.loading.ts}

@@ -1,9 +1,9 @@
-import { needleLogoOnlySVG } from "./assets/index.js"
-import { isDevEnvironment, showBalloonWarning } from "./debug/index.js";
-import { hasCommercialLicense, hasProLicense, runtimeLicenseCheckPromise } from "./engine_license.js";
-import { Mathf } from "./engine_math.js";
-import { LoadingProgressArgs } from "./engine_setup.js";
-import { getParam } from "./engine_utils.js";
+import { needleLogoOnlySVG } from "../assets/index.js"
+import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
+import { hasCommercialLicense, hasProLicense, runtimeLicenseCheckPromise } from "../engine_license.js";
+import { Mathf } from "../engine_math.js";
+import { LoadingProgressArgs } from "../engine_setup.js";
+import { getParam } from "../engine_utils.js";
 
 const debug = getParam("debugloading");
 const debugRendering = getParam("debugloadingrendering");

package/src/engine/{engine_element.ts → webcomponents/needle-engine.ts}

@@ -1,21 +1,20 @@
 import { AgXToneMapping, Color, LinearToneMapping, NeutralToneMapping, NoToneMapping } from "three";
 
-import { registerLoader } from "../engine/engine_gltf.js";
-import { isDevEnvironment, showBalloonWarning } from "./debug/index.js";
-import { PUBLIC_KEY, VERSION } from "./engine_constants.js";
-import { NeedleEngineAttributes, TonemappingAttributeOptions } from "./engine_element_attributes.js";
-import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./engine_element_loading.js";
-import { arContainerClassName, AROverlayHandler } from "./engine_element_overlay.js";
-import { hasCommercialLicense } from "./engine_license.js";
-import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "./engine_loaders.js";
-import { NeedleLoader } from "./engine_scenetools.js";
-import { Context, ContextCreateArgs } from "./engine_setup.js";
-import { type INeedleEngineComponent, type LoadedModel } from "./engine_types.js";
-import { getParam } from "./engine_utils.js";
-import { RGBAColor } from "./js-extensions/RGBAColor.js";
-import { ensureFonts } from "./webcomponents/fonts.js";
-
-// 
+import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
+import { PUBLIC_KEY, VERSION } from "../engine_constants.js";
+import { registerLoader } from "../engine_gltf.js";
+import { hasCommercialLicense } from "../engine_license.js";
+import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.js";
+import { NeedleLoader } from "../engine_scenetools.js";
+import { Context, ContextCreateArgs } from "../engine_setup.js";
+import { type INeedleEngineComponent, type LoadedModel } from "../engine_types.js";
+import { getParam } from "../engine_utils.js";
+import { RGBAColor } from "../js-extensions/RGBAColor.js";
+import { ensureFonts } from "./fonts.js";
+import { arContainerClassName, AROverlayHandler } from "./needle-engine.ar-overlay.js";
+import { NeedleEngineAttributes, TonemappingAttributeOptions } from "./needle-engine.attributes.js";
+import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./needle-engine.loading.js";
+
 // registering loader here too to make sure it's imported when using engine via vanilla js
 registerLoader(NeedleLoader);
 

package/src/engine/xr/NeedleXRSession.ts

@@ -1,6 +1,7 @@
 import { Camera, Object3D, PerspectiveCamera, Quaternion, Vector3 } from "three";
 
 import { enableSpatialConsole, isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../debug/index.js";
+import { Application, internalOnUserInputRegistered } from "../engine_application.js";
 import { Context, FrameEvent } from "../engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine_context_registry.js";
 import { isDestroyed } from "../engine_gameobject.js";
@@ -161,8 +162,11 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, async cb =>
 });
 ContextRegistry.registerCallback(ContextEvent.ContextCreated, async cb => {
     contexts_loading.delete(cb.context);
+    const autostart = cb.context?.domElement.getAttribute("autostart") || null;
+    handleAutoStart(autostart);
 });
 
+
 function contextIsLoading() { return contexts_loading.size > 0; }
 function waitForContextLoadingFinished(): Promise<void> {
     return new Promise(res => {
@@ -187,6 +191,18 @@ if (DeviceUtilities.isDesktop() && isDevEnvironment()) {
     });
 }
 
+function handleAutoStart(value: string | null) {
+    if (!value) return;
+    switch (value?.toLowerCase()) {
+        case "ar":
+            Application.registerWaitForInteraction(() => {
+                // TODO: move WebARSessionRoot to core
+                NeedleXRSession.start("ar");
+            })
+            break;
+    }
+}
+
 // if (getParam("simulatewebxrloading")) {
 //     ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, async _cb => {
 //         await delay(3000);
@@ -375,7 +391,7 @@ export class NeedleXRSession implements INeedleXRSession {
             case "immersive-ar":
                 const arFeatures = ['anchors', 'local-floor', 'layers', 'dom-overlay', 'hit-test', 'unbounded'];
                 // Don't request handtracking by default on VisionOS
-                if (!DeviceUtilities.isVisionOS()) 
+                if (!DeviceUtilities.isVisionOS())
                     arFeatures.push('hand-tracking');
                 return {
                     optionalFeatures: arFeatures,
@@ -701,6 +717,11 @@ export class NeedleXRSession implements INeedleXRSession {
      * 
     */
     get rigScale() {
+        // const ar_scaleValue = this.context.domElement.getAttribute("ar-scale");
+        // if (ar_scaleValue) {
+        //     const scale = parseFloat(ar_scaleValue);
+        //     if (!isNaN(scale)) return scale;
+        // }
         if (!this._rigs[0]) return 1;
         if (this._lastRigScaleUpdate !== this.context.time.frame) {
             this._lastRigScaleUpdate = this.context.time.frame;
@@ -708,6 +729,7 @@ export class NeedleXRSession implements INeedleXRSession {
         }
         return this._rigScale;
     }
+
     /** add a rig to the available XR rigs - if it's priority is higher than the currently active rig it will be enabled */
     addRig(rig: IXRRig) {
         const i = this._rigs.indexOf(rig);
@@ -1004,7 +1026,7 @@ export class NeedleXRSession implements INeedleXRSession {
             console.debug("Controller already exists for input source", index);
             return;
         }
-        else if(this._newControllers.find(c => c.inputSource === newInputSource)) {
+        else if (this._newControllers.find(c => c.inputSource === newInputSource)) {
             console.debug("Controller already registered for input source", index);
             return;
         }
@@ -1197,6 +1219,8 @@ export class NeedleXRSession implements INeedleXRSession {
 
             invokeXRSessionStart({ session: this });
 
+            internalOnUserInputRegistered();
+
             for (const listener of NeedleXRSession._xrStartListeners) {
                 listener(args);
             }

package/src/engine-components/CameraUtils.ts

@@ -4,9 +4,9 @@ import { getCameraController } from "../engine/engine_camera.js";
 import { addNewComponent, getOrAddComponent } from "../engine/engine_components.js";
 import { Context } from "../engine/engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
-import { NeedleEngineHTMLElement } from "../engine/engine_element.js";
 import type { ICamera, IContext } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
+import { NeedleEngineHTMLElement } from "../engine/webcomponents/needle-engine.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { OrbitControls } from "./OrbitControls.js";
 import { EnvironmentScene } from "./utils/EnvironmentScene.js";

package/src/engine-components/SceneSwitcher.ts

@@ -1,12 +1,12 @@
 import { EquirectangularReflectionMapping, Object3D, Scene, Texture } from "three";
 
 import { AssetReference } from "../engine/engine_addressables.js";
-import { registerObservableAttribute } from "../engine/engine_element_extras.js";
 import { destroy } from "../engine/engine_gameobject.js";
 import { InputEvents } from "../engine/engine_input.js";
 import { isLocalNetwork } from "../engine/engine_networking_utils.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { getParam, setParamWithoutReload } from "../engine/engine_utils.js";
+import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { EventList } from "./EventList.js";
 

package/src/engine-components/Skybox.ts

@@ -6,11 +6,11 @@ import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
 import { disposeObjectResources, setDisposable } from "../engine/engine_assetdatabase.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
-import { registerObservableAttribute } from "../engine/engine_element_extras.js";
 import { syncField } from "../engine/engine_networking_auto.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
 import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback } from "../engine/engine_utils.js";
+import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
 

package/src/engine-components/ui/EventSystem.ts

@@ -86,6 +86,7 @@ export class EventSystem extends Behaviour {
         // We only want ONE eventsystem on the root scene
         // as long as this component is not implemented in core we need to check this here
         if (this.gameObject as Object3D !== this.context.scene) {
+            console.debug(`[Needle Engine] EventSystem is only allowed on the scene root. Disabling EventSystem on '${this.gameObject.name}'`);
             this.enabled = false;
         }
     }

package/src/needle-engine.ts

@@ -1,4 +1,4 @@
-import "./engine/engine_element.js";
+import "./engine/webcomponents/needle-engine.js";
 import "./engine/engine_setup.js";
 import "./engine/engine_audio.js";
 export * from "./engine/api.js";