Home

XR.js 🥽 GitHub Wiki

XR.js seeks to make VR/AR web development easy.

It wraps Three.js, WebXR Device API, Gamepad API, Physijs, TweenJS and Socket.IO into one framework.

The goal is to create a single framework to keep things simple for developers.

Table of Contents

Introduction

• About
• Getting Started
• Installation
• Examples
• Debugging

General

• Reality() create a reality
• Physics() physics simulation
• Animate() animate objects
• Locomotion() move user

Objects

• Geometry basic objects
• Model() load models
• Light() lighting objects
• Fog() add fog to scene
• Sky() add a sky
• Floor() add a floor

User Interface

• Menu menu UI objects
• Text() render text
• Splash() show a splash screen
• Button() single button
• Dropdown() dropdown menu

Media

• Audio() create an audio source
• Video() display a video
• Image() display an image
• SVG() display an SVG

Input

• Gamepad() gamepad controllers
• Hands() hand tracking
• AudioIn() audio input
• Pointer() get when user is pointing at

Getting Started

To get things set up, first create a Reality().

// create a reality
var myReality = new XR.Reality();

Lets add a few objects to our reality.

// add objects
var floor = new XR.Floor();
var box   = new XR.Box();

To interact with the user, add a User().

var user = new XR.User();

Now we can give them controllers, hands, or move them around the reality.

We can add controllers with Gamepad() or hands with Hands().

// setup controllers
var controller = new XR.Gamepad();

// setup hands
var hand = new XR.Hands();