🌈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!
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!
Last updated
Was this helpful?