This repository aims to give a developer a quick start on developing WebXR experiences, using Rogue Engine. It contains a scene with you can grab the sphere by gripping your controller, and changing its color by selecting it.
- Download Rogue Engine.
- Clone this repository or download it as a ZIP.
- Run
npm installto get all the dependencies. - Start Rogue Engine, open this project and navigate to
Example.rogueScene.
- Use a browser while developing your experience. You won't be able to try out VR in the editor.
- Install the WebXR Emulator extension to test before wearing your headset.
- Attach the camera and controllers as children to an Object3D. This will allow you to move the player around.
- Make sure that
https://is enabled in Rogue Engine(in the upper-right, next to the IP) to allow the WebXR API to work when testing on a headset.
This component adds an "Enter VR" button to your document to start the XR Experience. It will use the default camera that's active in the scene. More information can be found here.
This component will copy the position and rotation from one of the controllers.
| Name | Type | Default | Description |
|---|---|---|---|
| hand | 'left' 'right' | 'left' | Which controller to imitate |
| showControllerModel | boolean | true | Whether to add a 3D model of the controller via webxr-input-profiles |
- Attach this component to an Object3D that will represent the user's left or right hand.
- You can listen to events from this controller by using the
addEventListenerfunction within the component. A number of available events can be found here. - A public static array named
XRInputSource.sourceswill contain all available inputs in the scene. You can use this to listen to events on all the controllers. See the InteractableExample component for one way of doing this.