File

src/managers/three-manager/xr/vr-manager.ts

Description

VR manager for VR related operations.

Extends

XRManager

Index

Properties
Methods

Constructor

constructor()

Create the VR manager.

Properties

Private controller1
Type : any

The VR controller for movement.

Private controller2
Type : any

The VR controller for movement.

Private controllerGrip1
Type : any

The VR controller representation

Private controllerGrip2
Type : any

The VR controller representation

Private onControllerSelectEnd
Type : function

Listener for when the "Select Start" button is released.

Private onControllerSelectStart
Type : function

Listener for when the "Select Start" button is pushed.

Static Readonly SESSION_TYPE
Type : string
Default value : 'immersive-vr'

Session type to use for VR.

Public cameraGroup
Type : Group
Inherited from XRManager
Defined in XRManager:36

Group containing the the camera for XR.

Protected currentXRSession
Type : any
Default value : null
Inherited from XRManager
Defined in XRManager:32

Currently active XR session.

Protected onSessionEnded
Type : function
Inherited from XRManager
Defined in XRManager:34

Callback to call when the XR session ends.

Protected renderer
Type : WebGLRenderer
Inherited from XRManager
Defined in XRManager:30

Renderer to set the XR session for.

Protected sessionInit
Type : function
Inherited from XRManager
Defined in XRManager:28

Returns required and optional features when requesting an XR session.

Protected xrActive
Type : boolean
Default value : false
Inherited from XRManager
Defined in XRManager:26

Whether the XR is currently active or not.

Public xrCamera
Type : Camera
Inherited from XRManager
Defined in XRManager:38

The camera used by XR.

Methods

Private moveInDirection
moveInDirection(direction: Vector3, stepDistance: number)

Move the camera in the given direction.

Parameters :
Name Type Optional Description
direction Vector3 No

Direction to move towards.

stepDistance number No

Distance to move by.

Returns : void
Protected onXRSessionEnded
onXRSessionEnded()
Inherited from XRManager
Defined in XRManager:61

Callback when the VR session ends.

Returns : void
Private setupVRControls
setupVRControls()

Set up VR controls for moving around the event display.

Returns : void
Public setXRSession
setXRSession(renderer: WebGLRenderer, onSessionStarted?: () => void, onSessionEnded?: () => void)
Inherited from XRManager
Defined in XRManager:48

Set and configure the VR session.

Parameters :
Name Type Optional Description
renderer WebGLRenderer No

Renderer to set the VR session for.

onSessionStarted function Yes

Callback to call when the VR session starts.

onSessionEnded function Yes

Callback to call when the VR session ends.

Returns : void
Public endXRSession
endXRSession()
Inherited from XRManager
Defined in XRManager:99

End the current XR session.

Returns : void
Public getCameraGroup
getCameraGroup(camera?: Camera)
Inherited from XRManager
Defined in XRManager:109

Get the group containing the camera for XR. XR camera works by adding a Group with Camera to the scene.

Parameters :
Name Type Optional Description
camera Camera Yes

Camera which is to be cloned for XR use.

Returns : Group

The camera group used in XR mode.

Public getXRCamera
getXRCamera()
Inherited from XRManager
Defined in XRManager:135

Get the camera used by XR.

Returns : Camera

The camera used by XR.

Protected Async onXRSessionStarted
onXRSessionStarted(session: any)
Inherited from XRManager
Defined in XRManager:78

Callback for when the XR session is started.

Parameters :
Name Type Optional Description
session any No

The XR session.

Returns : any
import { WebGLRenderer, Vector3, BufferGeometry, Line } from 'three';
import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory';
import { XRManager, XRSessionType } from './xr-manager';

// NOTE: This was created on 29/08/2020
// It might become outdated given how WebXR is still a work in progress

// LAST UPDATED ON 20/06/2021

/**
 * VR manager for VR related operations.
 */
export class VRManager extends XRManager {
  /** Session type to use for VR. */
  static readonly SESSION_TYPE: string = 'immersive-vr';
  /** The VR controller for movement. */
  private controller1: any;
  /** The VR controller for movement. */
  private controller2: any;
  /** The VR controller representation */
  private controllerGrip1: any;
  /** The VR controller representation */
  private controllerGrip2: any;

  /** Listener for when the "Select Start" button is pushed. */
  private onControllerSelectStart: () => void;
  /** Listener for when the "Select Start" button is released. */
  private onControllerSelectEnd: () => void;

  /**
   * Create the VR manager.
   * @override
   */
  constructor() {
    super(XRSessionType.VR);
    this.sessionInit = () => ({
      optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'],
    });
  }

  /**
   * Set and configure the VR session.
   * @param renderer Renderer to set the VR session for.
   * @param onSessionStarted Callback to call when the VR session starts.
   * @param onSessionEnded Callback to call when the VR session ends.
   * @override
   */
  public setXRSession(
    renderer: WebGLRenderer,
    onSessionStarted?: () => void,
    onSessionEnded?: () => void,
  ) {
    super.setXRSession(renderer, onSessionStarted, onSessionEnded);
    this.setupVRControls();
  }

  /**
   * Callback when the VR session ends.
   * @override
   */
  protected onXRSessionEnded() {
    super.onXRSessionEnded();

    this.controller1?.removeEventListener(
      'selectstart',
      this.onControllerSelectStart,
    );
    this.controller1?.removeEventListener(
      'selectend',
      this.onControllerSelectEnd,
    );
  }

  /**
   * Set up VR controls for moving around the event display.
   */
  private setupVRControls() {
    // Get the controllers
    this.controller1 = this.renderer.xr.getController(0);
    this.getCameraGroup().add(this.controller1);
    this.controller2 = this.renderer.xr.getController(1);
    this.getCameraGroup().add(this.controller2);

    const controllerModelFactory = new XRControllerModelFactory();
    this.controllerGrip1 = this.renderer.xr.getControllerGrip(0);
    this.controllerGrip1.add(
      controllerModelFactory.createControllerModel(this.controllerGrip1),
    );
    this.getCameraGroup().add(this.controllerGrip1);

    this.controllerGrip2 = this.renderer.xr.getControllerGrip(1);
    this.controllerGrip2.add(
      controllerModelFactory.createControllerModel(this.controllerGrip2),
    );
    this.getCameraGroup().add(this.controllerGrip2);

    const geometry = new BufferGeometry().setFromPoints([
      new Vector3(0, 0, 0),
      new Vector3(0, 0, -1),
    ]);

    const line = new Line(geometry);
    line.name = 'line';
    line.scale.z = 50;

    this.controller1.add(line.clone());
    this.controller2.add(line.clone());

    // Set up movement

    // Distance for a single step
    const stepDistance = 30;
    // Unit vector in camera direction
    const direction = new Vector3();
    // Interval ID for the movement interval
    let intervalId: NodeJS.Timeout;

    this.onControllerSelectStart = () => {
      console.log(
        'Select: c1 position ' + this.controller1.position.toArray().join(', '),
      );
      console.log(
        'Select: CG position ' + this.cameraGroup.position.toArray().join(', '),
      );

      // Start movement in camera direction
      intervalId = setInterval(() => {
        this.moveInDirection(direction, stepDistance);
      }, 20);
    };

    this.onControllerSelectEnd = () => {
      // Stop the movement
      clearInterval(intervalId);
    };

    this.controller1.addEventListener(
      'selectstart',
      this.onControllerSelectStart,
    );
    this.controller1.addEventListener('selectend', this.onControllerSelectEnd);
  }

  /**
   * Move the camera in the given direction.
   * @param direction Direction to move towards.
   * @param stepDistance Distance to move by.
   */
  private moveInDirection(direction: Vector3, stepDistance: number) {
    // Get the direction the controller is facing
    //! this.controller.getWorldDirection(direction);

    // Get direction the camera is facing
    this.xrCamera?.getWorldDirection(direction);

    // Move the camera in the given direction
    this.cameraGroup.position.addScaledVector(direction, stepDistance);
    this.xrCamera.position.addScaledVector(direction, stepDistance);
  }
}

results matching ""

    No results matching ""