Immersive (VR) controls for Three.js
MIT License
A
button or trigger)npm install @depasquale/three-immersive-controls
import ImmersiveControls from '@depasquale/three-immersive-controls';
// Create the `camera`, `renderer`, and `scene` instances with Three.js
// ...
const controls = new ImmersiveControls(camera, renderer, scene, { /* options */ });
Include this in the render loop:
controls.update();
initialPosition: THREE.Vector3
new THREE.Vector3(0, 1.6, 4)
.lookAt: THREE.Vector3
floor: number | false
number
(default is 0
): Sets the y position of a floor below which the player cannot pass (simple solution for collision detection instead of navmeshes).false
: No limit to the player's movement along the y-axis is set.gravity: true | false
true
(default): The player's movement is restricted to the x- and z-axes, and the y position remains at the floor
setting.false
: The player can also move vertically along the y-axis (flight mode).moveSpeed: { keyboard: number, vr: number }
{ vr: 2.5, keyboard: 5 }
.rotateSpeed: number
1
.tumble: true | false
false
.showControllerModel: true | false
true
.showEnterVRButton: true | false
true
.showExitVRButton: true | false
true
.vrControls: true | false
true
.keyboardControls: true | false
true
.mouseControls: true | false
true
. (Movement with mouse input has not yet been implemented, but object selection with the mouse works.)showFps: true | false
Stats
indicator in the DOM and in front of the player in the scene to monitor performance. Default is false
.Examples are provided in the examples
directory. To try them locally in your browser, run:
npm run examples
Or try them here.