🌈Spline

Create beautiful 3D scenes with Spline directly in your browser. Export your spline scenes to three.js and view them in the Looking Glass with the Looking Glass WebXR Library

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!

Spline has a great library of cool 3D scenes!

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.

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.

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.

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.

• 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!