Headset support

🧑‍💻 Technical Support
1

I recently loaded a project on a Quest which was designed for mobile, and was amazed to see that it runs very well.

But there are some HTML elements that appear in a nifty floating window – how do I control this thing? What is it called?

And how can I have the project adapt to the platform? I.e., have certain elements appear ONLY on mobile, and others only on headset?

Thanks

2

It seems like you might be working with a sample project that involves AFrame. Could you share a bit more context?

3

Yes it is an A-Frame project. Here is a published link: Healthy Living with Physician's Weekly

Not sure what you mean by context?

The project loads on headset – but we don’t like the floating window for the HTML buttons. I.e., the non-XR non-Aframe non-ThreeJS elements on the page.

How can we hide/show nodes based on the client platform, i.e., mobile or headset?

Or are you saying that this is all being handled directly by A-Frame?

4

Thanks for sharing!

I was wondering if you cloned one of our sample projects—I’d like to take a look at the structure and frameworks for reference :slightly_smiling_face:

Yes, AFrame would handle that. If you haven’t already, I recommend checking out their docs and sample projects—they have examples that run across multiple devices with variations for each one.

5

No this was not a clone of a sample … it was built from scratch using aframe.

image

I’m not finding any documentation about this panel, which contains our 2D elements.

What is generating this?

How can I hide it?

And, again, mainly,
How can we hide/show nodes based on the client platform, i.e., mobile or headset?

If the site is run on a headset, we want to show 3D buttons for these actions, rather than 2D HTML buttons.

THanks

6

This should point you in the right direction, I didn’t realize you we’re talking about the XR tablet.

To answer your other question:

AFrame provides some helpful components for hiding and showing things based on current device.

9

Thanks, that was very useful!

And what’s the best way to check from my AFrame components whether user is in AR or XR? There are various behaviors that need to be adjusted.

E.g., say I want to disable xrextras-pinch-scale ?

10

I’d do a custom component to manage everything like this.


AFRAME.registerComponent('check-xr-mode', {
  init: function () {
    const renderer = this.el.sceneEl.renderer;

    // Wait for the renderer to be initialized
    if (renderer && renderer.xr) {
      const session = renderer.xr.getSession();

      if (session) {
        // Check the mode of the XR session
        const mode = session.mode;

        if (mode === 'immersive-ar') {
          // User is in AR mode
          console.log('User is in AR mode');
          // Disable xrextras-pinch-scale
          this.el.removeAttribute('xrextras-pinch-scale');
        } else if (mode === 'immersive-vr') {
          // User is in VR mode
          console.log('User is in VR mode');
          // Enable xrextras-pinch-scale if needed
          this.el.setAttribute('xrextras-pinch-scale', '');
        } else {
          // User is not in an XR session
          console.log('User is not in XR mode');
          // Adjust behaviors for non-XR mode if necessary
        }
      } else {
        // No XR session is active
        console.log('No XR session is active');
      }
    }
  }
});
1 Like
11

Hey !

We faced the same problems :grin: I scratched my head a lot yesterday on this panel and AR/XR behaviours

To complement @GeorgeButler answer,
This template has a responsive-immersive component that also does exactly what we need

It is very well done
In my case for exemple I had to adapt the fog parameters depending the device
It will work for false/true parameters

image
image1024×644 42.2 KB

2 Likes
12

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.