Use "hide-in-ar-mode" component for Anime UI's background model

[klausw]

Description:
Hide Anime-UI's background while in AR mode

Changes proposed:

• add a small component to handle visibility changes based on "ar-mode" state
• use this for the "engine" GLTF model

I'm not very familiar with best practices for components. Would this be a candidate for being added as a shipped-by-default component for easier reuse?

Known issue: it unconditionally sets the object visible on exiting AR mode. For a shared component, would it be necessary to track if the visible attribute was changed elsewhere and restore an appropriate value?

[klausw]

FYI, it seems that I unintentionally had an invisible background while testing this example in AR mode due to GLTF loading being broken. The background unexpectedly appeared in AR mode when that was fixed by afadd06

[dmarcos]

That sounds like a good idea

[dmarcos]

Thanks. Wonder if this should be built-in. Not just part of examples.

[machenmusik]

That was one of the first things I did originally with aframe-ar since it's almost certainly what one wants... +1 for that being default from me. null

[klausw]

FYI, I tweaked this a bit for https://xr-spinosaurus.glitch.me/ to save/restore visibility.

Is there a best practice for mixin entity attributes to avoid potential name collisions, i.e. prefixing with the component name? Or can it do some magic internally to avoid that?

Edit: deleted buggy code, see next comment.

[klausw]

Sigh, I got the nesting wrong in the previous comment, should have been something like this:

      AFRAME.registerComponent('hide-in-ar-mode', {
        // Set this object invisible while in AR mode.
        init: function () {
          this.el.sceneEl.addEventListener('enter-vr', (ev) => {
            this.wasVisible = this.el.getAttribute('visible');
            if (this.el.sceneEl.is('ar-mode')) {
              this.el.setAttribute('visible', false);
            }
          });
          this.el.sceneEl.addEventListener('exit-vr', (ev) => {
            if (this.wasVisible) this.el.setAttribute('visible', true);
          });
        }
      });

Anyway, I'll leave best practices to the A-Frame experts :-)

[dmarcos]

I just bumped THREE to r113 and officially kicks off the 1.1.0 cycle :) We can revisit this. It would be indeed a super useful feature but not yet sure if it should be part of the core. I'm on the fence.

[JamesBotterill]

This should really also include the opposite action to only show in AR mode.

    // Set this object visible while in AR
    init: function () {
      this.el.sceneEl.addEventListener('enter-vr', (ev) => {
            this.wasVisible = this.el.getAttribute('visible');
            if (this.el.sceneEl.is('ar-mode')) {
              this.el.setAttribute('visible', true);
            }
          });
          this.el.sceneEl.addEventListener('exit-vr', (ev) => {
            if (this.wasVisible) this.el.setAttribute('visible', false);
          });
    }
  }); ```

[dmarcos]

Thank you! Merging this. I'm working on an AR example and it will be handy