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.

 1import {Component} from '@wonderlandengine/api';
 2
 3export class ActiveOnlyInVr extends Component {
 4  static TypeName = 'active-only-in-vr';
 5
 6  start() {
 7    this.engine.onXRSessionStart.add(this.onXRSessionStart);
 8    this.engine.onXRSessionEnd.add(this.onXRSessionEnd);
 9
10    /* Session might already be active */
11    this.active = !!this.engine.xr;
12  }
13
14  onDestroy() {
15    this.engine.onXRSessionStart.remove(this.onXRSessionStart);
16    this.engine.onXRSessionEnd.remove(this.onXRSessionEnd);
17  }
18
19  update() {
20    /* Only called when WL.xrSession is valid */
21  }
22
23  onXRSessionStart = s => {
24    this.active = true;
25  };
26
27  onXRSessionEnd = s => {
28    this.active = false;
29  };
30});

(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.