[VR/XR][Guide] Teleportation, Snap Turn and Input Manager

Hello everyone!

I have been working on creating basic locomotion/movement interactions and an input manager (for different buttons/axes) in VR.

Project link:
I have created this project to showcase the system: XR-interaction. This is a modified version of the sample project for VR Tracked controllers on the PlayCanvas tutorial page.

Disclaimer: I only have a Meta/Oculus Quest 2 on which I have tested this, YMMV with other devices. Read the guide below to adapt it to your use case.

Video:

Features:

  1. Input Manager can be configured to fire events for different buttons/axes as per WebXR input profile for the controller.
  2. Teleportation script uses raycasting with Ammo colliders and Entity tags to give flexible defining of teleport targets.
  3. Snap Turn angle can be set in the Editor

Scripts/Assets:

  • snap-turn.js
  • teleport-raycast.js
  • xr-input-manager.js
  • input profile jsons (from github immersive web webxr input profiles repo)

Guide:

  1. Configure Input Manager
    a. Add xrInputManager to some entity in your scene. I have added it to the Root object.
    b. Set the controllerProfile attribute to the correct WebXR input profile JSON.
    c. You may have to modify the script at some places to correctly use any other controller/system (for example, HTC Vive). Currently configured for Oculus Touch v3 controllers.
    d. I have downloaded and placed the current input profiles in the assets

  2. Add Snap Turn
    a. Add the snapTurn component to some entity. I created an empty entity, one for each of left and right controllers.
    b. Check / uncheck “Enable for left controller”.
    c. Change Snap Turn Angle as per your requirement.

  3. Add Teleportation
    a. Add the teleportRaycast component to some entity. I created an empty entity, one for each of left and right controllers.
    b. Check / uncheck “Enable for left controller”.
    c. Set the “Teleport Destination Indicator Entity” attribute to any object that you wish to indicate the destination. I used a flattened cylinder with a transparent material.
    d. Customize Person Height to prevent teleports to places with low roof.

Hope this helps developers to get started with VR projects faster!

1 Like

Hi @gameshire and welcome,

Many thanks for sharing this project!

1 Like