Merge pull request #182 from dli7319/options

Add formFactor to Options

Author: dli7319

src/core/Core.ts

@@ -30,7 +30,6 @@ import {ScreenshotSynthesizer} from './components/ScreenshotSynthesizer';
 import {ScriptsManager} from './components/ScriptsManager';
 import {WaitFrame} from './components/WaitFrame';
 import {
-  IMMERSIVE_AR,
   WebXRSessionEventType,
   WebXRSessionManager,
 } from './components/WebXRSessionManager';
@@ -318,7 +317,7 @@ export class Core {
     this.webXRSessionManager = new WebXRSessionManager(
       this.renderer,
       this.webXRSettings,
-      IMMERSIVE_AR
+      options.xrSessionMode
     );
     this.webXRSessionManager.addEventListener(
       WebXRSessionEventType.SESSION_START,

src/core/Options.ts

@@ -14,6 +14,7 @@ import {SoundOptions} from '../sound/SoundOptions';
 import {deepMerge} from '../utils/OptionsUtils';
 import {DeepPartial, DeepReadonly} from '../utils/Types';
 import {WorldOptions} from '../world/WorldOptions';
+import {getUrlParameter} from '../utils/utils';
 
 /**
  * Default options for XR controllers, which encompass hands by default in
@@ -53,6 +54,9 @@ export class XRTransitionOptions {
   defaultBackgroundColor = 0xffffff;
 }
 
+const FORM_FACTORS = ['auto', 'xr', 'hud', 'vr', 'desktop', 'mobile'] as const;
+export type FormFactor = (typeof FORM_FACTORS)[number];
+
 /**
  * A central configuration class for the entire XR Blocks system. It aggregates
  * all settings and provides chainable methods for enabling common features.
@@ -140,13 +144,59 @@ export class Options {
     microphone: false,
   };
 
+  xrSessionMode: XRSessionMode = 'immersive-ar';
+
+  private _formFactor: FormFactor = 'auto';
+
+  get formFactor() {
+    return this._formFactor;
+  }
+
+  /**
+   * Form factor is a preset that configures the experience for a specific
+   * device type. Currently it only controls whether the simulator is enabled
+   * and should always be autostarted.
+   */
+  set formFactor(formFactor: FormFactor) {
+    this._formFactor = formFactor;
+    this.enableSimulator =
+      formFactor === 'desktop' ||
+      formFactor === 'auto' ||
+      formFactor === 'mobile';
+    this.xrButton.alwaysAutostartSimulator = formFactor === 'desktop';
+    if (formFactor === 'vr') {
+      this.enableVR();
+    }
+  }
+
   /**
    * Constructs the Options object by merging default values with provided
    * custom options.
    * @param options - A custom options object to override the defaults.
    */
   constructor(options?: DeepReadonly<DeepPartial<Options>>) {
     deepMerge(this, options);
+    this.parseUrlParams();
+  }
+
+  protected parseUrlParams() {
+    const formFactorUrlParam = getUrlParameter('formFactor');
+    if (
+      formFactorUrlParam &&
+      FORM_FACTORS.includes(formFactorUrlParam as FormFactor)
+    ) {
+      this.formFactor = formFactorUrlParam as FormFactor;
+    }
+  }
+
+  /**
+   * Sets the session mode to VR and disables the simulator passthrough scene.
+   */
+  enableVR() {
+    this.xrSessionMode = 'immersive-vr';
+    this.simulator.scenePath = null;
+    this.simulator.scenePlanesPath = null;
+    return this;
   }
 
   /**

src/core/components/WebXRSessionManager.ts

@@ -1,8 +1,5 @@
 import * as THREE from 'three';
 
-export const IMMERSIVE_AR = 'immersive-ar';
-export const IMMERSIVE_VR = 'immersive-vr';
-
 declare global {
   interface XRSystem {
     offerSession?: (

src/simulator/SimulatorOptions.ts

@@ -25,9 +25,9 @@ export interface SimulatorCustomInstruction {
 
 export class SimulatorOptions {
   initialCameraPosition = {x: 0, y: 1.5, z: 0};
-  scenePath?: string =
+  scenePath: string | null =
     XR_BLOCKS_ASSETS_PATH + 'simulator/scenes/XREmulatorsceneV5_livingRoom.glb';
-  scenePlanesPath?: string =
+  scenePlanesPath: string | null =
     XR_BLOCKS_ASSETS_PATH +
     'simulator/scenes/XREmulatorsceneV5_livingRoom_planes.json';
   videoPath?: string = undefined;