teleportvr

Teleport module for WebXR THREE.js projects

Usage no npm install needed!

<script type="module">
  import teleportvr from 'https://cdn.skypack.dev/teleportvr';
</script>

README

TeleportVR

Teleport module for WebVR and THREE.js projects.

You can download the project and view the examples.

git clone https://github.com/Sean-Bradley/TeleportVR.git
cd TeleportVR
npm install
npm run dev

Visit https://127.0.0.1:3000/

How to import TeleportVR

npm install teleportvr

Import it into your code

import TeleportVR from "teleportvr";

How to Instantiate And Use

After creating your THREE.Scene and THREE.Camera, create a new TeleportVR object.

const teleportVR = new TeleportVR(scene, camera);

Create geometries for the hands and add controller grips, see example code for more info.

Update TeleportVR in your render loop

teleportVR.update();
renderer.render(scene, camera);

Example 1

Basic TeleportVR setup for WebVR and Threejs projects.

TeleportVR Example 1

Example 2

Shoot at objects in the scene.

TeleportVR Example 2

Example 3

Teleport on top of objects in the scene.

TeleportVR Example 3

Example 4

Customising the TeleportVR default meshes.

TeleportVR Example 4

TeleportVR Source Project

This is a typescript project consisting of two sub projects with there own tsconfigs.

To edit this example, then modify the files in ./src/client/ or ./src/server/

The projects will auto recompile if you started it by using npm run dev

Threejs TypeScript Course

Visit https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate for a Threejs TypeScript boilerplate containing many extra branches that demonstrate many examples of Threejs.

To help support this Threejs example, please take a moment to look at my official Threejs TypeScript course at

Threejs TypeScript Course

Three.js and TypeScript

Discount Coupons for all my courses can be found at https://sbcode.net/coupons