@needle-tools/engine 2.58.4-pre → 2.59.1-pre

package/src/engine-components/OrbitControls.ts

@@ -8,6 +8,8 @@ import { getParam, isMobileDevice } from "../engine/engine_utils";
 
 import { Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { EventSystem, EventSystemEvents } from "./ui/EventSystem";
+import { transformWithEsbuild } from "vite";
 
 const freeCam = getParam("freecam");
 
@@ -60,11 +62,40 @@ export class OrbitControls extends Behaviour {
     private _enableTime: number = 0; // use to disable double click when double clicking on UI
     private _startedListeningToKeyEvents: boolean = false;
 
+    private _eventSystem?: EventSystem;
+    private _afterHandleInputFn?: any;
+
+    targetElement: HTMLElement | null = null;
+
     awake(): void {
         this._lookTargetPosition = new Vector3();
         this._startedListeningToKeyEvents = false;
     }
 
+    start() {
+        if (this._controls) {
+            const camGo = GameObject.getComponent(this.gameObject, Camera);
+            if (camGo && !this.setFromTargetPosition()) {
+                if (this.debugLog)
+                    console.log("NO TARGET");
+                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                this.setTarget(forward, true);
+            }
+        }
+        this.startCoroutine(this.startRaycastDelayed());
+
+        this._eventSystem = EventSystem.get(this.context) ?? undefined;
+        if (this._eventSystem) {
+            this._afterHandleInputFn = this.afterHandleInput.bind(this);
+            this._eventSystem.addEventListener(EventSystemEvents.AfterHandleInput, this._afterHandleInputFn!);
+        }
+    }
+
+    onDestroy() {
+        this._controls?.dispose();
+        this._eventSystem?.removeEventListener(EventSystemEvents.AfterHandleInput, this._afterHandleInputFn!);
+    }
+
     onEnable() {
         this._enableTime = this.context.time.time;
         const camGo = GameObject.getComponent(this.gameObject, Camera);
@@ -73,7 +104,10 @@ export class OrbitControls extends Behaviour {
             console.assert(cam !== null && cam !== undefined, "Missing camera", this);
             if (cam)
                 this._cameraObject = cam;
-            this._controls = new ThreeOrbitControls(cam!, this.context.renderer.domElement);
+            // Using the parent if possible to make it possible to disable input on the canvas
+            // for having HTML content behind it and still receive input
+            const element = this.targetElement ?? this.context.domElement;
+            this._controls = new ThreeOrbitControls(cam!, element);
             if (defaultKeys === undefined) defaultKeys = { ...this._controls.keys };
         }
 
@@ -115,6 +149,7 @@ export class OrbitControls extends Behaviour {
                 this._controls.listenToKeyEvents(window.document.body);
             }
         }
+
     }
 
     onDisable() {
@@ -125,21 +160,11 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    onDestroy() {
-        this._controls?.dispose();
-    }
-
-    start() {
-        if (this._controls) {
-            const camGo = GameObject.getComponent(this.gameObject, Camera);
-            if (camGo && !this.setFromTargetPosition()) {
-                if (this.debugLog)
-                    console.log("NO TARGET");
-                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
-                this.setTarget(forward, true);
-            }
+    private _shouldDisable : boolean = false;
+    private afterHandleInput() {
+        if (this._controls && this._eventSystem) {
+            this._shouldDisable = this._eventSystem.hasActiveUI;
         }
-        this.startCoroutine(this.startRaycastDelayed());
     }
 
     // we need to wait one frame (when starting the scene for the very first time)
@@ -221,7 +246,7 @@ export class OrbitControls extends Behaviour {
         if (this._controls && !this.context.isInXR) {
             if (this.debugLog)
                 this._controls.domElement = this.context.renderer.domElement;
-            this._controls.enabled = true;
+            this._controls.enabled = !this._shouldDisable;
             this._controls.update();
         }
     }
@@ -309,11 +334,11 @@ export class OrbitControls extends Behaviour {
         for (const object of objects)
             box.expandByObject(object);
 
-        box.getSize( size );
-        box.getCenter( center );
+        box.getSize(size);
+        box.getCenter(center);
 
         const maxSize = Math.max(size.x, size.y, size.z);
-        const fitHeightDistance = maxSize / (2 * Math.atan( Math.PI * camera.fov / 360 ));
+        const fitHeightDistance = maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
         const fitWidthDistance = fitHeightDistance / camera.aspect;
         const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance);
 

package/src/engine-components/ParticleSystem.ts

@@ -345,7 +345,6 @@ class VelocityBehaviour extends ParticleSystemBaseBehaviour {
 
     initialize(particle: Particle): void {
         const factor = 1 + this.scaleFactorDiff;
-
         particle.startSpeed = this.system.main.startSpeed.evaluate(Math.random(), Math.random()) * factor;
         particle.velocity.copy(this.system.shape.getDirection(particle.position)).multiplyScalar(particle.startSpeed);
         if (this.system.inheritVelocity?.enabled) {
@@ -414,6 +413,10 @@ class VelocityBehaviour extends ParticleSystemBaseBehaviour {
             // const factor = this.system.worldScale.x;
             limitVelocityOverLifetime.apply(particle.position, baseVelocity, particle.velocity, particle.size, t01, delta, 1);
         }
+
+        if (this.system.worldspace) {
+            particle.velocity.multiply(this.system.worldScale);
+        }
     }
 }
 
@@ -421,14 +424,19 @@ const $colorLerpFactor = Symbol("colorLerpFactor");
 class ColorBehaviour extends ParticleSystemBaseBehaviour {
     type: string = "NeedleColor";
 
-    initialize(particle: Particle): void {
-        const col = this.system.main.startColor.evaluate(particle.age / particle.life, Math.random());
+    initialize(_particle: Particle): void {
+    }
+
+    private _init(particle: Particle) {
+        const col = this.system.main.startColor.evaluate(Math.random());
         particle.startColor.set(col.r, col.g, col.b, col.alpha);
         particle.color.copy(particle.startColor);
         particle[$colorLerpFactor] = Math.random();
     }
 
     update(particle: Particle, _delta: number): void {
+        if (particle.age === 0)
+            this._init(particle);
         if (this.system.colorOverLifetime.enabled) {
             const t = particle.age / particle.life;
             const col = this.system.colorOverLifetime.color.evaluate(t, particle[$colorLerpFactor]);
@@ -767,6 +775,13 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
         this.addSubParticleSystems();
     }
 
+    onDestroy(): void {
+        this._container?.removeFromParent();
+        this._batchSystem?.removeFromParent();
+        this._particleSystem?.emitter.removeFromParent();
+        this._particleSystem?.dispose();
+    }
+
     onEnable() {
         if (this.inheritVelocity)
             this.inheritVelocity.system = this;

package/src/engine-components/SpectatorCamera.ts

@@ -15,6 +15,7 @@ import { RaycastOptions } from "../engine/engine_physics";
 import { RoomEvents } from "../engine/engine_networking";
 import { ICamera } from "../engine/engine_types";
 import { IModel } from "../engine/engine_networking_types";
+import { serializable } from "../engine/engine_serialization";
 
 
 export enum SpectatorMode {
@@ -28,6 +29,10 @@ export class SpectatorCamera extends Behaviour {
 
     cam: Camera | null = null;
 
+    /** when enabled pressing F will send a request to all connected users to follow me, ESC to stop */
+    @serializable()
+    useKeys: boolean = true;
+
     private _mode: SpectatorMode = SpectatorMode.FirstPerson;
 
     get mode() { return this._mode; }
@@ -448,7 +453,8 @@ class SpectatorSelectionController {
         this.context = context;
         this.spectator = spectator;
         console.log("Click other avatars or cameras to follow them. Press ESC to exit spectator mode.");
-        window.addEventListener("keydown", (evt) => {
+        this.context.domElement.addEventListener("keydown", (evt) => {
+            if(!this.spectator.useKeys) return;
             const key = evt.key;
             if (key === "Escape") {
                 this.spectator.stopSpectating();
@@ -544,7 +550,8 @@ class SpectatorCamNetworking {
         this.context.connection.beginListen("spectator-follower-changed", this._followerEventMethod);
         this.context.connection.beginListen("spectator-request-follow", this._requestFollowMethod);
         this.context.connection.beginListen(RoomEvents.JoinedRoom, this._joinedRoomMethod);
-        document.addEventListener("keydown", evt => {
+        this.context.domElement.addEventListener("keydown", evt => {
+            if(!this.spectator.useKeys) return;
             if (evt.key === "f") {
                 this.onRequestFollowMe();
             }

package/src/engine-components/SyncedRoom.ts

@@ -20,8 +20,12 @@ export class SyncedRoom extends Behaviour {
 
     private _roomPrefix?: string;
 
+    public get RoomPrefix(): string | undefined {
+        return this._roomPrefix;
+    }
+
     awake() {
-        if(debug) console.log("Room", this.roomName, this.urlParameterName, this.joinRandomRoom, this.requireRoomParameter, this.autoRejoin);
+        if (debug) console.log("Room", this.roomName, this.urlParameterName, this.joinRandomRoom, this.requireRoomParameter, this.autoRejoin);
         if (this._roomPrefix === undefined) {
             this._roomPrefix = this.roomName;
             this.roomName = "";

package/src/engine-components/WebXR.ts

@@ -233,6 +233,7 @@ export class WebXR extends Behaviour {
             this._vrButton = vrButton;
             buttonsContainer.appendChild(vrButton);
         }
+        
         setTimeout(() => {
             WebXR.resetButtonStyles(vrButton);
             WebXR.resetButtonStyles(arButton);

package/src/engine-components/timeline/PlayableDirector.ts

@@ -126,8 +126,9 @@ export class PlayableDirector extends Behaviour {
     }
 
     onDestroy(): void {
-        for (const track of this._audioTracks) {
-            track.onDestroy?.();
+        for (const tracks of this._allTracks) {
+            for (const track of tracks)
+                track.onDestroy?.();
         }
     }
 
@@ -151,6 +152,7 @@ export class PlayableDirector extends Behaviour {
     }
 
     stop() {
+        for(const track of this._audioTracks) track.stop();
         if (this._isPlaying) {
             this._time = 0;
             this._isPlaying = false;

package/src/engine-components/timeline/TimelineTracks.ts

@@ -182,7 +182,7 @@ export class AnimationTrackHandler extends TrackHandler {
                     clip.tracks.push(track);
                     this.createPositionInterpolant(clip, clipModel, track);
                 }
-                else if(!foundRotationTrack){
+                else if (!foundRotationTrack) {
                     const trackName = clip.tracks[0].name.substring(0, indexOfProperty) + ".quaternion";
                     if (debug) console.warn("Create quaternion track", objName, targetObj);
                     const rot = targetObj.quaternion;
@@ -442,6 +442,8 @@ export class AnimationTrackHandler extends TrackHandler {
 
 }
 
+const muteAudioTracks = getParam("mutetimeline");
+
 export class AudioTrackHandler extends TrackHandler {
     models: Array<Models.ClipModel> = [];
 
@@ -469,7 +471,8 @@ export class AudioTrackHandler extends TrackHandler {
         const audio = new THREE.Audio(this.listener);
         audio.setVolume(model.asset.volume);
         const loader = new THREE.AudioLoader();
-        console.log(path, this.director.sourceId);
+        if (debug)
+            console.log(path, this.director.sourceId);
         loader.load(path, (buffer) => {
             audio.setBuffer(buffer);
             audio.loop = model.asset.loop;
@@ -495,18 +498,26 @@ export class AudioTrackHandler extends TrackHandler {
         }
     }
 
+    stop() {
+        for (let i = 0; i < this.audio.length; i++) {
+            const audio = this.audio[i];
+            if (audio?.isPlaying)
+                audio.stop();
+        }
+    }
     evaluate(time: number) {
+        if(muteAudioTracks) return;
         if (this.track.muted) return;
         for (let i = 0; i < this.models.length; i++) {
             const model = this.models[i];
             const audio = this.audio[i];
             if (time >= model.start && time <= model.end) {
-                if (this.director.isPaused) {
+                if (this.director.isPlaying == false) {
                     if (audio.isPlaying)
                         audio.stop();
                     if (this.lastTime === time) continue;
                 }
-                if (!audio.isPlaying) {
+                else if (!audio.isPlaying) {
                     audio.offset = model.clipIn + (time - model.start) * model.timeScale;
                     audio.play();
                 }

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

@@ -16,6 +16,11 @@ import { $shadowDomOwner } from "./BaseUIComponent";
 
 const debug = getParam("debugeventsystem");
 
+export enum EventSystemEvents {
+    BeforeHandleInput = "BeforeHandleInput",
+    AfterHandleInput = "AfterHandleInput",
+}
+
 export class EventSystem extends Behaviour {
 
 
@@ -45,6 +50,16 @@ export class EventSystem extends Behaviour {
         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) {
         MeshUIHelper.update(instance, context);
@@ -53,12 +68,8 @@ export class EventSystem extends Behaviour {
         MeshUIHelper.markDirty();
     }
 
-    static get instance(): EventSystem | null {
-        return this.systems[0];
-    }
-
-    private orbitControl: OrbitControls | null = null;
-    private orbitControlWasEnabled: boolean = false;
+    // private orbitControl: OrbitControls | null = null;
+    // private orbitControlWasEnabled: boolean = false;
     private raycaster: Raycaster[] = [];
 
     constructor() {
@@ -66,6 +77,9 @@ export class EventSystem extends Behaviour {
         EventSystem.systems.push(this);
     }
 
+    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
+    get isHoveringObjects() { return this.objectsHoveredThisFrame.length > 0; }
+
     onDestroy(): void {
         EventSystem.systems.splice(EventSystem.systems.indexOf(this), 1);
     }
@@ -90,7 +104,7 @@ export class EventSystem extends Behaviour {
     private _selectStartFn?: any;
     private _selectEndFn?: any;
     private _selectUpdateFn?: any;
-    private _onBeforeUpdateFn?: any;
+    private _handleEventFn?: any;
 
     onEnable(): void {
 
@@ -150,9 +164,14 @@ export class EventSystem extends Behaviour {
         WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
         // TODO: unregister
-        this._onBeforeUpdateFn ??= this.onBeforeUpdate.bind(this);
-        this.context.pre_update_callbacks.push(this._onBeforeUpdateFn);
-        this.context.input.addEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
+        this._handleEventFn ??= this.onHandleEvents.bind(this);
+        this.context.pre_update_callbacks.push(this._handleEventFn);
+        // If we subscribe to those events here we get duplicate event handling for e.g. button clicks
+        // I think this was done as a workaround for the InputField where we needed to handle the event within the browser event method
+        // without it (via pre_update callbacks) we handle the events outside of the browser loop delayed which doesnt work for some cases
+        // this.context.input.addEventListener(InputEvents.PointerDown, this._handleEventFn);
+        // this.context.input.addEventListener(InputEvents.PointerUp, this._handleEventFn);
+        // this.context.input.addEventListener(InputEvents.PointerMove, this._handleEventFn);
     }
 
     onDisable(): void {
@@ -160,8 +179,10 @@ export class EventSystem extends Behaviour {
         WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
         WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
-        this.context.pre_update_callbacks.splice(this.context.pre_update_callbacks.indexOf(this._onBeforeUpdateFn), 1);
-        this.context.input.removeEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
+        this.context.pre_update_callbacks.splice(this.context.pre_update_callbacks.indexOf(this._handleEventFn), 1);
+        // this.context.input.removeEventListener(InputEvents.PointerDown, this._handleEventFn);
+        // this.context.input.removeEventListener(InputEvents.PointerUp, this._handleEventFn);
+        // this.context.input.removeEventListener(InputEvents.PointerMove, this._handleEventFn);
     }
 
 
@@ -180,7 +201,8 @@ export class EventSystem extends Behaviour {
 
     private _didMove: boolean = false;
 
-    onBeforeUpdate() {
+
+    onHandleEvents() {
         this.objectsHoveredThisFrame.length = 0;
         this.resetMeshUIStates();
 
@@ -196,7 +218,6 @@ export class EventSystem extends Behaviour {
             this._didMove = true;
         }
 
-        const hits = this.performRaycast(null);
         let pointerId = 0;
         for (const i of this.context.input.foreachPointerId()) {
             const isDown = this.context.input.getPointerDown(i);
@@ -206,6 +227,7 @@ export class EventSystem extends Behaviour {
                 break;
             }
         }
+
         const ptr = this.context.input.getPointerEvent(pointerId);
         // console.log(ptr);
         const args: PointerEventData = new PointerEventData(ptr);
@@ -215,42 +237,25 @@ export class EventSystem extends Behaviour {
         args.isDown = this.context.input.getPointerDown(pointerId);
         args.isUp = this.context.input.getPointerUp(pointerId);
         args.isPressed = this.context.input.getPointerPressed(pointerId);
-        // if(args.isClicked || args.isUp) console.log("clicked", args);
-        this.lastPointerEvent = args;
+        if (debug && args.isClicked) console.log("CLICK", pointerId);
+
+        const hits = this.performRaycast(null);
         if (!hits) return;
+        this.lastPointerEvent = args;
 
-        // handle orbit control before handling input events
-        // this is just so button events that modify OrbitControls.enabled work
-        let orbitControlComponent: OrbitControls | null = null;
-        let previousOrbitControlState: boolean | null = null;
-        if (this.context.input.mouseDown && this.currentActiveMeshUIComponents.length > 0 && this.context.mainCameraComponent) {
-            orbitControlComponent = GameObject.getComponent(this.context.mainCameraComponent.gameObject, OrbitControls) ?? null;
-            if (orbitControlComponent) {
-                previousOrbitControlState = orbitControlComponent.enabled;
-                orbitControlComponent.enabled = false;
-            }
+        const evt = {
+            sender: this,
+            args: args,
+            hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
         }
-
-        // if (args.isClicked)
-        //     console.log(this.guid, ...hits);
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }))
         this.handleIntersections(hits, args);
-
-        if (orbitControlComponent) {
-            this.orbitControl = orbitControlComponent;
-            if (this.orbitControl?.enabled) {
-                this.orbitControlWasEnabled = this.orbitControl.enabled;
-                this.orbitControl.enabled = false;
-            }
-            else if (this.orbitControl && !this.context.input.mousePressed) {
-                this.orbitControl.enabled = this.orbitControlWasEnabled;
-                this.orbitControl = null;
-            }
-        }
-
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }))
     }
 
     private _tempComponentsArray: Behaviour[] = [];
     onBeforeRender() {
+
         if (this.lastPointerEvent)
             this.lastPointerEvent.used = false;
         else return;
@@ -374,6 +379,7 @@ export class EventSystem extends Behaviour {
                 const actualGo = parent[$shadowDomOwner].gameObject;
                 if (actualGo) {
                     const res = UIRaycastUtils.isInteractable(actualGo, this.out);
+                    // console.log(actualGo, res);
                     if (!res) return this.out.canvasGroup?.interactable ?? false;
                     canvasGroup = this.out.canvasGroup ?? null;
 

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

@@ -9,11 +9,11 @@ export class Raycaster extends Behaviour {
     }
 
     onEnable(): void {
-        EventSystem.instance?.register(this);
+        EventSystem.get(this.context)?.register(this);
     }
 
     onDisable(): void {
-        EventSystem.instance?.unregister(this);
+        EventSystem.get(this.context)?.unregister(this);
     }
 
     performRaycast(_opts: RaycastOptions | null = null): THREE.Intersection[] | null {