Detect when reticle appear

🌵 Needle Engine
1

Hello, is there a way to detect when placement reticle appear?

2

In the context of Needle Engine and WebAR development, the reticle appearance can be detected by checking its visibility status. Here’s how you could do it based on the provided code:

  1. Check Reticle Visibility:

    • Regularly check the visibility property of the reticle object. The reticle appears when this property becomes true.

  2. Using Update Loop:

    import { Behaviour, GameObject, IGameObject } from "@needle-tools/engine";
import { Vector3, Quaternion } from "three";

class ReticleCheck extends Behaviour {

    private reticle: IGameObject | undefined;

    awake() {
        // Assume reticle is initialized somewhere
        this.reticle = this.context.scene.getObjectByName("AR Placement Reticle") as IGameObject;
    }

    update() {
        if (this.reticle && this.reticle.visible) {
            console.log("Reticle is visible");
        }
    }
}

  3. Event-Based Detection:
    If there is an event mechanism in place when the reticle becomes visible (not evident from the snippets), you could hook into that event.

In your case, a possible implementation is using the updateReticleAndHits function whenever the reticle is updated based on the hit test (see the documentation). Check for whether the reticle visibility changes from false to true.

To improve accuracy, make sure to integrate this logic into components that handle reticle updates. For more detailed information, refer to the Needle Engine documentation.

24 replies left
thread_mlCqwy0UpeetQXoNj7b25ZTk
Reply to this message to continue the conversation

3

Hello @Tomislav_Stefan currently the reticle array is a private property in the WebARSessionRoot component (it is _reticle : Array<Object3D>) but is not meant to be modified from the outside.

For my understanding: Why do you want to detect it?

You can also assign a custom reticle object to the WebXR component and to that reticle simply add a component - you’ll then can use the component onEnable or start events as usual.

4

Well after some thinking, another approach may be to detect when 3D Object is set in the environment and visible.

5

So you need to know when the 3D scene is placed? For that an event exists:

WebARSessionRoot.onPlaced(evt => { console.log("PLACED") });
6

Where do I register for that event? Is it on the app Start or EnterXR?

7

It’s a static event so just put the code like this in e.g. main.ts in global scope