A WebXR camera control for three.js
npm install three-spatial-controls
- basic
- Advanced
- handHelper
- codesandbox example: https://codesandbox.io/s/goofy-elion-fltsu?file=/src/App.js
- press Select button (Trigger button) to teleport
- press right/left Squeeze button (Grab button) to increase/decrease teleport distance
- use right or left joystick to decide player's direction after a teleport
https://www.youtube.com/watch?v=ut48erRros4&t=9s
import * as THREE from 'three' import SpatialControls from 'three-spatial-controls' let scene, camera, renderer let spatialControls function Init() { // three.js setup scene = new THREE.Scene() renderer.xr.enabled = true camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ) // this will be the player let cameraRig = new THREE.Group() scene.add(cameraRig) let controller0 = renderer.xr.getController(0) let controller1 = renderer.xr.getController(1) cameraRig.add(camera) cameraRig.add(controller0) cameraRig.add(controller1) spatialControls = new SpatialControls( renderer, cameraRig, controller0, controller1, // optional config { destMarker: destMarker, // indicator of teleport destination ,THREE.Object3D rightHanded: true, // righthanded or lefthanded playerHandHelper: playerHandHelper, // helper obj for player hand, THREE.Object3D destHandHelper: destHandHelper, // helper obj for destination hand, THREE.Object3D multiplyScalar: 1 // teleport distance } ) } function Animate() { spatialControls.update() renderer.render(scene, camera) }
MIT © smarthug