How to build XR-only Components

Many components are only needed once a VR or AR session is entered.

To ensure components don’t update outside of xr sessions, you can use the following code snippet.

import {Component} from '@wonderlandengine/api';

export class ActiveOnlyInVr extends Component {
  static TypeName = 'active-only-in-vr';

  start() {
    this.engine.onXRSessionStart.add(this.onXRSessionStart);
    this.engine.onXRSessionEnd.add(this.onXRSessionEnd);

    /* Session might already be active */
    this.active = !!this.engine.xr;
  }

  onDestroy() {
    this.engine.onXRSessionStart.remove(this.onXRSessionStart);
    this.engine.onXRSessionEnd.remove(this.onXRSessionEnd);
  }

  update() {
    /* Only called when xrSession is valid */
  }

  onXRSessionStart = s => {
    this.active = true;
  };

  onXRSessionEnd = s => {
    this.active = false;
  };
});

(De-)Activate other Components

If you want to disable/enable other components based on the session state, without changing their code, you can use the vr-active-mode-switch components, which will disable/enable components depending on whether the user is in an XR session or not.