# React-Three-Fiber
## Getting Started
### Setting up your scene for `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 \ component. Then add the `` element to the stack inside your canvas component.
### Importing `Looking Glass WebXR`
You can import the Looking Glass WebXR library by running the following command in your web project:
```
npm install @lookingglass/webxr
```
Or, if you use the yarn package manager:
```
yarn install @lookingglass/webxr
```
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.
{% code overflow="wrap" %}
```javascript
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "@lookingglass/webxr"
const config = LookingGlassConfig
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (40 * Math.PI) / 180
new LookingGlassWebXRPolyfill()
```
{% endcode %}
### 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.
{% embed url="" %}
\
**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!](https://threejs-journey.xyz)
{% embed url="" %}
**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!
{% embed url="" %}