VR library for three.js

Features

• multiplayer
• hand tracking
• physics
• teleportation
• object selection
• inserting object into scene
• drawing tool
• 3D menu's
• object manipulation

includes a template for creating a multiplayer VR application.

Why not Unity?

Why not use Unity? Unity is a great choice for creating VR applications with a lot of features and a great community. It also enables you to create applications for multiple platforms even web applications. It also has better performance by using Webassembly to run inside a browser.

But the main reason why I chose to use three.js is that is relatively easy to learn if you are already used to creating web apps with JavaScript. It also enables us to use many of web page technologies like frameworks, databases and other libraries. But for larger or more demanding 3D applications, I would recommend using Unity.

Unity + WebXR

Tutorials

Tutorials on how to use the library can be found in the Documentation

Other great resources for learning three.js are: building apps with three.js overview

Installation

Open a terminal in the project folder and run the following commands:

npm install
npm run build
npm run start

Examples

Adding vr controls to your application is very easy. Create a new instance of the VRcontrols class and pass it the camera and scene. Then call the update method every frame in the render loop.

import { VRcontrols } from './jsm/controls/VRcontrols.js'; 

let controls = new VRcontrols(camera,scene);

renderer.setAnimationLoop(()=>{
    controls.update(); 
    renderScene();
});

libraries used:

• Threejs (OpenGl abstractions)

• three-mesh-ui (Flexbox like UI in 3D)

• three-mesh-bvh (Bounding volume hierarchy for faster raycasting)

• stats.js (FPS counter)

• express (serving static files and multiplayer server)

• socket.io (multiplayer capabilities)

Application was tested only on Oculus Quest other headsets may not work. It expects to find a least one controller with a trigger and grip button.