# Spline

### Getting Started with Spline

Spline have a ton of great start scenes available in their library. Checkout <https://spline.design> and login to view their library of amazing 3D artwork!&#x20;

<div align="left"><figure><img src="/files/wJAvizgkuoYPybVjo1rN" alt=""><figcaption><p>Spline has a great library of cool 3D scenes!</p></figcaption></figure></div>

### Navigating in Spline

Once you've got your spline scene open, you can navigate around the scene by using `alt + left click` to orbit, hold down the `middle mouse button` to pan, and scroll to zoom in and out. &#x20;

### Exporting your scene from Spline to CodeSandbox

Spline allows you to export your scenes in a variety of methods, in this case we're going to use the `Code` export option.&#x20;

<figure><img src="/files/LH7sRirpTelwklYfF5xe" alt=""><figcaption></figcaption></figure>

Using the code export, you can either go directly to CodeSandbox, which will create a react-three-fiber demo project, or you can copy your component into your existing three.js or react-three-fiber project. **Make sure you choose either three.js or react-three-fiber as the export options to use it with the Looking Glass WebXR Library.**&#x20;

![](/files/FxctGR2uDZxjJCgRWMnx)

If your spline scene has an orthographic camera, you'll need to remove that from the scene and instead use a perspective camera instead. The Looking Glass WebXR Library does not work with orthographic cameras.&#x20;

* To remove the orthographic camera in react-three-fiber, open the spline.js file that your spline scene is in and then scroll to the bottom of the page where the `<OrthographicCamera>` is defined, remove that element by either commenting it out or deleting the code. react-three-fiber will automatically populate a perspective camera in the scene for you. \
  \
  Alternatively, you can replace the `<OrthographicCamera>` element with a `<PerspectiveCamera>` provided it's imported from `@react-three/drei`

### Demo Scenes!

Check out some demo scenes we've put together here! Click on `Open Sandbox` to view the code, or click `Enter VR` with your Looking Glass connected and Looking Glass Bridge running to view the scene in your Looking Glass!

{% embed url="<https://codesandbox.io/s/spline-art-room-bhsz6y>" %}

{% embed url="<https://codesandbox.io/s/spline-developer-7b6rng>" %}


---

# 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/spline.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.