Immersive (VR) controls for Three.js
npm install @depasquale/three-immersive-controls- Immersive (VR) functionality
- Movement and rotation with VR controllers (move with left thumbstick, rotate with right thumbstick)
- Object selection with VR controllers (A button or trigger)
- Browser window functionality
- Movement and rotation with keyboard (WASD and arrow keys)
- Object selection with mouse
```
npm install @depasquale/three-immersive-controls
`javascript
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:
`javascript`
controls.update();
- initialPosition: THREE.Vector3new THREE.Vector3(0, 1.6, 4)
- The player's initial position in the scene. Default is .lookAt: THREE.Vector3
- floor: number | false
- Point toward which the player is initially oriented. (Not yet implemented.)
- 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 }
- Speed at which the player moves through the scene when input is received from the keyboard or VR controllers. Default is .rotateSpeed: number
- 1
- Speed at which the player is rotated when input is received from the keyboard or VR controllers. Default is .tumble: true | false
- false
- Allow the player to rotate on the x-axis in addition to the y-axis. Default is .showControllerModel: true | false
- true
- Show the VR controllers in immersive mode. Default is .showEnterVRButton: true | false
- true
- Add a button to the DOM to allow the user to enter immersive mode when this functionality is supported. Default is .showExitVRButton: true | false
- true
- Display a button in front of the player in the scene which allows the user to exit immersive mode. Default is .vrControls: true | false
- true
- Activate immersive (VR) controls. Default is .keyboardControls: true | false
- true
- Activate keyboard controls. Default is .mouseControls: true | false
- true
- Activate mouse controls. Default is . (Movement with mouse input has not yet been implemented, but object selection with the mouse works.)showFps: true | false
- Stats
- Display the 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.
- Add collision detection with navmeshes
- Test with a variety of VR devices (so far only tested with Oculus Quest 2)
- Handle situations when only one VR controller is available
- Add controls for touchscreen devices
- Better repositioning of "Exit VR" button in scene
- Possible additional features
- Teleportation
- Blinders during rotation and movement
- Movement with mouse input
- Hand tracking