Looking Glass Documentation
Buy Looking GlassDiscord
  • Looking Glass User Guide
  • NEW! โœจLooking Glass Goโœจ
  • Displays
    • ๐Ÿ”ฎLooking Glass Go
      • โšกGet Started with Looking Glass Go
      • ๐Ÿ“ฑUsing the Go Mobile App
      • ๐Ÿ”†Liteformsโ„ข
      • ๐Ÿ–ฅ๏ธStandalone and Desktop Modes
      • ๐Ÿ”ŒPower and LED States
      • ๐Ÿช„Default Playlist
      • โญ๏ธWhat's Next?
      • ๐Ÿ‘œAccessories
      • โš™๏ธAdvanced Playlist Creation
      • โš™๏ธManual Firmware Update
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 16" Light Field Displays
      • ๐Ÿช„Looking Glass 16" Light Field Display (Landscape)
      • ๐Ÿช„Looking Glass 16" Light Field Display (Portrait)
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 32" Light Field Displays
      • ๐Ÿช„Looking Glass 32" Light Field Display (Landscape)
      • ๐Ÿช„Looking Glass 32" Light Field Display (Portrait)
      • โ“Common Troubleshooting Issues
    • ๐Ÿ”ฎLooking Glass 65" Light Field Display
    • ๐Ÿ”ฎLooking Glass Portrait
      • โšกGet Started with Looking Glass Portrait
      • ๐ŸŽ‡Demo Holograms
      • โ“Common Troubleshooting Issues
  • Software
    • ๐Ÿ“šOverview
    • ๐ŸŒ‰Looking Glass Bridge
      • โœจUsing Looking Glass Bridge
      • ๐ŸชŸDisplay Settings on Windows
      • ๐ŸŽDisplay Settings on macOS
      • ๐ŸงDisplay Settings on Linux
      • ๐Ÿ‘ทTroubleshooting
    • โš™๏ธLooking Glass Bridge SDK
      • ๐Ÿช›Web Application Integration
      • ๐Ÿ”ŒIntegrating Native Applications
      • ๐Ÿ““Native Function Reference
      • ๐ŸฆLooking Glass Core Migration Guide
    • ๐Ÿ”ŒUnity
      • โšกUsing Unity with Looking Glass
      • Setting up your Development Environment
      • Example Scenes
      • Prefabs
        • Hologram Camera
        • 3D Cursor
        • Dual Monitor Application
      • Script Reference
        • HologramCamera.cs
        • LKGDisplaySystem.cs
        • QuiltCapture.cs
        • Cursor3D.cs
        • OrbitControls.cs
        • BlockUploader.cs
        • MobileDMAController.cs
        • iOS Sample Scene Scripts
          • ChangeInteractionModality.cs
          • XYSlider.cs
          • XYSpotlight.cs
          • AudioRotateControl.cs
          • ModelController.cs
          • DemoIOSUIController.cs
          • PageHandler.cs
          • PageConnectHandler.cs
          • PageCalibrateHandler.cs
          • PageTestHandler.cs
          • DynamicAlcove.cs
      • Package Integrations
        • Built-in Render Pipeline Post-Processing
      • Developing for iOS
      • Depth of Field and Other Post-Processing Effects
      • Quilt Video Audio and Playback
      • Developing for Ultraleap Hand Tracking on Looking Glass
      • Looking Glass Pro (Legacy)
      • Additional Support
      • Change Log
    • ๐Ÿ“ฝ๏ธLooking Glass Studio
      • ๐Ÿ“šUsing Looking Glass Studio
      • ๐ŸŽฌHologram Video iOS App
      • RGB-D Photo / Video
      • Quilt Images / Video
      • iPhone Portrait Photos
      • Android Depth Photos
        • Samsung Portrait Mode
      • Light Field Photosets
      • Exporting Holograms
      • Troubleshooting
    • ๐Ÿ‘€Looking Glass Model Viewer
    • ๐ŸงŠLooking Glass Blocks
      • โœจConvert any image into a hologram
      • โฌ†๏ธUploading, editing and sharing Quilts
      • ๐ŸฅฝViewing your holograms on different platforms
    • ๐ŸŽจOther Creator Tools
      • ๐ŸนBlender
      • ๐Ÿ”ŒUnreal Engine
        • ๐Ÿ—’๏ธChange Log and Old Versions
        • ๐Ÿ’ฝInstalling the Unreal Engine plugin
        • ๐ŸŽฅUsing the Unreal Engine Plugin
          • Using the HoloPlay Capture
          • Exporting Quilt Images and Video with Sequencer
        • Accessing HoloPlay Data with Blueprint Scripting
        • Packaging the Project
        • Unreal Engine 4 (Legacy Support)
          • Unreal Engine 4 Quick Start
            • Using the HoloPlay Capture
            • Exporting Quilt Images and Video with Sequencer
      • ๐ŸŒWebXR
        • ๐Ÿ”ถPlayCanvas
        • 3๏ธโƒฃ3๏ธโƒฃ Three.JS
        • โš›๏ธReact-Three-Fiber
        • ๐ŸŒˆSpline
    • ๐ŸงชExperiments
      • ๐Ÿ”†Liteformsโ„ข
        • ๐ŸชŸGet Started on Windows
        • ๐ŸŽGet Started on MacOS
        • ๐Ÿง™Making Custom Liteforms
        • ๐ŸชConfigure Liteforms for Kiosk Setup
      • ๐Ÿ“ฝ๏ธMedia Encoder
        • โฉLooking Glass Media Encoder
    • ๐Ÿง‘โ€๐Ÿคโ€๐Ÿง‘Third Party Apps and Tools
      • ๐Ÿ—บ๏ธParaView
      • ๐Ÿ”ฌVTK (Visualization Toolkit)
      • ๐Ÿ—ก๏ธ3D Slicer
      • ๐Ÿ”ฉCommunity Made Tools & Projects
  • Key Concepts
    • ๐Ÿ”‘Hologram 101
      • ๐ŸŽ‰Making great holograms
      • ๐ŸŒŽHolograms in the real world
      • ๐Ÿ‘พHolograms, but virtual
    • ๐Ÿ”How does Looking Glass Work?
    • ๐Ÿ“ธVirtual Camera
    • ๐ŸงŠ3D Design Guidelines
      • Lighting
      • Post-Processing
      • Scene Composition
      • Materials & Textures
      • Performance
    • ๐Ÿ’กQuilts
      • ๐ŸŽฌQuilt Video Encoding
    • ๐Ÿ’กLight Fields
      • โšกLinear Light Field Capture
    • ๐Ÿ“ฝ๏ธFilming a Looking Glass
  • Tutorials
    • ๐Ÿ“ฑRunning Looking Glass Displays with iOS Devices
    • โ“‚๏ธCapturing Light Fields in Maya
    • ๐Ÿง‘โ€๐Ÿ”ฌUsing ShaderToy with Looking Glass
    • ๐ŸŽจSculpting with Adobe Medium and Looking Glass
    • ๐Ÿ”Turn Videogames Holographic with Refract
    • ๐Ÿ–๏ธBuilding with Leap Motion
  • Legacy
    • Legacy Hardware
      • ๐Ÿ”ปLooking Glass 8.9"
      • ๐Ÿ”ปLooking Glass 15.6"
      • ๐Ÿ”ปLooking Glass 8K
      • ๐Ÿ”ปLooking Glass 16"
      • ๐Ÿ”ปLooking Glass 32"
      • ๐Ÿ”ปLooking Glass Pro
    • Legacy Software
      • ๐Ÿ“ก3D Model Importer
        • 3D Model Importer App Guide
        • 3D Model Importer App Reference
      • ๐ŸŽญDiorama
        • Change Log
      • ๐ŸŽž๏ธDepth Recorder
      • ๐Ÿ“ธLightfield Photo App
      • ๐ŸLooking Glass Core Overview
      • ๐Ÿฝ๏ธLooking Glass Core SDK
        • C API Overview
          • HoloPlayCore.h
            • State Functions
            • General-Query-Functions
            • Device-Query-Functions
          • libHoloPlayCore.h
          • HoloPlayShaders.h
      • ๐Ÿ”ฐLooking Glass Core JS
        • API
          • HoloPlayCore.Client
          • HoloPlayCore.Message
          • HoloPlay Service Related
          • examples
  • ๐Ÿ’ฌContact Us
  • ๐Ÿ› ๏ธFAQ & Troubleshooting
Powered by GitBook

Follow us

  • Twitter
  • Instagram
  • LinkedIn
On this page
  • Getting Started with Spline
  • Navigating in Spline
  • Exporting your scene from Spline to CodeSandbox
  • Demo Scenes!

Was this helpful?

  1. Software
  2. Other Creator Tools
  3. WebXR

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

PreviousReact-Three-FiberNextExperiments

Last updated 11 months ago

Was this helpful?

Getting Started with Spline

Spline have a ton of great start scenes available in their library. Checkout 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!

๐ŸŽจ
๐ŸŒ
๐ŸŒˆ
https://spline.design
Spline has a great library of cool 3D scenes!