# React-Three-Fiber

## Getting Started

### Setting up your scene for <mark style="color:purple;">`WebXR`</mark>

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 <mark style="color:purple;">`XRButton`</mark> component. Inside your Canvas, you'll need to wrap the scene with the <mark style="color:purple;">\<XR></mark> component. Then add the <mark style="color:purple;">`<VRButton/>`</mark> element to the stack inside your canvas component.&#x20;

### Importing <mark style="color:purple;">`Looking Glass WebXR`</mark>

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.&#x20;

{% 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!&#x20;

**The Basics** - This example has the initial react-three-fiber starter project setup for you to use. <br>

{% embed url="<https://codesandbox.io/s/smoosh-cookies-ikz8zu>" %}

\
**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="<https://codesandbox.io/s/threejs-journey-level-1-forked-xzlmzz>" %}

**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!&#x20;

{% embed url="<https://codesandbox.io/s/bouncy-watch-looking-glass-kbf8k5>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lfdocs.lookingglassfactory.com/software/creator-tools/webxr/react-three-fiber.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.