Kcko / little-planet

<little-planet> Custom Element: interactive panorama viewer

<little-planet>

This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no JavaScript knowledge: just include the component and continue with plain HTML.

See it in action or jump straight into the Documentation

Features

• Easy to use via the <little-planet> HTML tag
• Rendered via WebGL 2
• No geometry, just one quad
  • uses the impostor sphere technique, ray-tracing the scene in fragment shader
• Two views: top-level planet-like (not interactive) and a regular interactive inside-the-sphere
• Smooth transition (both ways: double-click/tap to zoom back)
• Controllable via mouse or touch, mobile friendly
• Needs only one (equirectangular) image, size up to 8192×4096 pixels

Read more

• Showcase of most features
• Little Planet Creator
• Sizes & Resolutions
• Fullscreen viewer

Miscellaneous

• Author
• Sponsor me!
• NPM package

Changelog

• 0.5.x: FOV for the longer side
• 0.4.x: static instead of inert
• 0.3.x: shadow DOM
• 0.2.x: reverse transition support
• 0.1.x: initial release