> For the complete documentation index, see [llms.txt](https://lfdocs.lookingglassfactory.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lfdocs.lookingglassfactory.com/software/creator-tools/webxr/spline.md).

# 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>" %}