#Does needle recognize vertical planes in ar mode?

1 messages · Page 1 of 1 (latest)

raven fossil
#

Hi guyss, hope u r doing well 😄
I have another question, if I deploy to glitch and use ar mode, is it possible to track vertical planes to place something like a painting on a wall?

eager rover
#

Hello, currently WebXR plane detection is not implemented by default so we don't have support for planes right now. https://github.com/immersive-web/real-world-geometry/

But what you can do is get the XRSession and use hit testing to detect "vertical" surfaces. Have a look at the WebXR.ts script at line 561 (this is where the AR reticle is updated)

raven fossil
#

hi @eager rover

eager rover
#

Here's some code that you need to add it:

first get the hit test source for the viewer

session.requestReferenceSpace('viewer').then((referenceSpace) => {
            session.requestHitTestSource({ space: referenceSpace }).then((source) => {
                this.hitTestSource = source;
            });
        });

then you can use that to hit test (the XRFrame is the first argument in onBeforeRender(xrFrame)

const hitTestResults = frame.getHitTestResults(this.hitTestSource);
        if (hitTestResults.length) {
            const hit = hitTestResults[0];
            const referenceSpace = this.webxr.context.renderer.xr.getReferenceSpace();
            if (referenceSpace) {
                const pose = hit.getPose(referenceSpace);
                this.sessionRoot?.onUpdate(this.webxr.Rig, session, pose);

                if (this.reticle) {
                    this.reticle.visible = this.reticleActive;
                    if (this.reticleActive) {
                        if (pose) {
                            const matrix = pose.transform.matrix;
                            this.reticle.matrix.fromArray(matrix);
                            if (this.webxr.Rig)
                                this.reticle.matrix.premultiply(this.webxr.Rig.matrix);
                        }
                    }
                }
            }

        }
#

hope that helps to get you started. And hello @raven fossil 🙂

#

to look at the script you can just click this blue link

unknown.png