Skip to main content

Web SDK Overview

Try it right now — no account required

The Interactive Playground works out of the box — open it and watch live 3D streaming immediately, no local setup or Miris account needed.

What is the Miris Web SDK?​

The Miris Web SDK enables real-time 3D content streaming and rendering in web applications. It works by:

  • Connecting your app to Miris streaming servers with your viewer key
  • Accessing 3D content by Asset ID
  • Providing interactive controls and scene management

What "streaming" means in practice: Miris delivers 3D geometry progressively — similar to video streaming, the first pixels appear almost immediately at lower fidelity and sharpen to full quality within seconds. Assets are not bundled into your app; they stream from Miris on demand, so your page loads stay fast regardless of asset size. Mobile browsers are fully supported, including touch controls (drag to rotate, pinch to zoom) when the controls attribute is enabled.

Two credentials you'll always need
  • Viewer Key — your access credential associated with your Miris account and its assets.
  • Asset ID — the unique identifier for a specific 3D model.

Create a viewer key in the Miris Portal or via the Miris CLI — copy it immediately, as it is only shown once. Asset IDs can be retrieved any time from the Miris Portal or Miris CLI.

Miris Web SDK Packages​

The Miris Web SDK is split into three complementary packages:

PackagePurposeBest For
@miris-inc/componentsHTML custom elements, declarative syntaxMost users, quick integration, no Three.js required
@miris-inc/threeThree.js scene integration, ready-to-use componentsThree.js apps, custom rendering, advanced scene control
@miris-inc/coreCore streaming, scene management, asset fetchingFull control, custom implementations

Use @miris-inc/components if:​

  • You want quick integration with minimal code
  • You prefer declarative HTML syntax over imperative JavaScript
  • You don't need custom rendering logic
  • You want web component standards

Use @miris-inc/three if:​

  • You need full Three.js integration
  • You want advanced camera controls
  • You're building a complex 3D application
  • You need custom rendering logic

Use @miris-inc/core if:​

  • You need maximum flexibility
  • You're using a different 3D library (Babylon.js, PlayCanvas, etc.)
  • You want to build your own components
  • You require specialized features

Next Steps​