vrb (ˈvɚb , ˌvi ɑr ˈbi), v.: to verb VR; to virtually really be.
Simple three.js-based web VR module. Supports positional audio and VR controllers.
Opens in an orthographic view of the scene. Click a toggle to enter in and out of a perspective VR mode.
npm i vrb
import vrb from 'vrb'
import {Scene} from 'three'
const scene = new Scene()
const viewer = document.createElement('div')
const onReady = () => {
// do whatever you want once the VR device is ready
}
const onNoVr = () => {
// do whatever you want once it is determined that your system does not support VR
}
const vrb = vrb({ scene, viewer, onReady, onNoVr })
const toggle = document.createElement('div')
toggle.onclick = vrb.toggleVr
Hook that will be called each render frame. Use to update your scene.
Example usage:
const onAnimate = () => {
clouds.drift()
song.nextNote()
}
vrb({ scene, toggle, viewer, onAnimate })
Hook that will be called each time a controller connects, with the controller as the argument. Use e.g. to add a mesh to the controller and attach event listeners.
Example usage:
const onControllerConnected = controller => {
controller.add(new BoxGeometry(0.5))
controller.addEventListener('thumbpad press began', handleThumbpadPress)
}
vrb({ scene, viewer, onControllerConnected })
Override default camera configuration with this object.
{
ORTHOGRAPHIC_FRUSTUM_TOP,
ORTHOGRAPHIC_FRUSTUM_BOTTOM,
ORTHOGRAPHIC_FRUSTUM_LEFT,
ORTHOGRAPHIC_FRUSTUM_RIGHT,
ORTHOGRAPHIC_FRUSTUM_NEAR,
ORTHOGRAPHIC_FRUSTUM_FAR,
PERSPECTIVE_ASPECT_RATIO,
PERSPECTIVE_FOV,
PERSPECTIVE_FRUSTUM_FAR,
PERSPECTIVE_FRUSTUM_NEAR,
INITIAL_ORTHOGRAPHIC_POSITION,
INITIAL_ORTHOGRAPHIC_TARGET,
INITIAL_PERSPECTIVE_POSITION,
INITIAL_PERSPECTIVE_TARGET,
}
This is a meshless three.js Object3D
which has the perspective camera and any controllers added to it. That way you can translate the player around independently of the three.js VRControls
to go beyond room scale VR.
Note: if you want to know the position of the user's head, you'll have to look at both player.position
and cameras.perspectiveCamera.position
, as it will be the sum of the two.
Wrapper for renderer.vr.getDevice().isPresenting
.
Wrapper for three.js AudioListener
context #createOscillator
.
Provides a configured three.js PositionalAudio
.
Wrapper for three.js WebGLRenderer#setClearColor
.
If it is necessary to change your onAnimate
function after building your vrb
, use this. Pass it a function that will get called with the current onAnimate
and return what you want it to be afterwards.
vrb.changeOnAnimate(oldAnimate => createModifiedAnimate(oldAnimate))
If it is necessary to change your onControllerConnected
function after building your vrb
, use this. Pass it a function that will get called with the current onControllerConnected
and return what you want it to be afterwards.
vrb.onControllerConnected(oldOnControllerConnected => createModifiedOnControllerConnected(oldOnControllerConnected))