@needle-tools/engine 4.10.0-next.4f9d92a → 4.10.0-next.870425c

package/src/engine/engine_gizmos.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
+import { AxesHelper, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Color, type ColorRepresentation, CylinderGeometry, EdgesGeometry, Line, LineBasicMaterial, LineSegments, Material,Matrix4, Mesh, MeshBasicMaterial, Object3D, Quaternion, SphereGeometry, Vector3 } from 'three';
 import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
 import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
 
@@ -8,6 +8,7 @@ import { getTempVector, getWorldPosition, lookAtObject, setWorldPositionXYZ } fr
 import type { Vec3, Vec4 } from './engine_types.js';
 import { getParam } from './engine_utils.js';
 import { NeedleXRSession } from './engine_xr.js';
+import { RGBAColor } from './js-extensions/RGBAColor.js';
 
 const _tmp = new Vector3();
 const _tmp2 = new Vector3();
@@ -21,7 +22,7 @@ const circleSegments: number = 32;
 export type LabelHandle = {
     setText(str: string);
 }
-declare type ColorWithAlpha = Color & { a: number };
+type GizmoColor = ColorRepresentation | (Color & { a: number }) | RGBAColor;
 
 /** Gizmos are temporary objects that are drawn in the scene for debugging or visualization purposes  
  * They are automatically removed after a given duration and cached internally to reduce overhead.  
@@ -62,7 +63,7 @@ export class Gizmos {
      * @param parent the parent object to attach the label to. If no parent is provided the label will be attached to the scene
      * @returns a handle to the label that can be used to update the text
      */
-    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha, parent?: Object3D,) {
+    static DrawLabel(position: Vec3, text: string, size: number = .05, duration: number = 0, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor, parent?: Object3D,) {
         if (!Gizmos.enabled) return null;
         if (!color) color = defaultColor;
         const rigScale = NeedleXRSession.active?.rigScale ?? 1;
@@ -82,7 +83,7 @@ export class Gizmos {
      * @param duration the duration in seconds the ray will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the ray will be rendered with depth test
      */
-    static DrawRay(origin: Vec3, dir: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawRay(origin: Vec3, dir: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -90,9 +91,10 @@ export class Gizmos {
         _tmp.set(dir.x, dir.y, dir.z).multiplyScalar(999999999);
         positions.setXYZ(1, origin.x + _tmp.x, origin.y + _tmp.y, origin.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -104,7 +106,7 @@ export class Gizmos {
      * @param depthTest if true the line will be rendered with depth test
      * @param lengthFactor the length of the line. Default is 1
      */
-    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
+    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
@@ -120,10 +122,9 @@ export class Gizmos {
         }
         positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
-
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -134,17 +135,17 @@ export class Gizmos {
      * @param duration the duration in seconds the line will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the line will be rendered with depth test
      */
-    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawLine(pt0: Vec3, pt1: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getLine(duration);
         const positions = obj.geometry.getAttribute("position");
         positions.setXYZ(0, pt0.x, pt0.y, pt0.z);
         positions.setXYZ(1, pt1.x, pt1.y, pt1.z);
         positions.needsUpdate = true;
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -162,10 +163,10 @@ export class Gizmos {
         obj.position.set(pt0.x, pt0.y, pt0.z);
         obj.scale.set(radius, radius, radius);
         obj.quaternion.setFromUnitVectors(this._up, _tmp.set(normal.x, normal.y, normal.z).normalize());
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -176,14 +177,14 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, true);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -194,13 +195,13 @@ export class Gizmos {
      * @param duration the duration in seconds the sphere will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the sphere will be rendered with depth test
      */
-    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawSphere(center: Vec3, radius: number, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getSphere(radius, duration, false);
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["depthWrite"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -212,18 +213,18 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame
      * @param depthTest if true the box will be rendered with depth test
      */
-    static DrawWireBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion|undefined = undefined) {
+    static DrawWireBox(center: Vec3, size: Vec3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true, rotation: Quaternion | undefined = undefined) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.set(center.x, center.y, center.z);
         obj.scale.set(size.x, size.y, size.z);
-        if(rotation) obj.quaternion.copy(rotation);
+        if (rotation) obj.quaternion.copy(rotation);
         else obj.quaternion.identity();
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     /**
@@ -233,16 +234,16 @@ export class Gizmos {
      * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame. Default: 0
      * @param depthTest if true the box will be rendered with depth test. Default: true
      */
-    static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+    static DrawWireBox3(box: Box3, color: GizmoColor = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;
         const obj = Internal.getBox(duration);
         obj.position.copy(box.getCenter(_tmp));
         obj.scale.copy(box.getSize(_tmp));
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
         obj.material["depthWrite"] = false;
         obj.material["fog"] = false;
+        applyGizmoColor(obj.material, color);
     }
 
     private static _up = new Vector3(0, 1, 0);
@@ -263,9 +264,9 @@ export class Gizmos {
         const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
         const scale = dist * 0.1;
         obj.scale.set(scale, scale, scale);
-        obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = wireframe;
+        applyGizmoColor(obj.material, color);
         this.DrawLine(pt0, pt1, color, duration, depthTest);
     }
 
@@ -296,9 +297,9 @@ export class Gizmos {
         }
         mesh.matrixAutoUpdate = false;
         mesh.matrixWorldAutoUpdate = false;
-        mesh.material["color"].set(options.color ?? defaultColor);
         mesh.material["depthTest"] = options.depthTest ?? true;
         mesh.material["wireframe"] = true;
+        applyGizmoColor(mesh.material, options.color ?? defaultColor);
     }
 }
 
@@ -316,6 +317,19 @@ export function CreateWireCube(col: ColorRepresentation | null = null): LineSegm
 }
 
 
+function applyGizmoColor(material: Material | Material[], color: GizmoColor) {
+    if (Array.isArray(material)) {
+        for (const mat of material) {
+            applyGizmoColor(mat, color);
+        }
+        return;
+    }
+    const alpha = (color instanceof RGBAColor) ? color.a : 1.0;
+    material["color"].set(color);
+    material["opacity"] = alpha;
+    material["transparent"] = alpha < 1.0;
+}
+
 
 const $cacheSymbol = Symbol("GizmoCache");
 class Internal {
@@ -335,7 +349,7 @@ class Internal {
         }
     }
 
-    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha): Text & LabelHandle {
+    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | GizmoColor): Text & LabelHandle {
         this.ensureFont();
         let element = this.textLabelCache.pop();
 

package/src/engine/engine_license.ts

@@ -342,7 +342,7 @@ async function sendUsageMessageToAnalyticsBackend(context: IContext) {
     if (window.crossOriginIsolated) return;
 
     const licenseType = NEEDLE_ENGINE_LICENSE_TYPE;
-    if (licenseType === "pro") {
+    if (licenseType === "pro" || licenseType === "enterprise") {
         const attribute = context?.domElement?.getAttribute("no-telemetry");
         if (attribute === "" || attribute === "true" || attribute === "1") {
             if (debug) console.debug("Telemetry is disabled");

package/src/engine/engine_lightdata.ts

@@ -1,7 +1,7 @@
 import { ShaderChunk, Texture, UniformsLib, Vector4 } from "three";
 
 import { setDisposable } from "./engine_assetdatabase.js";
-import { Context } from "./engine_setup.js";
+import type { Context } from "./engine_setup.js";
 import type { SourceIdentifier } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
 import { LightmapType } from "./extensions/NEEDLE_lightmaps.js";
@@ -27,22 +27,22 @@ export interface ILightDataRegistry {
 
 export class LightDataRegistry implements ILightDataRegistry {
 
-    private _context: Context;
-    private _lightmaps: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
+    private readonly context: Context;
+    private readonly map: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
 
     clear() {
-        this._lightmaps.clear();
+        this.map.clear();
     }
 
     constructor(context: Context) {
-        this._context = context;
+        this.context = context;
     }
 
     registerTexture(sourceId: SourceIdentifier, type: LightmapType, tex: Texture, index: number) {
         if (debugLightmap) console.log("Registering ", LightmapType[type] + " \"" + sourceId + "\"", tex);
-        if (!this._lightmaps.has(sourceId))
-            this._lightmaps.set(sourceId, new Map());
-        const map = this._lightmaps.get(sourceId);
+        if (!this.map.has(sourceId))
+            this.map.set(sourceId, new Map());
+        const map = this.map.get(sourceId);
         const arr = map?.get(type) ?? [];
         if (arr.length < index) arr.length = index + 1;
         setDisposable(tex, false);
@@ -55,12 +55,12 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     tryGetSkybox(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Skybox]", sourceId, this._lightmaps)
+        if (debugLightmap) console.log("[Get Skybox]", sourceId, this.map)
         return this.tryGet(sourceId, LightmapType.Skybox, 0);
     }
 
     tryGetReflection(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Reflection]", sourceId, this._lightmaps)
+        if (debugLightmap) console.log("[Get Reflection]", sourceId, this.map)
         return this.tryGet(sourceId, LightmapType.Reflection, 0);
     }
 
@@ -69,7 +69,7 @@ export class LightDataRegistry implements ILightDataRegistry {
             if (debugLightmap) console.warn("Missing source id");
             return null;
         }
-        const entry = this._lightmaps.get(sourceId);
+        const entry = this.map.get(sourceId);
         if (!entry) {
             if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture entry for`, sourceId);
             return null;

package/src/engine/engine_physics_rapier.ts

@@ -67,6 +67,7 @@ export class RapierPhysics implements IPhysicsEngine {
     debugRenderRaycasts: boolean = false;
 
     removeBody(obj: IComponent) {
+        if(debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
         if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
@@ -901,6 +902,8 @@ export class RapierPhysics implements IPhysicsEngine {
             // set the collider layers
             this.updateColliderCollisionGroups(collider);
 
+            if (debugPhysics) console.log("Created collider", collider.name, col);
+
             return col;
         }
         catch (e) {

package/src/engine/engine_scenelighting.ts

@@ -162,7 +162,7 @@ export class RendererData {
     private __currentReflectionId: SourceIdentifier | null = null;
 
     /** @internal */
-    internalEnableReflection(sourceId: SourceIdentifier) {
+    internalEnableReflection(sourceId: SourceIdentifier) : Texture | null {
         this.__currentReflectionId = sourceId;
         const settings = this._sceneLightSettings?.get(sourceId);
 
@@ -181,7 +181,7 @@ export class RendererData {
                     const tex = existing.Source;
                     tex.mapping = EquirectangularReflectionMapping;
                     scene.environment = tex;
-                    return;
+                    return tex;
                 }
                 else if (debug) console.warn("Could not find reflection for source", sourceId);
                 break;
@@ -196,22 +196,21 @@ export class RendererData {
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
+                        return tex;
                     }
                     else console.error("Missing ambient trilight", settings.sourceId);
-                    return;
                 case AmbientMode.Flat:
                     if (settings.ambientLight) {
                         const tex = createFlatTexture(settings.ambientLight, 64);
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
+                        return tex;
                     }
                     else console.error("Missing ambientlight", settings.sourceId);
-                    return;
-                default:
-                    return;
             }
         }
+        return null;
     }
 
     /** @internal */

package/src/engine/engine_utils.ts

@@ -381,6 +381,14 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
     }
     return uri;
 }
+
+export function toSourceId(src: string | null): SourceIdentifier | undefined {
+    if (!src) return undefined;
+    src = src.trim();
+    src = src.split("?")[0]?.split("#")[0];
+    return src;
+}
+
 // 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
@@ -793,6 +801,7 @@ const mutationObserverMap = new WeakMap<HTMLElement, HtmlElementExtra>();
 /** 
  * Register a callback when an {@link HTMLElement} attribute changes.   
  * This is used, for example, by the Skybox component to watch for changes to the environment-* and skybox-* attributes.
+ * @returns A function that can be used to unregister the callback
 */
 export function addAttributeChangeCallback(domElement: HTMLElement, name: string, callback: AttributeChangeCallback) {
     if (!mutationObserverMap.get(domElement)) {
@@ -811,6 +820,9 @@ export function addAttributeChangeCallback(domElement: HTMLElement, name: string
         listeners.set(name, []);
     }
     listeners.get(name)!.push(callback);
+    return () => {
+        removeAttributeChangeCallback(domElement, name, callback);
+    }
 };
 
 /** 

package/src/engine/extensions/extension_utils.ts

@@ -89,7 +89,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParserWithCache, o
                 for (let i = 0; i < val.length; i++) {
                     const entry = val[i];
                     const ext = resolveExtension(parser, entry);
-                    if (ext !== null) {
+                    if (ext !== null && ext !== undefined) {
                         if (typeof ext.then === "function")
                             promises.push(ext.then(res => val[i] = res));
                         else val[i] = ext;

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

@@ -38,14 +38,18 @@ const observedAttributes = [
     "loadstart",
     "progress",
     "loadfinished",
+
     "dracoDecoderPath",
     "dracoDecoderType",
     "ktx2DecoderPath",
+
     "tone-mapping",
     "tone-mapping-exposure",
     "background-blurriness",
     "background-color",
     "environment-intensity",
+
+    "focus-rect",
 ]
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
@@ -95,7 +99,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         if (value === null) this.removeAttribute("camera-controls");
         else this.setAttribute("camera-controls", value ? "true" : "false");
     }
-    
+
 
     /**
      * Get the current context for this web component instance. The context is created when the src attribute is set and the loading has finished.  
@@ -331,17 +335,17 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 if (debug) console.log("ktx2DecoderPath", newValue);
                 setKtx2TranscoderPath(newValue);
                 break;
-                
+
             case "tonemapping":
             case "tone-mapping":
             case "tone-mapping-exposure":
             case "background-blurriness":
             case "background-color":
             case "environment-intensity":
-            {
-                this.applyAttributes();
-                break;
-            }
+                {
+                    this.applyAttributes();
+                    break;
+                }
             case "public-key": {
                 if (newValue != PUBLIC_KEY)
                     this.setPublicKey();
@@ -352,6 +356,25 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                     this.setVersion();
                 break;
             }
+
+            case "focus-rect":
+                {
+                    const focus_rect = this.getAttribute("focus-rect") as HTMLElement | string | null;
+                    if (focus_rect && this._context) {
+                        if (focus_rect === null) {
+                            this._context.setCameraFocusRect(null);
+                        }
+                        else if (typeof focus_rect === "string" && focus_rect.length > 0) {
+                            const element = document.querySelector(focus_rect);
+                            this._context.setCameraFocusRect(element instanceof HTMLElement ? element : null);
+                        }
+                        else if (focus_rect instanceof HTMLElement) {
+                            this._context.setCameraFocusRect(focus_rect);
+                        }
+
+                    }
+                }
+                break;
         }
     }
 
@@ -570,6 +593,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
+            // HACK: if we set background-color to a color and then back to null we want the background-image attribute to re-apply
+            else if (this.getAttribute("background-image")) {
+                this.setAttribute("background-image", this.getAttribute("background-image")!);
+            }
         }
     }
 

package/src/engine/xr/NeedleXRController.ts

@@ -23,10 +23,10 @@ const debugCustomGesture = getParam("debugcustomgesture");
 // let _didReceiveSelectStartEvent = false;
 
 // https://github.com/immersive-web/webxr-input-profiles/blob/4484a05e30bcd43fe86bb4e06b7a707861a26796/packages/registry/profiles/meta/meta-quest-touch-plus.json
-declare type ControllerAxes = "xr-standard-thumbstick";
-declare type StickName = "xr-standard-thumbstick";
+declare type ControllerAxes = "xr-standard-thumbstick" | "xr-standard-touchpad";
+declare type StickName = "xr-standard-thumbstick" | "xr-standard-touchpad";
 declare type Mapping = "xr-standard";
-declare type ComponentType = "button" | "thumbstick" | "squeeze";
+declare type ComponentType = "button" | "thumbstick" | "squeeze" | "touchpad";
 declare type GamepadKey = "button" | "xAxis" | "yAxis";
 
 declare type NeedleXRControllerButtonName = ButtonName | "primary-button" | "primary";
@@ -407,6 +407,16 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
             gamepadStr += "\n[axes " + gp.axes.length + "]: " + gp.axes.map(a => a.toPrecision(1)).join(",");
             debugStr += "\n" + gamepadStr;
         }
+        if (this._layout) {
+            debugStr += "\nLayout: ";
+            for (const component of Object.keys(this._layout.components || {})) {
+                const val = this.getStick(component as StickName);
+                const indices = this._layout.components[component]?.gamepadIndices;
+                const indicesAsString = indices ? Object.entries(indices).map(e => e[0][0].toUpperCase() + e[0].slice(1) + "=" + e[1]).join(",") : "";
+                debugStr += `\n  ${component}: ${this._layout.components[component]?.type} [${indicesAsString}] (${val.x.toPrecision(2)},${val.y.toPrecision(2)})`;
+            }
+        }
+        
         Gizmos.DrawLabel(debugLabelPosition, debugStr, .006);
     }
 
@@ -730,6 +740,7 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         if (componentModel?.gamepadIndices) {
             switch (componentModel.type) {
                 case "thumbstick":
+                case "touchpad":
                     if (this.inputSource.gamepad) {
                         const xIndex = componentModel.gamepadIndices!.xAxis!;
                         const yIndex = componentModel.gamepadIndices!.yAxis!;
@@ -760,7 +771,11 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         this._isMetaQuestTouchController = this.profiles.includes("meta-quest-touch-plus") || this.profiles.includes("oculus-touch-v3");
 
         // Proper profile starting with v69 and browser 35.1
-        this._isMxInk = this.profiles.includes("logitech-mx-ink")
+        this._isMxInk = this.profiles.includes("logitech-mx-ink");
+
+        // For debugging to see ALL available profiles
+        /** @ts-ignore */
+        // fetchProfilesList(DEFAULT_PROFILES_PATH).then(list => console.log("Available controller profiles", list));
 
         if (!this._layout) {
             // Ignore transient-pointer since we likely don't want to spawn a controller visual just for a temporary pointer.
@@ -780,6 +795,8 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                     res.assetPath || ""
                 );
 
+                // const overrideProfile = await fetch(DEFAULT_PROFILES_PATH + "/htc-vive-focus-3/profile.json").then(r => r.json());
+
                 const profile = res.profile as InputDeviceProfile;
                 const layout = profile.layouts[this.inputSource.handedness];
                 this._layout = layout;
@@ -791,6 +808,21 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                             this._layout.gamepad[component.gamepadIndices!.button!] = key as XRControllerButtonName;
                         }
                     }
+
+                    // If we have 4 axes and no thumbstick defined, we define thumbstick for axis 3+4
+                    // This is a workaround for HTC Vive Focus 3 controllers, which have the profile for Vive Focus Plus...
+                    // This workaround fixes it for HTC Vive Focus 3 but does not change anything for Vive Focus Plus controllers
+                    if (this.profiles.length >= 1 && this.profiles[0] === "htc-vive-focus-plus") {
+                        if (this.inputSource.gamepad && this.inputSource.gamepad.axes.length === 4 && !this._layout.components["xr-standard-thumbstick"]) {
+                            this._layout.components["xr-standard-thumbstick"] = {
+                                type: "thumbstick",
+                                gamepadIndices: {
+                                    xAxis: 2,
+                                    yAxis: 3,
+                                }
+                            }
+                        }
+                    }
                 }
                 // if (debug) console.log(this._layout, this.inputSource);
                 // debugger;

package/src/engine-components/Camera.ts

@@ -36,7 +36,7 @@ const debugscreenpointtoray = getParam("debugscreenpointtoray");
  * Supports both perspective and orthographic cameras with various rendering options.
  * Internally, this component uses {@link PerspectiveCamera} and {@link OrthographicCamera} three.js objects.
  * 
- * @category Camera Controls
+ * @category Camera
  * @group Components
  */
 export class Camera extends Behaviour implements ICamera {

package/src/engine-components/CameraUtils.ts

@@ -122,7 +122,7 @@ function createDefaultCameraControls(context: IContext, cam?: ICamera) {
         orbit.autoRotate = autoRotate != "0" && autoRotate?.toLowerCase() != "false";
         const autoRotateSpeed = Number.parseFloat(autoRotate || ".5");
         orbit.autoRotateSpeed = !isNaN(autoRotateSpeed) ? autoRotateSpeed : .5;
-        console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
+        if(debug) console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
         const autoFit = context.domElement.getAttribute("auto-fit");
         orbit.autoFit = autoFit !== "0" && autoFit?.toLowerCase() != "false";
         orbit.autoTarget = true;

package/src/engine-components/CharacterController.ts

@@ -14,7 +14,7 @@ import { Rigidbody } from "./RigidBody.js";
 const debug = getParam("debugcharactercontroller");
 
 /**
- * @category Camera Controls
+ * @category Camera
  * @group Components
  */
 export class CharacterController extends Behaviour {
@@ -107,7 +107,7 @@ export class CharacterController extends Behaviour {
 }
 
 /**
- * @category Camera Controls
+ * @category Camera
  * @category Interactivity
  * @group Components
  */

package/src/engine-components/OrbitControls.ts

@@ -63,7 +63,7 @@ declare module 'three/examples/jsm/controls/OrbitControls.js' {
 /** The OrbitControls component is used to control a camera using the [OrbitControls from three.js](https://threejs.org/docs/#examples/en/controls/OrbitControls) library.  
  * The three OrbitControls object can be accessed via the `controls` property.  
  * The object being controlled by the OrbitControls (usually the camera) can be accessed via the `controllerObject` property.
- * @category Camera Controls
+ * @category Camera
  * @group Components
  */
 export class OrbitControls extends Behaviour implements ICameraController {