# Teleport functionality in WebXRManager/WebXRController

**URL:** <https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605>\
**Category:** Questions\
**Tags:** webxr, xr\
**Created:** [September 11, 2020, 6:09am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605 "2020-09-11T06:09:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [September 11, 2020, 6:09am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/1 "2020-09-11T06:09:56Z")

</div>

Hi Everyone,

Is there a way to **teleport in a three.js VR scene** using the **controllers** at the moment? If so, how do we do it?

The official WebXR examples mention that this can be achieved by the means of using **getOffsetReferenceSpace()** function but I don’t see this function being used at the moment in the **WebXR Manager/Controller** classes.

Also, checking further on GitHub issues, I get to this suggestion thread mentioning something similar on these lines. Not sure, if he is talking about the same thing here. Quoting him " The controllers already support alternate reference frames now by way of the `WebXRController.update(inputSource, frame, referenceSpace)`". Is he talking about teleportation itself over here?

> <https://github.com/mrdoob/three.js/issues/19615>
>
> Description of the problem
> As a dev, I'd like to align the XR view to an arbitrary space. It would help to...

If not, should we implement the feature from scratch? 🙂

Regards  
Srinivas Prabhu

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 11, 2020, 8:48am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/2 "2020-09-11T08:48:54Z")

</div>

With teleporting you mean the following, right?

[![](https://img.youtube.com/vi/r1kF0PhwQ8E/maxresdefault.jpg "How to Teleport in VR - Oculus Unity Tutorial") ](https://www.youtube.com/watch?v=r1kF0PhwQ8E)

If so, there is currently no solution for this in the repository. However, the following article might be helpful in this context:

> **[Adding support for VR inputs with WebXR and Three.JS](https://medium.com/@darktears/adding-support-for-vr-inputs-with-webxr-and-three-js-235b40beb6f0)**
>
> Add support of VR inputs with Three.JS and WebXR

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [September 11, 2020, 9:00am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/3 "2020-09-11T09:00:55Z")

</div>

Hi Michael,

Thanks for the article. Ill read through this.

If I am able to get this **WebXR** code to handle teleport down to a single function Ill create a PR for the same so that future users can use this functionality.

Also, found this another slightly updated example.( **WebXR teleport on native Webgl** ).

[https://immersive-web.github.io/webxr-samples/teleportation.html](https://immersive-web.github.io/webxr-samples/teleportation.html)

Cheers!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 11, 2020, 9:14am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/4 "2020-09-11T09:14:49Z")

</div>

> [@Srinivas\_Prabhu](#):
>
> If I am able to get this **WebXR** code to handle teleport down to a single function Ill create a PR for the same so that future users can use this functionality.

Before you do this, please get the approval by @mrdoob first. We’ve lately get a bit more restrictive with adding new logic to the repository since it’s already very big and thus hard to manage^^.

Besides, @seanwasere (who is a very active user in this forum) also worked at this topic in context of WebVR. Check out the following project:

> **[GitHub - Sean-Bradley/TeleportVR: Teleport module for WebVR, THREE.js and...](https://github.com/Sean-Bradley/TeleportVR)**
>
> Teleport module for WebVR, THREE.js and VRController.js projects - GitHub - Sean-Bradley/TeleportVR: Teleport module for WebVR, THREE.js and VRController.js projects

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [September 11, 2020, 9:22am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/5 "2020-09-11T09:22:28Z")

</div>

Hi Michael,

How do I contact mrdoob ? On github issues ?

Yes, I am familiar with sean-bradley article. But it was written more for webvr perspective.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 11, 2020, 1:39pm UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/6 "2020-09-11T13:39:50Z")

</div>

> [@Srinivas\_Prabhu](#):
>
> How do I contact mrdoob ?

He is also active in this forum. Since I’ve used his username in the lasts post, he should automatically be notified about this topic.

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [September 11, 2020, 2:09pm UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/7 "2020-09-11T14:09:07Z")

</div>

Sure. Great.

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [September 21, 2020, 5:14am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/8 "2020-09-21T05:14:39Z")

</div>

A teleporting example would be great! 🙏

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [September 21, 2020, 5:33am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/9 "2020-09-21T05:33:48Z")

</div>

@mrdoob Aye aye captain 🙂

---

<div class="post-metadata">

**Author:** ![OscarF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oscarf/32/16710_2.png) [@OscarF](https://discourse.threejs.org/u/OscarF)\
**Post date:** [March 1, 2021, 6:56am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/10 "2021-03-01T06:56:47Z")

</div>

Hi Srinivas and all - any update on the status of this functionality?

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [March 1, 2021, 7:28am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/11 "2021-03-01T07:28:52Z")

</div>

There was a discussion in a Github issue [here](https://github.com/mrdoob/three.js/issues/21039) that included a couple examples of teleportation from myself and the original poster. There hasn’t been any follow up from maintainers I suspect because of focus being on other issues within the project right now but hopefully at some point we can get more robust WebXR control examples.

---

<div class="post-metadata">

**Author:** ![ultralowpoly](https://avatars.discourse-cdn.com/v4/letter/u/e9bcb4/32.png) [@ultralowpoly](https://discourse.threejs.org/u/ultralowpoly)\
**Post date:** [September 13, 2021, 1:06am UTC](https://discourse.threejs.org/t/teleport-functionality-in-webxrmanager-webxrcontroller/18605/12 "2021-09-13T01:06:49Z")

</div>

Hello, according to WebXR API it is possible to reposition the entire scene relative to the last known XRRefSpace by using XRRigidTransfor objects to create offset and getOffsetReferenceSpace() method to create the update XRRefSpace, however that does nothing to the immersive session.  
How does one apply the newly calculated XRRefSpace to the Session, or Scene or whatever it is that needs to be made aware of the new XRRefSpace?

```javascript
let xrRigidTransform:XRRigidTransform = new XRRigidTransform(DOMPoint.fromPoint({x: 500, y: 500, z: 500, w: 1}), DOMPoint.fromPoint({x: 0, y: 0, z: 0, w: 1})); //move i.e. new offset
                            this.xrReferenceSpace = (this.xrReferenceSpace as XRReferenceSpace).getOffsetReferenceSpace(xrRigidTransform);

```