@needle-tools/engine 2.26.0-pre → 2.26.1-pre

package/src/engine-components/SpectatorCamera.ts

@@ -4,21 +4,22 @@ import * as THREE from "three";
 import { OrbitControls } from "./OrbitControls";
 import { WebXR, WebXREvent } from "./WebXR";
 import { AvatarMarker } from "./WebXRAvatar";
-import { XRFlag, XRStateFlag } from "./XRFlag";
+import { XRStateFlag } from "./XRFlag";
 import { SmoothFollow } from "./SmoothFollow";
-import { setWorldPosition, setWorldQuaternion, getWorldPosition, getWorldQuaternion } from "../engine/engine_three_utils";
+import { setWorldPosition, setWorldQuaternion, getWorldPosition, getWorldQuaternion, lookAtInverse } from "../engine/engine_three_utils";
+import { ArrayCamera } from "three";
+import { KeyCode } from "../engine/engine_input";
 
 export class SpectatorCamera extends Behaviour {
 
     cam: Camera | null = null;
 
-    private _firstPersonMode: boolean | undefined = false;
+    private _firstPersonMode: boolean | undefined = true;
     get firstPersonMode(): boolean {
-        return true;
         return this._firstPersonMode ?? false;
     }
-    set firstPersonMode(_val: boolean) {
-        // this._firstPersonMode = val;
+    set firstPersonMode(val: boolean) {
+        this._firstPersonMode = val;
         // if (this._firstPersonMode) this.enableFirstPersonMode();
         // else this.enableThirdPersonMode();
     }
@@ -62,7 +63,6 @@ export class SpectatorCamera extends Behaviour {
     private orbit: OrbitControls | null = null;
     private firstPersonFollow: SmoothFollow | null = null;
     private spectatorUIDomElement: HTMLElement | null = null;
-    private _avatar: AvatarMarker | null = null;
 
     private eventSub_WebXRRequestStartEvent: Function | null = null;
     private eventSub_WebXRStartEvent: Function | null = null;
@@ -72,14 +72,6 @@ export class SpectatorCamera extends Behaviour {
 
         GameObject.setActive(this.gameObject, false);
 
-        const uiQuery = "#spectator-camera-ui";
-        this.spectatorUIDomElement = this.context.domElement.querySelector(uiQuery);
-        if (!this.spectatorUIDomElement) {
-            console.warn("Could not find spectator camera UI element", uiQuery);
-        }
-        this.spectatorUIDomElement?.classList.add("hidden");
-
-
         if (!this.isSupportedPlatform()) {
             console.log("Disable spectator cam", window.navigator.userAgent, this);
             return;
@@ -93,6 +85,22 @@ export class SpectatorCamera extends Behaviour {
             // this.cam = GameObject.addNewComponent(this.gameObject, Camera) as Camera;
         }
 
+        const uiQuery = "#spectator-camera-ui";
+        this.spectatorUIDomElement = this.context.domElement.querySelector(uiQuery);
+        if (!this.spectatorUIDomElement) {
+            console.warn("Could not find spectator camera UI element", uiQuery);
+            // this.spectatorUIDomElement = document.createElement("div");
+            // this.spectatorUIDomElement.id = "spectator-camera-ui";
+            // this.spectatorUIDomElement.classList.add("desktop");
+            // this.context.domElement.appendChild(this.spectatorUIDomElement);
+            
+            // const toggle = document.createElement("button");
+            // toggle.id = "toggle-spectator-view";
+            // this.spectatorUIDomElement.appendChild(toggle);
+        }
+        this.spectatorUIDomElement?.classList.add("hidden");
+
+
         if (this.cam) {
             this.cam.enabled = true;
             this._orbitStartPos.copy(getWorldPosition(this.cam.cam));
@@ -189,53 +197,37 @@ export class SpectatorCamera extends Behaviour {
     private onXRSessionStart(_evt) {
         this._sessionHasStarted = true;
         this.updateUI();
+
+        if (this.context.mainCamera) {
+            const cam = this.context.renderer.xr.getCamera(this.context.mainCamera) as ArrayCamera;
+            this.setupFollowMode(cam);
+        }
     }
 
     private onXRSessionEnded(_evt) {
         this._sessionHasStarted = false;
+        this._firstPersonIsSetup = false;
         this.spectatorUIDomElement?.classList.add("hidden");
         GameObject.setActive(this.gameObject, false);
     }
 
     private _sessionHasStarted: boolean = false;
-    private _isFirstStart = true;
     private _firstPersonIsSetup: boolean = false;
     private _orbitStartPos: THREE.Vector3 = new THREE.Vector3();
     private _orbitStartRot: THREE.Quaternion = new THREE.Quaternion();
     private _orbitStartPos2: THREE.Vector3 = new THREE.Vector3();
     private _orbitStartRot2: THREE.Quaternion = new THREE.Quaternion();
 
-
     // TODO: only show Spectator cam for DesktopVR;
     // don't show for AR, don't show on Quest
     // TODO: properly align cameras on enter/exit VR, seems currently spectator cam breaks alignment
     onAfterRender(): void {
         if (!this.cam) return;
 
-        // if (this.context.time.frameCount % 120 === 0) {
-        //     this.firstPersonMode = !this.firstPersonMode;
-        // }
-
-        if (this.firstPersonMode) {
-            if (!this._firstPersonIsSetup) {
-                if (!this._avatar || this._avatar?.destroyed) {
-                    for (const av of AvatarMarker.instances) {
-                        if (av.avatar && "isLocalAvatar" in av.avatar && av.avatar?.isLocalAvatar) {
-                            this._avatar = av;
-                            const head = av.avatar.head;
-                            if (!head) continue;
-                            this.setupFollowMode(head);
-                        }
-                    }
-                }
-                // else {
-                //     if (this.context.mainCamera) {
-                //         this.setupFollowMode(this.context.mainCamera, true);
-                //     }
-                // }
-            }
-        }
-
+        if(this.context.input.isKeyDown(KeyCode.KEY_S))
+            this.firstPersonMode = !this.firstPersonMode;
+        
+        this.updateFollowSettings();
 
         const renderer = this.context.renderer;
         const xrWasEnabled = renderer.xr.enabled;
@@ -295,20 +287,22 @@ export class SpectatorCamera extends Behaviour {
         this.resetAvatarFlags();
     }
 
-    private setupFollowMode(object: THREE.Object3D, flipForward: boolean = true) {
+    private setupFollowMode(object: THREE.Object3D) {
         if (!object) return;
         if (!this.cam) return;
         if (this._firstPersonIsSetup) return;
         this._firstPersonIsSetup = true;
 
-        const target = object.add(new THREE.Object3D());
-        target.add(new THREE.AxesHelper());
+
         this.firstPersonFollow = GameObject.addNewComponent(this.cam.gameObject, SmoothFollow);
+
+        const target = new THREE.Object3D();
+        object.add(target);
+        target.add(new THREE.AxesHelper(.2))
         this.firstPersonFollow.target = target;
-        this.firstPersonFollow.followFactor = 12;
-        this.firstPersonFollow.rotateFactor = 5;
-        // TODO: figure out why this needs flipping when we use the spectator cam without an Avatar
-        if (flipForward) this.firstPersonFollow.flipForward = true;
+
+        this.updateFollowSettings();
+
         const perspectiveCamera = this.context.mainCamera as THREE.PerspectiveCamera;
         if (perspectiveCamera) {
             this.cam.cam.near = perspectiveCamera.near;
@@ -318,6 +312,26 @@ export class SpectatorCamera extends Behaviour {
         if (this.orbit) this.orbit.enabled = false;
     }
 
+    private updateFollowSettings() {
+        const target = this.firstPersonFollow?.target;
+        if (!target || !this.firstPersonFollow) return;
+        if (this.firstPersonMode === false) {
+            this.firstPersonFollow.followFactor = 3;
+            this.firstPersonFollow.rotateFactor = 2;
+            this.firstPersonFollow.flipForward = false;
+            target.position.set(0, .5, 1.5);
+            target.quaternion.identity();
+            // lookAtInverse(target, new THREE.Vector3(0, 0, 0));
+        }
+        else {
+            target.position.set(0, 0, 0);
+            target.quaternion.identity();
+            this.firstPersonFollow.followFactor = 12;
+            this.firstPersonFollow.rotateFactor = 5;
+            this.firstPersonFollow.flipForward = false;
+        }
+    }
+
     private setAvatarFlagsBeforeRender() {
         for (const av of AvatarMarker.instances) {
             if (av.avatar && "isLocalAvatar" in av.avatar) {

package/src/engine-components/WebXRController.ts

@@ -249,6 +249,7 @@ export class WebXRController extends Behaviour {
         this.webXR.Rig?.add(this.controller);
         this.webXR.Rig?.add(this.raycastLine);
         this.raycastLine?.add(this._raycastHitPoint);
+        this._raycastHitPoint.visible = false;
         this.hand.add(this.handPointerModel);
         console.log("ADDED TO RIG", this.webXR.Rig);