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
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!
Once you've got your spline scene open, you can navigate around the scene by using
alt + left clickto orbit, hold down the
middle mouse buttonto pan, and scroll to zoom in and out.
Spline allows you to export your scenes in a variety of methods, in this case we're going to use the
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
Check out some demo scenes we've put together here! Click on
Open Sandboxto view the code, or click
Enter VRwith your Looking Glass connected and Looking Glass Bridge running to view the scene in your Looking Glass!