Needle Engine 4.2.2

Files changed (18) hide show

src/engine-components/export/usdz/extensions/behavior/Behaviour.ts +17 -11
src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts +41 -23
src/engine-components/export/usdz/extensions/behavior/BehavioursBuilder.ts +5 -2
src/engine-components/ui/Button.ts +3 -3
src/engine-components/Duplicatable.ts +2 -2
src/engine/engine_input.ts +47 -9
src/engine/engine_serialization_core.ts +13 -4
src/engine/engine_types.ts +5 -0
src/engine-components/ui/EventSystem.ts +45 -62
src/engine-components/EventTrigger.ts +14 -0
src/engine-components/ui/InputField.ts +9 -1
src/engine/webcomponents/needle menu/needle-menu-spatial.ts +2 -2
src/engine-components/utils/OpenURL.ts +2 -2
src/engine-components/Renderer.ts +5 -0
src/engine-components/ScreenCapture.ts +2 -2
src/engine-components/export/usdz/ThreeUSDZExporter.ts +0 -1
src/engine-components/export/usdz/USDZExporter.ts +2 -2
src/engine-components/webxr/WebXRImageTracking.ts +5 -1

src/engine-components/export/usdz/extensions/behavior/Behaviour.ts CHANGED Viewed

@@ -120,19 +120,21 @@
                 if (actionModel.tokenId === "StartAnimation") {
                     playAnimationActions.add(actionModel);
                 }
+                let actionType = actionModel.tokenId;
+                if (actionModel.type !== undefined) actionType += ":" + actionModel.type;
                 const affected = actionModel.affectedObjects;
                 if (affected) {
                     if (Array.isArray(affected)) {
                         for (const a of affected) {
                             actionTargets.add(a as Target);
                             //@ts-ignore
-                            if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${a.uuid}(("${a.displayName || a.name || a.uuid}"))\n`;
+                            if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${a.uuid}(("${a.displayName || a.name || a.uuid}"))\n`;
                         }
                     }
                     else if (typeof affected === "object") {
                         actionTargets.add(affected as Target);
                         //@ts-ignore
-                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${affected.uuid}(("${affected.displayName || affected.name || affected.uuid}"))\n`;
+                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${affected.uuid}(("${affected.displayName || affected.name || affected.uuid}"))\n`;
                     }
                     else if (typeof affected === "string") {
                         actionTargets.add({uuid: affected} as any as Target);
@@ -144,7 +146,7 @@
                     if (typeof xform === "object") {
                         actionTargets.add(xform as Target);
                         //@ts-ignore
-                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${xform.uuid}(("${xform.displayName || xform.name || xform.uuid}"))\n`;
+                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${xform.uuid}(("${xform.displayName || xform.name || xform.uuid}"))\n`;
                     }
                     else if (typeof xform === "string") {
                         actionTargets.add({uuid: xform} as any as Target);
@@ -159,19 +161,21 @@
                     collectTrigger(t, action);
             }
             else if (trigger instanceof TriggerModel) {
+                let triggerType = trigger.tokenId;
+                if (trigger.type !== undefined) triggerType += ":" + trigger.type;
                 if (typeof trigger.targetId === "object") {
                     triggerSources.add(trigger.targetId as Target);
                     //@ts-ignore
-                    if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${trigger.targetId.uuid}(("${trigger.targetId.displayName}")) --> ${trigger.id}[${trigger.id}]\n`;
+                    if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${trigger.targetId.uuid}(("${trigger.targetId.displayName}")) --> ${trigger.id}[${trigger.id}\n${triggerType}]\n`;
                 }
                 //@ts-ignore
-                if (createMermaidGraphForDebugging) mermaidGraph += `${trigger.id}((${trigger.id})) -- ${trigger.tokenId}${trigger.type ? ":" + trigger.type : ""} --> ${action.id}[${action.tokenId || action.id}]\n`;
+                if (createMermaidGraphForDebugging) mermaidGraph += `${trigger.id}((${trigger.id})) -- ${triggerType} --> ${action.id}[${action.tokenId || action.id}]\n`;
             }
         }
         // collect all targets of all triggers and actions
         for (const beh of this.behaviours) {
-            if (createMermaidGraphForDebugging) mermaidGraph += `subgraph Behavior_${beh.id}\n`;
+            if (createMermaidGraphForDebugging) mermaidGraph += `subgraph ${beh.id}\n`;
             collectAction(beh.action);
             collectTrigger(beh.trigger, beh.action);
             if (createMermaidGraphForDebugging) mermaidGraph += `end\n`;
@@ -180,10 +184,12 @@
         if (createMermaidGraphForDebugging) {
             console.log("All USDZ behaviours", this.behaviours);
-            console.warn("The Mermaid graph can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit. It should be in your clipboard already!");
-            console.log(mermaidGraph);
-            // copy to clipboard, can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit
-            navigator.clipboard.writeText(mermaidGraph);
+            if (this.behaviours.length) {
+                console.warn("The Mermaid graph can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit. It should be in your clipboard already!");
+                console.log(mermaidGraph);
+                // copy to clipboard, can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit
+                navigator.clipboard.writeText(mermaidGraph);
+            }
         }
         {
@@ -212,7 +218,7 @@
                 }
             }
-            if (createMermaidGraphForDebugging) {
+            if (createMermaidGraphForDebugging && playAnimationActions.size) {
                 console.log(animationsGraph);
             }

src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts CHANGED Viewed

@@ -17,7 +17,7 @@
 import { AnimationExtension, RegisteredAnimationInfo, type UsdzAnimation } from "../Animation.js";
 import { AudioExtension } from "./AudioExtension.js";
 import type { BehaviorExtension, UsdzBehaviour } from "./Behaviour.js";
-import { ActionBuilder, ActionModel, BehaviorModel, EmphasizeActionMotionType,type IBehaviorElement, Target, TriggerBuilder } from "./BehavioursBuilder.js";
+import { ActionBuilder, ActionModel, BehaviorModel, EmphasizeActionMotionType,GroupActionModel,type IBehaviorElement, Target, TriggerBuilder } from "./BehavioursBuilder.js";
 const debug = getParam("debugusdzbehaviours");
@@ -203,10 +203,10 @@
     }
     onPointerEnter(_args: PointerEventData) {
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
     }
     onPointerExit(_: PointerEventData) {
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
     onPointerClick(args: PointerEventData) {
         args.use();
@@ -251,8 +251,9 @@
     private targetModels!: USDObject[];
     private static _materialTriggersPerId: { [key: string]: ChangeMaterialOnClick[] } = {}
+    private static _startHiddenBehaviour: BehaviorModel | null = null;
+    private static _parallelStartHiddenActions: USDObject[] = [];
     async beforeCreateDocument(_ext: BehaviorExtension, _context) {
         this.targetModels = [];
         ChangeMaterialOnClick._materialTriggersPerId = {}
@@ -309,23 +310,25 @@
     }
     private createAndAttachBehaviors(ext: BehaviorExtension, myVariants: Array<USDObject>, otherVariants: Array<USDObject>) {
-        const start: ActionModel[] = [];
         const select: ActionModel[] = [];
         const fadeDuration = Math.max(0, this.fadeDuration);
         select.push(ActionBuilder.fadeAction([...this.targetModels, ...otherVariants], fadeDuration, false));
-        start.push(ActionBuilder.fadeAction(myVariants, fadeDuration, false));
         select.push(ActionBuilder.fadeAction(myVariants, fadeDuration, true));
         ext.addBehavior(new BehaviorModel("Select_" + this.selfModel.name,
             TriggerBuilder.tapTrigger(this.selfModel),
             ActionBuilder.parallel(...select))
         );
-        ext.addBehavior(new BehaviorModel("StartHidden_" + this.selfModel.name,
-            TriggerBuilder.sceneStartTrigger(),
-            ActionBuilder.parallel(...start))
-        );
+        ChangeMaterialOnClick._parallelStartHiddenActions.push(...myVariants);
+        if (!ChangeMaterialOnClick._startHiddenBehaviour) {
+            ChangeMaterialOnClick._startHiddenBehaviour =
+                new BehaviorModel("StartHidden_" + this.selfModel.name,
+                    TriggerBuilder.sceneStartTrigger(),
+                    ActionBuilder.fadeAction(ChangeMaterialOnClick._parallelStartHiddenActions, fadeDuration, false));
+            ext.addBehavior(ChangeMaterialOnClick._startHiddenBehaviour);
+        }
     }
     private static getMaterialName(material: Material) {
@@ -526,9 +529,9 @@
                     sequence.push(ActionBuilder.fadeAction(selfModel, 0, false));
                 sequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_ToggleTo" + (targetState ? "On" : "Off"),
                     TriggerBuilder.tapTrigger(selfModel),
-                    ActionBuilder.parallel(...sequence)
+                    sequence.length > 1 ? ActionBuilder.parallel(...sequence) : sequence[0],
                 ));
             }
             // We have a toggleModel, so we need to set up two sequences:
@@ -540,7 +543,7 @@
                 toggleSequence.push(ActionBuilder.fadeAction(this.toggleModel, 0, true));
                 toggleSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, targetState));
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (targetState ? "On" : "Off"),
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_ToggleTo" + (targetState ? "On" : "Off"),
                     TriggerBuilder.tapTrigger(selfModel),
                     ActionBuilder.parallel(...toggleSequence)
                 ));
@@ -550,7 +553,7 @@
                 reverseSequence.push(ActionBuilder.fadeAction(selfModel, 0, true));
                 reverseSequence.push(ActionBuilder.fadeAction(this.targetModel, 0, !targetState));
-                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_toggleTo" + (!targetState ? "On" : "Off"),
+                ext.addBehavior(new BehaviorModel("Toggle_" + selfModel.name + "_ToggleTo" + (!targetState ? "On" : "Off"),
                     TriggerBuilder.tapTrigger(this.toggleModel),
                     ActionBuilder.parallel(...reverseSequence)
                 ));
@@ -565,10 +568,7 @@
             if (this.toggleModel)
                 objectsToHide.push(this.toggleModel);
-            ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
-                TriggerBuilder.sceneStartTrigger(),
-                ActionBuilder.fadeAction(objectsToHide, 0, false)
-            ));
+            HideOnStart.add(objectsToHide, ext);
         }
     }
@@ -595,6 +595,27 @@
  */
 export class HideOnStart extends Behaviour implements UsdzBehaviour {
+    private static _fadeBehaviour?: BehaviorModel;
+    private static _fadeObjects: Array<USDObject | Object3D> = [];
+    static add(target: Target, ext: BehaviorExtension) {
+        const arr = Array.isArray(target) ? target : [target];
+        for (const entry of arr) {
+            if (!HideOnStart._fadeObjects.includes(entry)) {
+                console.log("adding hide on start", entry);
+                HideOnStart._fadeObjects.push(entry);
+            }
+        }
+        if (HideOnStart._fadeBehaviour === undefined) {
+            HideOnStart._fadeBehaviour = new BehaviorModel("HideOnStart",
+                TriggerBuilder.sceneStartTrigger(),
+                //@ts-ignore
+                ActionBuilder.fadeAction(HideOnStart._fadeObjects, 0, false)
+            );
+            ext.addBehavior(HideOnStart._fadeBehaviour);
+        }
+    }
     start() {
         GameObject.setActive(this.gameObject, false);
     }
@@ -603,10 +624,7 @@
         if (model.uuid === this.gameObject.uuid) {
             // we only want to mark the object as HideOnStart if it's still hidden
             if (!this.wasVisible) {
-                ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
-                    TriggerBuilder.sceneStartTrigger(),
-                    ActionBuilder.fadeAction(model, 0, false)
-                ));
+                HideOnStart.add(model, ext);
             }
         }
     }
@@ -752,7 +770,7 @@
             // automatically play audio on start too if the referenced AudioSource has playOnAwake enabled
             if (this.target && this.target.playOnAwake && this.target.enabled) {
                 if (anyChildHasGeometry && this.trigger === "tap") {
-                    // HACK Currently (20240509) we MUST not emit this behaviour if we're also expecting the tap trigger to work.
+                    // WORKAROUND Currently (20240509) we MUST not emit this behaviour if we're also expecting the tap trigger to work.
                     // Seems to be a regression in QuickLook... audio clips can't be stopped anymore as soon as they start playing.
                     console.warn("USDZExport: Audio sources that are played on tap can't also auto-play at scene start due to a QuickLook bug.");
                 }

src/engine-components/export/usdz/extensions/behavior/BehavioursBuilder.ts CHANGED Viewed

@@ -199,11 +199,14 @@
 export class TriggerBuilder {
+    private static __sceneStartTrigger?: TriggerModel;
     static sceneStartTrigger(): TriggerModel {
-        const trigger = new TriggerModel();
-        trigger.targetId = undefined;
+        if (this.__sceneStartTrigger !== undefined) return this.__sceneStartTrigger;
+        const trigger = new TriggerModel(undefined, "SceneStart");
         trigger.tokenId = "SceneTransition";
         trigger.type = "enter";
+        this.__sceneStartTrigger = trigger;
         return trigger;
     }

src/engine-components/ui/Button.ts CHANGED Viewed

@@ -90,7 +90,7 @@
         else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState("hovered");
         }
-        if (canSetCursor) this.context.input.setCursorPointer();
+        if (canSetCursor) this.context.input.setCursor("pointer");
     }
     onPointerExit() {
@@ -107,7 +107,7 @@
         else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState("normal");
         }
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
     onPointerDown(_) {
@@ -211,7 +211,7 @@
     }
     onDestroy(): void {
-        if (this._isHovered) this.context.input.setCursorNormal();
+        if (this._isHovered) this.context.input.unsetCursor("pointer");
     }
     private _requestedAnimatorTrigger?: string;

src/engine-components/Duplicatable.ts CHANGED Viewed

@@ -105,14 +105,14 @@
         if (!this.object) return;
         if (!this.context.connection.allowEditing) return;
         if (args.button !== 0) return;
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
     }
     onPointerExit(args: PointerEventData) {
         if (args.used) return;
         if (!this.object) return;
         if (!this.context.connection.allowEditing) return;
         if (args.button !== 0) return;
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
     /** @internal */

src/engine/engine_input.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 import { showBalloonMessage, showBalloonWarning } from './debug/debug.js';
 import { Context } from './engine_setup.js';
 import { getTempVector, getWorldQuaternion } from './engine_three_utils.js';
-import type { ButtonName, IGameObject, IInput, MouseButtonName, Vec2 } from './engine_types.js';
+import type { ButtonName, CursorTypeName, IGameObject, IInput, MouseButtonName, Vec2 } from './engine_types.js';
 import { DeviceUtilities, type EnumToPrimitiveUnion, getParam } from './engine_utils.js';
 const debug = getParam("debuginput");
@@ -394,21 +394,46 @@
     get mouseWheelChanged(): boolean { return this.getMouseWheelChanged(0); }
     /** Is the primary pointer double clicked (usually the left button). This is equivalent to `input.mouseDoubleClick` */
-    get click() : boolean { return this._pointerClick[0]; }
+    get click(): boolean { return this._pointerClick[0]; }
     /** Was a double click detected for the primary pointer? */
-    get doubleClick() : boolean { return this._pointerDoubleClick[0]; }
+    get doubleClick(): boolean { return this._pointerDoubleClick[0]; }
-    private _specialCursorTrigger: number = 0;
+    private readonly _setCursorTypes: CursorTypeName[] = [];
+    /** @deprecated use setCursor("pointer") */
     setCursorPointer() {
-        this._specialCursorTrigger += 1;
-        this.context.domElement.style.cursor = "pointer";
+        this.setCursor("pointer");
     }
+    /** @deprecated use unsetCursor() */
     setCursorNormal() {
-        this._specialCursorTrigger -= 1;
-        this._specialCursorTrigger = Math.max(0, this._specialCursorTrigger);
-        if (this._specialCursorTrigger === 0)
+        this.unsetCursor("pointer");
+    }
+    /**
+     * Set a custom cursor. This will set the cursor type until unsetCursor is called
+     */
+    setCursor(type: CursorTypeName) {
+        this._setCursorTypes.push(type);
+        if (this._setCursorTypes.length > 10) {
+            this._setCursorTypes.shift();
+        }
+        this.updateCursor();
+    }
+    /**
+     * Unset a custom cursor. This will set the cursor type to the previous type or default
+     */
+    unsetCursor(type: CursorTypeName) {
+        for (let i = this._setCursorTypes.length - 1; i >= 0; i--) {
+            if (this._setCursorTypes[i] === type) {
+                this._setCursorTypes.splice(i, 1);
+                this.updateCursor();
+                break;
+            }
+        }
+    }
+    private updateCursor() {
+        if (this._setCursorTypes?.length == 0)
             this.context.domElement.style.cursor = "default";
+        else this.context.domElement.style.cursor = this._setCursorTypes[this._setCursorTypes.length - 1];
     }
     /**
@@ -756,6 +781,10 @@
         window.removeEventListener('pointerup', this.onPointerUp);
         window.removeEventListener('pointercancel', this.onPointerCancel);
+        window.removeEventListener("touchstart", this.onTouchStart);
+        window.removeEventListener("touchmove", this.onTouchMove);
+        window.removeEventListener("touchend", this.onTouchEnd);
         this._htmlEventSource?.removeEventListener('wheel', this.onMouseWheel, false);
         window.removeEventListener("wheel", this.onWheelWindow, false);
@@ -778,7 +807,10 @@
         }
     }
+    private readonly _receivedPointerMoveEventsThisFrame = new Array<number>;
     private onEndOfFrame = () => {
+        this._receivedPointerMoveEventsThisFrame.length = 0;
         for (let i = 0; i < this._pointerUp.length; i++)
             this._pointerUp[i] = false;
         for (let i = 0; i < this._pointerDown.length; i++)
@@ -901,8 +933,14 @@
     }
     private onPointerMove = (evt: PointerEvent) => {
         if (this.context.isInAR) return;
+        // Prevent multiple pointerMove events per frame
+        if (this._receivedPointerMoveEventsThisFrame.includes(evt.pointerId)) return;
+        this._receivedPointerMoveEventsThisFrame.push(evt.pointerId);
         // We want to keep receiving move events until pointerUp and not stop handling events just because we're hovering over *some* HTML element
         // if (this.canReceiveInput(evt) === false) return;
         let button = evt.button;
         if (evt.pointerType === "mouse") {
             const pressedButton = this.getFirstPressedButtonForPointer(0);

src/engine/engine_serialization_core.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { AnimationClip, Material, Mesh, Object3D, Texture } from "three";
+import { AnimationClip, BufferGeometry, InstancedBufferGeometry, Material, Mesh, Object3D, Texture, WireframeGeometry } from "three";
 import { type GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { debugExtension } from "../engine/engine_default_parameters.js";
-import { addLog,LogType } from "./debug/debug_overlay.js";
+import { addLog, LogType } from "./debug/debug_overlay.js";
 import { isLocalNetwork } from "./engine_networking_utils.js";
 import { Context } from "./engine_setup.js";
 import type { Constructor, ConstructorConcrete, SourceIdentifier } from "./engine_types.js";
@@ -515,8 +515,17 @@
     // e.g. when @serializable(Texture) and the texture is already resolved via json pointer from gltf
     // then we dont need to do anything else
-    if (!typeIsFunction && currentValue instanceof type) return currentValue;
+    if (!typeIsFunction && currentValue) {
+        if (currentValue instanceof Material) return currentValue;
+        if (currentValue instanceof Texture) return currentValue;
+        if (currentValue instanceof Mesh) return currentValue;
+        if (currentValue instanceof BufferGeometry) return currentValue;
+        if (currentValue instanceof AnimationClip) return currentValue;
+    }
+    // Removed this line because it prevents assigning serialized values to existing instances for e.g. EventList
+    // https://linear.app/needle/issue/NE-5350
+    // if (!typeIsFunction && currentValue instanceof type) return currentValue;
     // try to resolve the serializer for a type only once
     if (!typeContext) {
         typeContext = {

src/engine/engine_types.ts CHANGED Viewed

@@ -528,6 +528,11 @@
     debugRenderRaycasts: boolean;
 }
+/**
+ * Available cursor types
+ * @link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+ */
+export type CursorTypeName = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out";
 /** Typical mouse button names for most devices */
 export type MouseButtonName = "left" | "right" | "middle";

src/engine-components/ui/EventSystem.ts CHANGED Viewed

@@ -1,11 +1,12 @@
-import { type Intersection, Mesh,Object3D } from "three";
+import { type Intersection, Mesh, Object3D } from "three";
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
-import { type InputEventNames, InputEvents, NEPointerEvent, NEPointerEventIntersection,PointerType } from "../../engine/engine_input.js";
+import { type InputEventNames, InputEvents, NEPointerEvent, NEPointerEventIntersection, PointerType } from "../../engine/engine_input.js";
+import { onInitialized } from "../../engine/engine_lifecycle_api.js";
 import { Mathf } from "../../engine/engine_math.js";
 import { RaycastOptions, type RaycastTestObjectReturnType } from "../../engine/engine_physics.js";
 import { Context } from "../../engine/engine_setup.js";
-import type { IComponent } from "../../engine/engine_types.js";
+import { HideFlags, type IComponent } from "../../engine/engine_types.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { $shadowDomOwner } from "./BaseUIComponent.js";
@@ -30,47 +31,15 @@
 declare type IComponentCanMaybeReceiveEvents = IPointerEventHandler & IComponent & { interactable?: boolean };
+onInitialized((ctx) => {
+    EventSystem.createIfNoneExists(ctx);
+})
 /**
  * @category User Interface
  * @group Components
  */
 export class EventSystem extends Behaviour {
-    private static _eventSystemMap = new Map<Context, EventSystem[]>();
-    static didSearchEventSystem: boolean = false;
-    static createIfNoneExists(context: Context) {
-        if (!this.didSearchEventSystem) {
-            this.didSearchEventSystem = true;
-            if (EventSystem.systems.length <= 0) {
-                EventSystem.systems.push(...GameObject.findObjectsOfType(EventSystem, context));
-            }
-        }
-        for (const sys of EventSystem.systems) {
-            if (sys.context === context) return; // exists
-        }
-        const go = new Object3D();
-        GameObject.addComponent(go, EventSystem);
-        context.scene.add(go);
-    }
-    static get systems(): EventSystem[] {
-        const context = Context.Current;
-        if (!this._eventSystemMap.has(context)) {
-            this._eventSystemMap.set(context, []);
-        }
-        return this._eventSystemMap.get(context)!;
-    }
-    static get(ctx: Context): EventSystem | null {
-        const systems = this._eventSystemMap.get(ctx);
-        if (systems && systems.length > 0) return systems[0];
-        return null;
-    }
-    static get instance(): EventSystem | null {
-        return this.systems[0];
-    }
     //@ts-ignore
     static ensureUpdateMeshUI(instance, context: Context, force: boolean = false) {
         MeshUIHelper.update(instance, context, force);
@@ -79,32 +48,22 @@
         MeshUIHelper.markDirty();
     }
-    private raycaster: Raycaster[] = [];
-    constructor() {
-        super();
-        EventSystem.systems.push(this);
+    static createIfNoneExists(context: Context) {
+        if (!context.scene.getComponent(EventSystem)) {
+            context.scene.addComponent(EventSystem);
+        }
     }
-    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
-    get isHoveringObjects() { return this.hoveredByID.size > 0; }
-    onDestroy(): void {
-        EventSystem.systems.splice(EventSystem.systems.indexOf(this), 1);
+    static get(ctx: Context): EventSystem | null {
+        this.createIfNoneExists(ctx);
+        return ctx.scene.getComponent(EventSystem);
     }
-    start() {
-        if (this.raycaster.length <= 0) {
-            const res = GameObject.findObjectOfType(Raycaster, this.context);
-            if (!res) {
-                const rc = GameObject.addComponent(this.context.scene, ObjectRaycaster);
-                this.raycaster.push(rc);
-                if (isDevEnvironment() || debug)
-                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found.");
-            }
-        }
+    static get instance(): EventSystem | null {
+        return this.get(Context.Current);
     }
+    private readonly raycaster: Raycaster[] = [];
     register(rc: Raycaster) {
         if (rc && this.raycaster && !this.raycaster.includes(rc))
             this.raycaster?.push(rc);
@@ -116,6 +75,23 @@
         }
     }
+    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
+    get isHoveringObjects() { return this.hoveredByID.size > 0; }
+    awake(): void {
+        // 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) {
+            this.enabled = false;
+        }
+    }
+    start() {
+        if (!this.context.scene.getComponent(Raycaster)) {
+            this.context.scene.addComponent(ObjectRaycaster);
+        }
+    }
     onEnable(): void {
         this.context.input.addEventListener(InputEvents.PointerDown, this.onPointerEvent);
         this.context.input.addEventListener(InputEvents.PointerUp, this.onPointerEvent);
@@ -183,7 +159,6 @@
             options.screenPoint = this.context.input.getPointerPositionRC(pointerEvent.pointerId)!;
         }
         const hits = this.performRaycast(options) as Array<NEPointerEventIntersection>;
         if (hits) {
             for (const hit of hits) {
@@ -242,6 +217,14 @@
         // TODO: this implementation below should be removed and we should regularly raycast objects in the scene unless marked as "do not raycast"
         // with the introduction of the mesh-bvh based raycasting the performance impact should be greatly reduced. But this needs further testing
+        const raycasterOnObject = obj && "getComponent" in obj ? obj.getComponent(Raycaster) : null;
+        if (raycasterOnObject && raycasterOnObject != this._currentlyActiveRaycaster) {
+            return false;
+        }
+        // if (this._currentPointerEventName == "pointermove") {
+        //     console.log(this.context.time.frame, obj.name, obj.type, obj.guid)
+        // }
         // check if this object is actually a UI shadow hierarchy object
         let uiOwner: Object3D | null = null;
         const isUI = isUIObject(obj);
@@ -450,7 +433,7 @@
                     isShadow = true;
                 }
             }
             // adding this to have a way for allowing to receive events on TMUI elements without shadow hierarchy
             // if(parent["needle:use_eventsystem"] == true){
             //     // if use_eventsystem is true, we want to handle the event
@@ -671,7 +654,7 @@
             comp[symbol] = state;
             return true;
         }
-        else {
+        else {
             if (!state || !state.includes(pointerId)) return false;
             const i = state.indexOf(pointerId);
             if (i !== -1) {

src/engine-components/EventTrigger.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { serializable } from "../engine/engine_serialization.js";
+import { EventSystem } from "./api.js";
 import { Behaviour } from "./Component.js"
 import { EventList } from "./EventList.js";
 import { EventType } from "./EventType.js"
@@ -33,6 +34,13 @@
         }
     }
+    private hasTrigger(type: EventType) {
+        return this.triggers?.some(t => t.eventID === type) ?? false;
+    }
+    private shouldChangeCursor() {
+        return this.hasTrigger(EventType.PointerClick) || this.hasTrigger(EventType.PointerDown) || this.hasTrigger(EventType.PointerUp);
+    }
     /** @internal */
     onPointerClick(_: PointerEventData) {
         this.invoke(EventType.PointerClick);
@@ -40,11 +48,17 @@
     /** @internal */
     onPointerEnter(_: PointerEventData) {
+        if (this.shouldChangeCursor()) {
+            this.context.input.setCursor("pointer");
+        }
         this.invoke(EventType.PointerEnter);
     }
     /** @internal */
     onPointerExit(_: PointerEventData) {
+        if (this.shouldChangeCursor()) {
+            this.context.input.unsetCursor("pointer");
+        }
         this.invoke(EventType.PointerExit);
     }

src/engine-components/ui/InputField.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 import { DeviceUtilities, getParam } from "../../engine/engine_utils.js";
 import { Behaviour, GameObject } from "../Component.js";
 import { EventList } from "../EventList.js";
-import { type IPointerEventHandler } from "./PointerEvents.js";
+import { type IPointerEventHandler,PointerEventData } from "./PointerEvents.js";
 import { Text } from "./Text.js";
 import { tryGetUIComponent } from "./Utils.js";
@@ -113,6 +113,14 @@
         this.onDeselected();
     }
+    onPointerEnter(_args: PointerEventData) {
+        const canSetCursor = _args.event.pointerType === "mouse" && _args.button === 0;
+        if(canSetCursor) this.context.input.setCursor("text");
+    }
+    onPointerExit(_args: PointerEventData) {
+        this.context.input.unsetCursor("text")
+    }
     onPointerClick(_args) {
         if (debug) console.log("CLICK", _args, InputField.active);
         InputField.activeTime = this.context.time.time;

src/engine/webcomponents/needle menu/needle-menu-spatial.ts CHANGED Viewed

@@ -548,14 +548,14 @@
     }
     onPointerEnter() {
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
         if (this.allowModifyUI) {
             this.element.set({ backgroundOpacity: 1 });
             ThreeMeshUI.update();
         }
     }
     onPointerExit() {
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
         if (this.allowModifyUI) {
             this.element.set({ backgroundOpacity: 0 });
             ThreeMeshUI.update();

src/engine-components/utils/OpenURL.ts CHANGED Viewed

@@ -91,12 +91,12 @@
     /** @internal */
     onPointerEnter(args) {
         if (!args.used && this.clickable)
-            this.context.input.setCursorPointer();
+            this.context.input.setCursor("pointer");
     }
     /** @internal */
     onPointerExit() {
         if (this.clickable)
-            this.context.input.setCursorNormal();
+            this.context.input.unsetCursor("pointer");
     }
     /** @internal */
     onPointerClick(args: PointerEventData) {

src/engine-components/Renderer.ts CHANGED Viewed

@@ -716,6 +716,11 @@
             const factor = this.hasLightmap ? Math.PI : 1;
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
+            // since three 163 we need to set the envMap to the scene envMap if it is not set
+            // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
+            // internal issue: https://linear.app/needle/issue/NE-6363
+            if (!material.envMap) material.envMap = this.context.scene.environment;
         }
         if (this._lightmaps) {

src/engine-components/ScreenCapture.ts CHANGED Viewed

@@ -88,13 +88,13 @@
     onPointerEnter() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
     }
     /** @internal */
     onPointerExit() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
     /** @internal */

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -1966,7 +1966,6 @@
 	const materialName = getMaterialName(material);
-	console.log(material);
 	// Special case: occluder material
 	// Supported on iOS 18+ and visionOS 1+
 	const isShadowCatcherMaterial =

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -403,7 +403,7 @@
         if (this.autoExportAnimations) {
             implicitBehaviors.push(...registerAnimatorsImplictly(objectToExport, animExt));
         }
-        const audioExt = this.extensions.find(ext => ext.extensionName === "Audio");
+        const audioExt = extensions.find(ext => ext.extensionName === "Audio");
         if (audioExt && this.autoExportAudioSources)
             implicitBehaviors.push(...registerAudioSourcesImplictly(objectToExport, audioExt as AudioExtension));
@@ -454,7 +454,7 @@
             });
         }
-        const behaviorExt = this.extensions.find(ext => ext.extensionName === "Behaviour") as BehaviorExtension | undefined;
+        const behaviorExt = extensions.find(ext => ext.extensionName === "Behaviour") as BehaviorExtension | undefined;
         if (this.interactive && behaviorExt && objectsToDisableAtSceneStart.length > 0) {
             behaviorExt.addBehavior(disableObjectsAtStart(objectsToDisableAtSceneStart));
         }

src/engine-components/webxr/WebXRImageTracking.ts CHANGED Viewed

@@ -160,9 +160,13 @@
     }
     onAfterHierarchy(_context: USDZExporterContext, writer: USDWriter) {
+        const iOSVersion = DeviceUtilities.getiOSVersion();
+        const majorVersion = iOSVersion ? parseInt(iOSVersion.split(".")[0]) : 18;
+        const workaroundForFB16119331 = majorVersion >= 18;
+        const multiplier = workaroundForFB16119331 ? 1 : 100;
         writer.beginBlock(`def Preliminary_ReferenceImage "AnchoringReferenceImage"`);
         writer.appendLine(`uniform asset image = @image_tracking/` + this.filename + `@`);
-        writer.appendLine(`uniform double physicalWidth = ` + (this.widthInMeters * 100).toFixed(8));
+        writer.appendLine(`uniform double physicalWidth = ` + (this.widthInMeters * multiplier).toFixed(8));
         writer.closeBlock();
     }