@needle-tools/engine 4.11.4 → 4.11.5-next.4201116

package/src/engine/engine_physics_rapier.ts

@@ -67,7 +67,7 @@ export class RapierPhysics implements IPhysicsEngine {
     debugRenderRaycasts: boolean = false;
 
     removeBody(obj: IComponent) {
-        if(debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
+        if (debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
         if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
@@ -817,7 +817,16 @@ export class RapierPhysics implements IPhysicsEngine {
         return component;
     }
 
-    private createCollider(collider: ICollider, desc: ColliderDesc) {
+    /**
+     * Creates a collider in the physics world.
+     * 
+     * @param collider - The collider component.
+     * @param desc - The collider description.
+     * @returns The created collider.
+     * 
+     * @throws Will throw an error if the physics world is not initialized. Make sure to call `initialize()` before creating colliders.  
+     */
+    createCollider(collider: ICollider, desc: ColliderDesc) {
         if (!this.world) throw new Error("Physics world not initialized");
         const matrix = this._tempMatrix;
         let rigidBody: RigidBody | undefined = undefined;

package/src/engine/engine_scenelighting.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, LightProbe, SphericalHarmonics3, SRGBColorSpace,Texture, Vector4, WebGLCubeRenderTarget } from "three";
+import { EquirectangularReflectionMapping, LightProbe, Source, SphericalHarmonics3, SRGBColorSpace, Texture, Vector4, WebGLCubeRenderTarget } from "three";
 
 import { AssetReference } from "./engine_addressables.js";
 import { Context } from "./engine_setup.js";
@@ -44,9 +44,16 @@ export class RendererData {
         this.context.pre_update_callbacks.push(this.preUpdate.bind(this))
     }
 
+    /**
+     * The id of the currently active scene light settings (source identifier).
+     */
     private _currentLightSettingsId?: SourceIdentifier;
     private _sceneLightSettings?: Map<SourceIdentifier, SceneLightSettings>;
 
+    get currentLightSettingsId(): SourceIdentifier | undefined {
+        return this._currentLightSettingsId;
+    }
+
     private preUpdate() {
         const time = this.context.time;
         this._timevec4.x = time.time;
@@ -82,11 +89,11 @@ export class RendererData {
 
     /** set the scene lighting from a specific scene. Will disable any previously enabled lighting settings */
     enable(sourceId: SourceIdentifier | AssetReference) {
-        if(sourceId instanceof AssetReference)
+        if (sourceId instanceof AssetReference)
             sourceId = sourceId.url;
         const settings = this._sceneLightSettings?.get(sourceId);
         if (!settings) {
-            if(debug) console.warn("No light settings found for", sourceId);
+            if (debug) console.warn("No light settings found for", sourceId);
             return false;
         }
         if (debug) console.log("Enable scene light settings", sourceId, settings);
@@ -100,7 +107,7 @@ export class RendererData {
 
     /** disable the lighting of a specific scene, will only have any effect if it is currently active */
     disable(sourceId: SourceIdentifier | AssetReference) {
-        if(sourceId instanceof AssetReference)
+        if (sourceId instanceof AssetReference)
             sourceId = sourceId.url;
         if (sourceId === null || sourceId === undefined) return false;
         const settings = this._sceneLightSettings?.get(sourceId);
@@ -112,8 +119,22 @@ export class RendererData {
         return true;
     }
 
-    /** Disables the currently active scene lighting (if any), returns the id of the previously active lighting */
-    disableCurrent() : SourceIdentifier | null {
+    /**
+     * Enables the currently active scene lighting (if any), returns the id of the enabled lighting.
+     * @returns The id of the enabled lighting, or null if no lighting is currently active.
+     */
+    enableCurrent(): SourceIdentifier | null {
+        if (this._currentLightSettingsId) {
+            this.enable(this._currentLightSettingsId);
+            return this._currentLightSettingsId ?? null;
+        }
+        return null;
+    }
+
+    /** Disables the currently active scene lighting (if any), returns the id of the previously active lighting
+     * @returns The id of the previously active lighting, or null if no lighting was active.
+     */
+    disableCurrent(): SourceIdentifier | null {
         if (this._currentLightSettingsId) {
             const prev = this._currentLightSettingsId;
             this.disable(this._currentLightSettingsId);
@@ -162,7 +183,7 @@ export class RendererData {
     private __currentReflectionId: SourceIdentifier | null = null;
 
     /** @internal */
-    internalEnableReflection(sourceId: SourceIdentifier) : Texture | null {
+    internalEnableReflection(sourceId: SourceIdentifier): Texture | null {
         this.__currentReflectionId = sourceId;
         const settings = this._sceneLightSettings?.get(sourceId);
 
@@ -181,6 +202,7 @@ export class RendererData {
                     const tex = existing.Source;
                     tex.mapping = EquirectangularReflectionMapping;
                     scene.environment = tex;
+                    scene.environmentIntensity = this.environmentIntensity || 1;
                     return tex;
                 }
                 else if (debug) console.warn("Could not find reflection for source", sourceId);
@@ -216,7 +238,7 @@ export class RendererData {
     /** @internal */
     internalDisableReflection(sourceId?: SourceIdentifier) {
         if (sourceId && sourceId !== this.__currentReflectionId) {
-            if(debug) console.log("Not disabling reflection for", sourceId, "because it is not the current light settings id", this.__currentReflectionId)
+            if (debug) console.log("Not disabling reflection for", sourceId, "because it is not the current light settings id", this.__currentReflectionId)
             return;
         }
         if (debug) console.log("Disable reflection", sourceId)

package/src/engine/engine_texture.ts

@@ -1,6 +1,6 @@
 import type { EffectComposer } from "postprocessing";
 import { Camera, Mesh, Object3D, Texture, WebGLRenderer, WebGLRenderTarget } from "three";
-import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
+import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 
 import { findResourceUsers } from "./engine_assetdatabase.js";
 

package/src/engine/engine_tonemapping.ts

@@ -1,7 +1,7 @@
 import { ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, NoToneMapping, ShaderChunk, ToneMapping } from "three";
 
 import { isDevEnvironment } from "./debug/index.js";
-import type { Context } from "./engine_setup";
+import type { Context } from "./engine_setup.js";
 
 let patchedTonemapping = false;
 export function patchTonemapping(_ctx?: Context) {

package/src/engine/engine_types.ts

@@ -566,6 +566,23 @@ export interface IPhysicsEngine {
      */
     boxOverlap(point: Vector3, size: Vector3, rotation: Vector4Like | null): Array<ShapeOverlapResult>;
 
+    /**
+     * Creates a collider in the physics world.
+     * 
+     * @param collider - The collider component.
+     * @param desc - The collider description.
+     * @returns The created collider.
+     * 
+     * @throws Will throw an error if the physics world is not initialized. Make sure to call `initialize()` before creating colliders.
+     * 
+     * @example
+     * ```typescript
+     * const boxColliderDesc = NEEDLE_ENGINE_MODULES.RAPIER_PHYSICS.MODULE.ColliderDesc.cuboid(1, 1, 1);
+     * const collider = physicsEngine.createCollider(myBoxColliderComponent, boxColliderDesc);
+     * ```
+     */
+    createCollider(collider: ICollider, desc: any): any;
+
     // Collider methods
     /**
      * Adds a sphere collider to the physics world

package/src/engine/engine_typestore.ts

@@ -7,6 +7,7 @@ declare type Type = new (...args: any[]) => any;
 class _TypeStore {
 
     private _types: Map<string, Type> = new Map();
+    private _reverseTypes: Map<Type, string> = new Map();
 
     constructor() {
         if (debug) console.warn("TypeStore: Created", this);
@@ -18,8 +19,10 @@ class _TypeStore {
     public add(key: string, type: Type) {
         if (debug) console.warn("ADD TYPE", key);
         const existing = this._types.get(key);
-        if (!existing)
+        if (!existing) {
             this._types.set(key, type);
+            this._reverseTypes.set(type, key);
+        }
         else {
             if (debug) {
                 if (existing !== type) {
@@ -40,11 +43,7 @@ class _TypeStore {
      * @returns the key/name for the given type if registered
      */
     public getKey(type: Type): string | null {
-        for (const [key, value] of this._types) {
-            if (value === type)
-                return key;
-        }
-        return null;
+        return this._reverseTypes.get(type) || null;
     }
 }
 

package/src/engine/engine_utils_qrcode.ts

@@ -166,7 +166,7 @@ async function internalRenderQRCodeOverlays(canvas: HTMLCanvasElement, args: { s
         haveLogo = await new Promise((resolve, _reject) => {
             image.onload = () => resolve(true);
             image.onerror = (err) => {
-                let errorUrl = logoSrc !== needleLogoOnlySVG ? "'" + logoSrc + "'" : null;
+                const errorUrl = logoSrc !== needleLogoOnlySVG ? "'" + logoSrc + "'" : null;
                 console.error("[QR Code] Error loading logo image for QR code", errorUrl, isDevEnvironment() ? err : "");
                 resolve(false);
             };

package/src/engine/extensions/NEEDLE_components.ts

@@ -2,12 +2,13 @@ import { Object3D } from "three";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { type GLTF, type GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
 
+import { isDevEnvironment } from "../debug/debug.js";
 import { builtinComponentKeyName } from "../engine_constants.js";
 import { debugExtension } from "../engine_default_parameters.js";
 import { getLoader } from "../engine_gltf.js";
 import { type NodeToObjectMap, type ObjectToNodeMap, SerializationContext } from "../engine_serialization_core.js";
 import { apply } from "../js-extensions/index.js";
-import { maskGltfAssociation,resolveReferences } from "./extension_utils.js";
+import { maskGltfAssociation, resolveReferences } from "./extension_utils.js";
 
 export const debug = debugExtension
 const componentsArrayExportKey = "$___Export_Components";
@@ -15,7 +16,7 @@ const componentsArrayExportKey = "$___Export_Components";
 export const EXTENSION_NAME = "NEEDLE_components";
 
 class ExtensionData {
-    [builtinComponentKeyName]?: Array<object | null>
+    [builtinComponentKeyName]?: Array<Record<string, any> | null>
 }
 
 class ExportData {
@@ -35,14 +36,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
     get name(): string {
         return EXTENSION_NAME;
     }
-
-    // import
-    parser?: GLTFParser;
-    nodeToObjectMap: NodeToObjectMap = {};
-    /** The loaded gltf */
-    gltf: GLTF | null = null;
-
-    // export
+    // #region export
     exportContext!: { [nodeIndex: number]: ExportData };
     objectToNodeMap: ObjectToNodeMap = {};
     context!: SerializationContext;
@@ -112,7 +106,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
 
     writeNode(node: Object3D, nodeDef) {
         const nodeIndex = this.writer.json.nodes.length;
-        if (debug) 
+        if (debug)
             console.log(node.name, nodeIndex, node.uuid);
         const context = new ExportData(node, nodeIndex, nodeDef);
         this.exportContext[nodeIndex] = context;
@@ -158,8 +152,13 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
 
 
     // -------------------------------------
-    // LOADING 
-    // called by GLTFLoader
+    // #region import 
+    parser?: GLTFParser;
+    nodeToObjectMap: NodeToObjectMap = {};
+    /** The loaded gltf */
+    gltf: GLTF | null = null;
+
+
     beforeRoot() {
         if (debug)
             console.log("BEGIN LOAD");
@@ -167,7 +166,6 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
         return null;
     }
 
-    // called by GLTFLoader
     async afterRoot(result: GLTF): Promise<void> {
         this.gltf = result;
 
@@ -175,8 +173,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
         const ext = parser?.extensions;
         if (!ext) return;
         const hasExtension = ext[this.name];
-        if (debug)
-            console.log("After root", result, this.parser, ext);
+        if (debug) console.log("After root", result, this.parser, ext);
 
         const loadComponents: Array<Promise<void>> = [];
         if (hasExtension === true) {
@@ -204,7 +201,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
 
                     apply(obj);
 
-                    loadComponents.push(this.createComponents(obj, data));
+                    loadComponents.push(this.createComponents(result, node, obj, data));
                 }
             }
         }
@@ -220,7 +217,7 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
         }
     }
 
-    private async createComponents(obj: Object3D, data: ExtensionData) {
+    private async createComponents(result: GLTF, node: Node, obj: Object3D, data: ExtensionData) {
         if (!data) return;
         const componentData = data[builtinComponentKeyName];
         if (componentData) {
@@ -228,20 +225,42 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
             if (debug)
                 console.log(obj.name, componentData);
             for (const i in componentData) {
-                const serializedData = componentData[i];
-                if (debug)
-                    console.log("Serialized data", JSON.parse(JSON.stringify(serializedData)));
+                const data = componentData[i];
+
+                if (debug) console.log("Serialized data", JSON.parse(JSON.stringify(data)));
+
+                // Fix for https://linear.app/needle/issue/NE-6779/blender-export-has-missing-sharedmaterials
+                if (data?.name === "MeshRenderer" || data?.name === "SkinnedMeshRenderer") {
+                    if (!data.sharedMaterials) {
+                        let success = false;
+                        if ("mesh" in node) {
+                            const meshIndex = node.mesh;
+                            if (typeof meshIndex === "number" && result.parser) {
+                                const meshDef = result.parser.json.meshes?.[meshIndex];
+                                if (meshDef?.primitives) {
+                                    data.sharedMaterials =  meshDef.primitives.map(prim => {
+                                        return "/materials/" + (prim.material ?? 0);
+                                    });
+                                    success = true;
+                                }
+                            }
+                        }
+                        if(!success && (debug || isDevEnvironment())) {
+                            console.warn(`[NEEDLE_components] Component '${data.name}' on object '${obj.name}' is not added to a mesh or failed to retrieve materials from glTF.`);
+                        }
+                    }
+                }
 
-                if (serializedData && this.parser) {
+                if (data && this.parser) {
                     tasks.push(
-                        resolveReferences(this.parser, serializedData)
-                            .catch(e => console.error(`Error while resolving references (see console for details)\n`, e, obj, serializedData))
+                        resolveReferences(this.parser, data)
+                            .catch(e => console.error(`Error while resolving references (see console for details)\n`, e, obj, data))
                     );
                 }
 
                 obj.userData = obj.userData || {};
                 obj.userData[builtinComponentKeyName] = obj.userData[builtinComponentKeyName] || [];
-                obj.userData[builtinComponentKeyName].push(serializedData);
+                obj.userData[builtinComponentKeyName].push(data);
             }
             await Promise.all(tasks).catch((e) => {
                 console.error("Error while loading components", e);
@@ -266,4 +285,6 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
     //     // console.log(components);
     //     return null;
     // }
-}
+}
+
+

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -95,8 +95,8 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                     }
                     const results = await PromiseAllWithErrors(dependencies);
                     if (results?.anyFailed) {
-                        if (isDevEnvironment())
-                            console.error("Failed to load lightmap extension", results);
+                        if (isDevEnvironment() || debug)
+                            console.error("[NEEDLE_lightmaps]Error during extension loading:", results);
                     }
                     resolve();
                 });

package/src/engine/extensions/extensions.ts

@@ -92,18 +92,24 @@ class PointerResolver {
     }
 }
 
-export async function registerExtensions(loader: GLTFLoader, context: Context, url: string) {
+export async function registerExtensions(loader: GLTFLoader, context: Context, url: string, sourceId: SourceIdentifier) {
 
     // Make sure to remove any url parameters from the sourceId (because the source id in the renderer does not have a ?v=xxx so it will not be able to register the resolved lightmap otherwise)
     const idEnd = url.indexOf("?");
     if (idEnd >= 0) url = url.substring(0, idEnd);
+    if (!sourceId) {
+        sourceId = url;
+    }
+    if (sourceId.startsWith("blob:") || sourceId.startsWith("data:")) {
+        console.debug("[GLTFLoader] Suspicious sourceId detected");
+    }
 
     loader.register(p => new NEEDLE_gameobject_data(p));
     loader.register(p => new NEEDLE_persistent_assets(p));
-    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, url));
-    loader.register(p => new NEEDLE_lighting_settings(p, url, context));
-    loader.register(p => new NEEDLE_techniques_webgl(p, url));
-    loader.register(p => new NEEDLE_render_objects(p, url));
+    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, sourceId));
+    loader.register(p => new NEEDLE_lighting_settings(p, sourceId, context));
+    loader.register(p => new NEEDLE_techniques_webgl(p, sourceId));
+    loader.register(p => new NEEDLE_render_objects(p, sourceId));
     loader.register(p => new NEEDLE_progressive(p));
     loader.register(p => new EXT_texture_exr(p));
     if (isResourceTrackingEnabled()) loader.register(p => new InternalUsageTrackerPlugin(p))

package/src/engine/webcomponents/buttons.ts

@@ -8,7 +8,9 @@ import { getIconElement } from "./icons.js";
  * 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) 
- */
+ * 
+ * @category HTML
+*/
 export class ButtonsFactory {
 
     private static _instance?: ButtonsFactory;

package/src/engine/webcomponents/logo-element.ts

@@ -2,6 +2,16 @@ import { madeWithNeedleSVG, needleLogoOnlySVG, needleLogoSVG } from "../assets/i
 
 const elementName = "needle-logo-element";
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "needle-logo-element": NeedleLogoElement;
+    }
+}
+
+/**
+ * Needle logo web component used in the hosting UI (small, compact logo or full)
+ * @element needle-logo-element
+ */
 export class NeedleLogoElement extends HTMLElement {
 
     static get elementName() { return elementName; }
@@ -83,10 +93,12 @@ export class NeedleLogoElement extends HTMLElement {
     private readonly wrapper: HTMLDivElement;
     private readonly logoElement: HTMLImageElement;
 
+    /** Show or hide the logo element (used by the menu) */
     setLogoVisible(val: boolean) {
         this.logoElement.style.display = val ? "block" : "none";
     }
 
+    /** Switch the logo between full and compact versions */
     setType(type: "full" | "compact") {
         if (type === "full") {
             this.logoElement.src = needleLogoSVG;

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -9,6 +9,12 @@ import { getIconElement } from "../icons.js";
 import { NeedleLogoElement } from "../logo-element.js";
 import { NeedleSpatialMenu } from "./needle-menu-spatial.js";
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "needle-logo-element": NeedleLogoElement;
+    }
+}
+
 const elementName = "needle-menu";
 const debug = getParam("debugmenu");
 const debugNonCommercial = getParam("debugnoncommercial");
@@ -48,11 +54,13 @@ export declare type ButtonInfo = {
 }
 
 /**
- * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.
+ * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.  
+ * 
  * The menu can be used to add buttons to the needle engine that can be used to interact with the application.  
- * The menu can be positioned at the top or the bottom of the needle engine webcomponent  
  * 
- * @example Create a button using the NeedleMenu
+ * The menu can be positioned at the top or the bottom of the <needle-engine> webcomponent.
+ * 
+ * @example Add a new button using the NeedleMenu
  * ```typescript
  * onStart(ctx => {
  *   ctx.menu.appendChild({ 
@@ -76,6 +84,20 @@ export declare type ButtonInfo = {
  *    }
  * }, "*");
  * ```
+ * 
+ * @example Access the menu from a component
+ * ```typescript
+ * import { Behaviour, OnStart } from '@needle-tools/engine';
+ * 
+ * export class MyComponent extends Behaviour {
+ * 
+ *   start() {
+ *    this.context.menu.appendChild({ ... });
+ *   }
+ * }
+ * ```
+ * 
+ * @category HTML
  */
 export class NeedleMenu {
     private readonly _context: Context;
@@ -248,6 +270,16 @@ export class NeedleMenu {
 
 }
 
+/**
+ * `<needle-menu>` web component — lightweight menu used by Needle Engine.
+ *
+ * This element is intended as an internal UI primitive for hosting application
+ * menus and buttons. Use the higher-level `NeedleMenu` API from the engine
+ * code to manipulate it programmatically. Public DOM-facing methods are
+ * documented (appendChild / append / prepend / setPosition / setVisible).
+ *
+ * @element needle-menu
+ */
 export class NeedleMenuElement extends HTMLElement {
 
     static create() {
@@ -835,6 +867,7 @@ export class NeedleMenuElement extends HTMLElement {
         }
     }
 
+    /** @private user preference for logo visibility */
     private _userRequestedLogoVisible?: boolean = undefined;
     showNeedleLogo(visible: boolean) {
         this._userRequestedLogoVisible = visible;
@@ -875,6 +908,7 @@ export class NeedleMenuElement extends HTMLElement {
         this.root.classList.add(position);
     }
 
+    /** @private user preference for menu visibility */
     private _userRequestedMenuVisible?: boolean = undefined;
     setVisible(visible: boolean) {
         this._userRequestedMenuVisible = visible;
@@ -889,14 +923,17 @@ export class NeedleMenuElement extends HTMLElement {
     }
 
     // private _root: ShadowRoot | null = null;
+    /** @private root container element inside shadow DOM */
     private readonly root: HTMLDivElement;
-    /** wraps the whole content */
+    /** @private wraps the whole content (internal layout) */
     private readonly wrapper: HTMLDivElement;
-    /** contains the buttons and dynamic elements */
+    /** @private contains the buttons and dynamic elements */
     private readonly options: HTMLDivElement;
-    /** contains the needle-logo html element */
+    /** @private contains the needle-logo html element */
     private readonly logoContainer: HTMLDivElement;
+    /** @private compact menu button element */
     private readonly compactMenuButton: HTMLButtonElement;
+    /** @private foldout container used in compact mode */
     private readonly foldout: HTMLDivElement;
 
     append(...nodes: (string | Node)[]): void {
@@ -909,6 +946,27 @@ export class NeedleMenuElement extends HTMLElement {
             }
         }
     }
+    /**
+     * Appends a button or HTML element to the needle-menu options.
+     * @param node a Node or ButtonInfo to create a button from
+     * @returns the appended Node
+     * 
+     * @example Append a button
+     * ```javascript
+     * const button = document.createElement("button");
+     * button.textContent = "Click Me";
+     * needleMenu.appendChild(button);
+     * ```
+     * @example Append a button using ButtonInfo
+     * ```javascript
+     * needleMenu.appendChild({
+     *    label: "Click Me",
+     *    onClick: () => { alert("Button clicked!"); },
+     *    icon: "info",
+     *    title: "This is a button",
+     * });
+     * ```
+     */
     appendChild<T extends Node>(node: T | ButtonInfo): T {
 
         if (!(node instanceof Node)) {

package/src/engine/webcomponents/needle-button.ts

@@ -2,6 +2,12 @@ import { isDevEnvironment } from "../debug/index.js";
 import { iconFontUrl, loadFont } from "./fonts.js";
 import { WebXRButtonFactory } from "./WebXRButtons.js";
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "needle-button": NeedleButtonElement;
+    }
+}
+
 const htmlTagName = "needle-button";
 const isDev = isDevEnvironment();
 

package/src/engine/webcomponents/needle-engine.attributes.ts

@@ -28,6 +28,14 @@ type MainAttributes = {
 
     addEventListener?(event: "ready", callback: (event: CustomEvent) => void): void;
     addEventListener?(event: "error", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "loadstart", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "progress", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "loadfinished", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "xr-session-ended", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "enter-ar", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "exit-ar", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "enter-vr", callback: (event: CustomEvent) => void): void;
+    addEventListener?(event: "exit-vr", callback: (event: CustomEvent) => void): void;
 }
 
 type LoadingAttributes = {
@@ -47,7 +55,7 @@ type SkyboxAttributes = {
     /** @deprecated. Use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "skybox-image"?: string,
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
-    "background-image"?: string, 
+    "background-image"?: string,
     /** Blurs the background image (if any) - value between 0 and 1  
      * 0: no blur
      * 1: full blur
@@ -69,16 +77,17 @@ type RenderingAttributes = {
     "transparent"?: boolean,
     "contactshadows"?: boolean,
     "tone-mapping"?: TonemappingAttributeOptions,
+    "tonemapping"?: TonemappingAttributeOptions,
     "tone-mapping-exposure"?: number,
 }
 
 /**
- * Available attributes for the `<needle-engine>` web component
+ * Available attributes for the `<needle-engine>` web component.
  * @inheritdoc
  */
 export type NeedleEngineAttributes =
     MainAttributes
-    & Partial<Omit<HTMLElement, "style">>
+    // & Partial<Omit<HTMLElement, "style">>
     & LoadingAttributes
     & SkyboxAttributes
     & RenderingAttributes