Needle Engine 3.44.5

Files changed (7) hide show

src/engine/engine_input.ts +16 -2
src/engine-components/ui/EventSystem.ts +8 -0
src/engine/export/gltf/index.ts +1 -1
src/needle-engine.ts +2 -1
src/engine/xr/NeedleXRController.ts +7 -5
src/engine-components/webxr/WebARSessionRoot.ts +1 -1
src/engine-components/webxr/controllers/XRControllerMovement.ts +40 -25

src/engine/engine_input.ts CHANGED Viewed

@@ -55,6 +55,19 @@
     buttonName: ButtonName | "none";
 }
+declare type OnPointerHitsEvent = (args: OnPointerHitEvent) => void;
+declare type OnPointerHitEvent = {
+    /** The object that raised the event */
+    sender: object;
+    /** The pointer event that invoked the event */
+    event: NEPointerEvent;
+    /** The intersections that were generated from this event (or are associated with this event in any way) */
+    hits: Intersection[];
+}
+export interface IPointerHitEventReceiver {
+    onPointerHits: OnPointerHitsEvent;
+}
 /** An intersection that is potentially associated with a pointer event */
 export declare type NEPointerEventIntersection = Intersection & { event?: NEPointerEvent };
@@ -64,9 +77,10 @@
     readonly deviceIndex: number;
     /** The origin of the event contains a reference to the creator of this event.
-     * This can be the Needle Engine input system or e.g. a XR controller
+     * This can be the Needle Engine input system or e.g. a XR controller.
+     * Implement `onPointerHits` to receive the intersections of this event.
      */
-    readonly origin: object;
+    readonly origin: object & Partial<IPointerHitEventReceiver>;
     /** the browser event that triggered this event (if any) */
     readonly source: Event | null;

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

@@ -187,8 +187,16 @@
                 hit.event = pointerEvent;
                 pointerEvent.intersections.push(hit);
             }
+            if (pointerEvent.origin.onPointerHits) {
+                pointerEvent.origin.onPointerHits({
+                    sender: this,
+                    event: pointerEvent,
+                    hits
+                });
+            }
         }
         if (debug && data.isClick) {
             showBalloonMessage("EventSystem: " + data.pointerId + " - " + this.context.time.frame + " - Up:" + data.isUp + ", Down:" + data.isDown)
         }

src/engine/export/gltf/index.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { AnimationClip, Object3D } from "three";
-import { GLTFExporter, GLTFExporterOptions } from "three/examples/jsm/exporters/GLTFExporter";
+import { GLTFExporter, GLTFExporterOptions } from "three/examples/jsm/exporters/GLTFExporter.js";
 import GLTFMeshGPUInstancingExtension from "../../../include/three/EXT_mesh_gpu_instancing_exporter.js";
 import { AnimationUtils } from "../../engine_animation.js";

src/needle-engine.ts CHANGED Viewed

@@ -7,7 +7,7 @@
 export * from "./engine-schemes/api.js";
 // make accessible for external javascript
-import { Context, loadSync } from "./engine/api.js";
+import { Context, loadSync, NeedleXRSession } from "./engine/api.js";
 const Needle = {
     Context: Context,
     glTF: {
@@ -29,6 +29,7 @@
 import * as Components from "./engine-components/codegen/components.js";
 registerGlobal(Components);
+Needle["NeedleXRSession"] = NeedleXRSession;
 import { GameObject } from "./engine-components/Component.js";
 for (const method of Object.getOwnPropertyNames(GameObject)) {

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { RGBAColor } from "../../engine-components/js-extensions/RGBAColor.js";
 import { Context } from "../engine_context.js";
 import { Gizmos } from "../engine_gizmos.js";
-import { type InputEventNames, InputEvents, NEPointerEvent, type NEPointerEventInit } from "../engine_input.js";
+import { type InputEventNames, InputEvents, IPointerHitEventReceiver, NEPointerEvent, type NEPointerEventInit } from "../engine_input.js";
 import { getTempQuaternion, getTempVector, getWorldQuaternion } from "../engine_three_utils.js";
 import type { ButtonName, IGameObject, Vec3, XRControllerButtonName, XRGestureName } from "../engine_types.js";
 import { getParam } from "../engine_utils.js";
@@ -70,7 +70,7 @@
  * Inputs will also be emitted as pointer events on `this.context.input` - so you can receive controller inputs on objects using the appropriate input events on your components (e.g. `onPointerDown`, `onPointerUp` etc) - use the `pointerType` property to check if the event is from a controller or not
  * @link https://developer.mozilla.org/en-US/docs/Web/API/XRInputSource
  */
-export class NeedleXRController {
+export class NeedleXRController implements IPointerHitEventReceiver {
     /** the Needle XR Session */
     readonly xr: NeedleXRSession;
     get context() { return this.xr.context; }
@@ -274,6 +274,9 @@
         }
     }
+    onPointerHits = _evt => {
+    }
     onUpdate(frame: XRFrame) {
         this.onUpdateFrame(frame);
         this.updateInputEvents();
@@ -737,12 +740,11 @@
     private onUpdateMove() {
         let didMove = false;
         const dist = this._lastPointerMovePosition.distanceTo(this.gripWorldPosition);
-        if (dist > .02) didMove = true;
+        if (dist > .05 * this.xr.rigScale) didMove = true;
         if (!didMove) {
             const angle = this._lastPointerMoveQuaternion.angleTo(this.gripWorldQuaternion);
-            if (angle > .02) didMove = true;
+            if (angle > .01) didMove = true;
         }
         if (didMove) {
             this._didMoveLastFrame = true;
             this._lastPointerMovePosition.copy(this.gripWorldPosition);

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

@@ -278,7 +278,7 @@
             else {
                 reticle = new Mesh(
                     new RingGeometry(0.07, 0.09, 32).rotateX(- Math.PI / 2),
-                    new MeshBasicMaterial({ side: DoubleSide })
+                    new MeshBasicMaterial({ side: DoubleSide, depthTest: false, depthWrite: false, transparent: true, opacity: 1, color: 0xffffff })
                 ) as any as IGameObject;
                 reticle.name = "AR Placement Reticle";
             }

src/engine-components/webxr/controllers/XRControllerMovement.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AdditiveBlending, BufferAttribute, Color, DoubleSide, Line, Line3, Mesh, MeshBasicMaterial, Object3D, RingGeometry, SubtractiveBlending, Vector3 } from "three";
+import { AdditiveBlending, BufferAttribute, Color, DoubleSide, Intersection, Line, Line3, Mesh, MeshBasicMaterial, Object3D, RingGeometry, SphereGeometry, SubtractiveBlending, Vector3 } from "three";
 import { Line2 } from "three/examples/jsm/lines/Line2.js";
 import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
@@ -23,10 +23,10 @@
 export class XRControllerMovement extends Behaviour implements XRMovementBehaviour {
     /** Movement speed in meters per second
-     * @default 1
+     * @default 1.5
     */
     @serializable()
-    movementSpeed = 1;
+    movementSpeed = 1.5;
     /** How many degrees to rotate the XR rig when using the rotation trigger
      * @default 60
@@ -186,7 +186,7 @@
         for (let i = 0; i < session.controllers.length; i++) {
             const ctrl = session.controllers[i];
             let line = this._lines[i];
-            if (!ctrl.connected || !ctrl.isTracking ||
+            if (!ctrl.connected || !ctrl.isTracking ||
                 !ctrl.ray || ctrl.targetRayMode === "transient-pointer" ||
                 !ctrl.hasSelectEvent
             ) {
@@ -218,17 +218,26 @@
     protected renderHits(session: NeedleXRSession) {
         for (const disc of this._hitDiscs) {
-            if (disc) disc.visible = false;
+            if (!disc) continue;
+            const ctrl = disc["controller"];
+            if (!ctrl || !ctrl.connected || !ctrl.isTracking) {
+                disc.visible = false;
+                continue;
+            }
         }
         for (let i = 0; i < session.controllers.length; i++) {
             const ctrl = session.controllers[i];
             if (!ctrl.connected || !ctrl.isTracking || !ctrl.ray || !ctrl.hasSelectEvent) continue;
             // save performance by only raycasting every nth frame
-            if (this.context.time.frame % 2 !== 0) {
+            const interval = this.context.time.smoothedFps >= 59 ? 1 : 10;
+            if ((this.context.time.frame + ctrl.index) % interval !== 0) {
                 const disc = this._hitDiscs[i];
                 // if the disc had a hit last frame, we can show it again
-                if (disc && disc["hit"]) disc.visible = true;
+                if (disc && disc["hit"]) {
+                    disc.visible = true;
+                    this.hitPointerSetPosition(ctrl, disc, disc["hit"].distance);
+                }
                 continue;
             }
@@ -237,7 +246,10 @@
             let disc = this._hitDiscs[i];
             if (disc) // save the hit object on the disc
+            {
+                disc["controller"] = ctrl;
                 disc["hit"] = hit;
+            }
             if (hit) {
                 const rigScale = (session.rigScale ?? 1);
@@ -258,14 +270,12 @@
                 disc["hit"] = hit;
                 if (hit.normal) {
-                    const factor = 0.02 * rigScale;
-                    disc.position.set(0, 0, -.1 * factor).applyQuaternion(ctrl.rayWorldQuaternion);
-                    disc.position.add(hit.point);
+                    this.hitPointerSetPosition(ctrl, disc, hit.distance);
                     const worldNormal = hit.normal.applyQuaternion(getWorldQuaternion(hit.object));
                     disc.quaternion.setFromUnitVectors(up, worldNormal);
                 }
                 else {
-                    disc.position.add(hit.point);
+                    this.hitPointerSetPosition(ctrl, disc, hit.distance);
                 }
                 if (disc.parent !== this.context.scene) {
@@ -279,6 +289,10 @@
             }
         }
     }
+    private hitPointerSetPosition(ctrl: NeedleXRController, disc: Object3D, distance: number) {
+        disc.position.copy(ctrl.rayWorldPosition)
+        disc.position.add(getTempVector(0, 0, distance - .01).applyQuaternion(ctrl.rayWorldQuaternion));
+    }
     protected hitPointRaycastFilter: RaycastTestObjectCallback = (obj: Object3D) => {
         // by default dont raycast ont skinned meshes using the hit point raycast (because it is a big performance hit and only a visual indicator)
@@ -290,11 +304,12 @@
     protected createHitPointObject(): Object3D {
         var container = new Object3D();
         const disc = new Mesh(
-            new RingGeometry(.3, 0.5, 32).rotateX(- Math.PI / 2),
+            new SphereGeometry(.3, 6, 6),// new RingGeometry(.3, 0.5, 32).rotateX(- Math.PI / 2),
             new MeshBasicMaterial({
                 color: 0xeeeeee,
                 opacity: .7,
                 transparent: true,
+                depthTest: false,
                 side: DoubleSide,
             })
         );
@@ -302,19 +317,19 @@
         disc.layers.enable(2);
         container.add(disc);
-        const disc2 = new Mesh(
-            new RingGeometry(.43, 0.5, 32).rotateX(- Math.PI / 2),
-            new MeshBasicMaterial({
-                color: 0x000000,
-                opacity: .2,
-                transparent: true,
-                side: DoubleSide,
-            })
-        );
-        disc2.layers.disableAll();
-        disc2.layers.enable(2);
-        disc2.position.y = .01;
-        container.add(disc2);
+        // const disc2 = new Mesh(
+        //     new RingGeometry(.43, 0.5, 32).rotateX(- Math.PI / 2),
+        //     new MeshBasicMaterial({
+        //         color: 0x000000,
+        //         opacity: .2,
+        //         transparent: true,
+        //         side: DoubleSide,
+        //     })
+        // );
+        // disc2.layers.disableAll();
+        // disc2.layers.enable(2);
+        // disc2.position.y = .01;
+        // container.add(disc2);
         return container;
     }