โ๏ธReact-Three-Fiber
Looking Glass WebXR brings Looking Glass support to React-Three-Fiber. Take advantage of this incredible ecosystem of components and build on the shoulders of giants with this powerful toolset.
Getting Started
Setting up your scene for WebXR
WebXR
Setting up your scene for WebXR requires installing the @react-three/xr package. Once you've done this, you'll want to import the XR component and the XRButton
component. Inside your Canvas, you'll need to wrap the scene with the <XR> component. Then add the <VRButton/>
element to the stack inside your canvas component.
Importing Looking Glass WebXR
Looking Glass WebXR
You can import the Looking Glass WebXR library by running the following command in your web project:
Or, if you use the yarn package manager:
Once you've got it installed simply add the following code to your main JavaScript file. This will add in Looking Glass WebXR support and set up a few recommended defaults.
Live Examples
We've setup some codesandbox demos for you, you can try these out right now, directly in your browser!
The Basics - This example has the initial react-three-fiber starter project setup for you to use.
Fun with components - This example shows you how to leverage react-three-fiber's component-based architecture to create 3D scenes. Want to learn how to make a scene like this yourself? Check out Bruno Simon's ThreeJS Journey!
Moving the camera - This example shows you how to move the Looking Glass Camera around by modifying the config settings. Notice that the watch isn't the thing moving in this scene, but it's actually the camera rotating around it!
Last updated