DEV Community

Craig Oda
Craig Oda

Posted on

360 Image Viewers for Web Developers

Almost every developer working with 360 images will build a web site to share their 360 images at some point. This might only be for testing or to share with team members, but it could also be to show clients or customers.

Fortunately, there are many pre-built libraries and services to display 360 images in your custom web site.

A growing list of viewers is available here:

https://gallery.theta360.guide/viewers/

I'll include a list of 12 popular viewers below. Thanks to eGene
of 360 Photo to Video Online Converter
for getting this list started.

Pannellum

Pannellum is a free open source panorama and 360° viewer. It's small, fast, easy to use. Though pretty basic, it has an interesting feature — multires panoramas (ability to use images with different resolution depending on zoom for single panorama). It claims to work in all modern browsers with WebGL support. Mobile browsers are not officially supported, so they may or may not work properly.

  • Supported projections: equirectangular
  • License: MIT License
  • Price: free
  • More Information

Marzipano

Developed by a company acquired by Google, then open sourced, this powerful viewer offers plenty of features, including wizard tool to help you enable options that you need. It supports all major desktop and mobile browsers (and has Flash version for legacy), provides powerful Javascript API for you to build custom applications.

  • Supported projections: equirectangular, cube
  • License: Apache License 2.0
  • Price: free
  • More Information

Photo Sphere Viewer

Photo Sphere Viewer is a comprehensive JavaScript library that allows you to display panoramic images. It's based on Three.js and shows good performance on WebGL enabled browsers with fallback to canvas for older browsers. It also supports touch screens. Other cool features include cropped (incomplete) panorama support and support of various types of markers (polygons, polylines, html, images, SVGs).

  • Supported projections: equirectangular
  • License: MIT License
  • Price: free
  • More Information

360 Image Viewer

It's a basic panorama viewer that doesn't have lots of features, but it still can work for you depending on your needs as it does the job. Some settings include: field of view, rotation speed, damping and that's pretty much all. It provides ability to set a callback function on frame change, so some customization is possible. Please note that its navigation mode is different from some other viewers: it uses what is called QTVR style when to navigate the image you need to press mouse button and move the cursor (and it can't be changed to "drag" style). Check it out below or on their demo page to see if you are comfortable with it.

  • Supported projections: equirectangular
  • License: MIT License
  • Price: free
  • More Information

Kaleidoscope

An embeddable, lightweight, dependency-free 360º image and video viewer. Works in all modern browsers. Some basic options and methods available for custom integrations. Check out video demo on their demo page.

  • Supported projections: equirectangular
  • License: Apache License 2.0
  • Price: free
  • More Information

Panolens

Another Javascript panorama viewer based on Three.js with impressive set of features. Equirectangular and cube images, google street view images, annotations (markers) and more. Supports 360° videos. Ability to create interactive tours. Codepen playgrounds available on their website.

  • Supported projections: equirectangular, cube
  • License: MIT License
  • Price: free
  • More Information

360player.io

Most of the paid viewers (including this one) offer integration with your website with an iframe. That means no coding/installation required, all configuration is done with their online tools and you only need to embed add iframe to your pages. 360player.io offers a nice looking easy to use viewer that works in all modern (supporting WebGL) and most legacy and mobile browsers. Automatic image recognition, labeling and geo-tagging included. Prices start at $12/month (no free tier).

  • Supported projections: equirectangular
  • Price: from $12/month with unlimited uploads an
  • More Information

Panoraven

Commercial 360° photo viewer with a free plan for personal use. And you don't have to register to try it. You would have to register only if you need it for commercial use or want to manage your photos and customize viewers. Please note that the plan also defines your bandwidth limit, so make sure you choose one appropriate for your needs. Integration is done with an iframe.

  • Supported projections: equirectangular
  • Price: from $15/month with unlimited uploads. F
  • More Information

Kuula

Kuula positions their viewer as a tool for creating 360° virtual tours. It means your can add labels, hotspots, audio (and more) to your images. Mobile browsers are supported. Free tier is limited to 100 uploads per month, and they are public (actually displayed on their website), so be careful with what you upload.

  • Supported projections: equirectangular
  • Price: from $12/month (with annual subscription
  • More Information

Momento 360

This photo and video viewer offers virtual tours and albums creation and has integration with multiple CMS and blogging platforms. Links created by Momento 360 are shareable, meaning you can send them to your friends and they will be able to interact with your 360° content on Momento's website. Generic iframe integration is also available. Free tier is limited to 2GB storage with Momento360 branding. Cheapest plan is $4.99 a month (when billed annually), but surprise, it will also have Momento's branding enforced ¯_(ツ)_/¯. You'd need to pay at least $15 per month to turn that off.

  • Supported projections: equirectangular
  • Price: from $4.99/month (with annual subscripti
  • More Information

A-Frame

A-Frame is a web framework for building virtual reality (VR) experiences. A-Frame is based on top of HTML, making it simple to get started. But A-Frame is not just a 3D scene graph or a markup language; the core is a powerful entity-component framework that provides a declarative, extensible, and composable structure to three.js. Works on Vive, Rift, Daydream, GearVR, desktop.

  • Supported projections: equirectangular
  • License: MIT License
  • Price: free
  • More Information

Theasys

Powerful and sophisticated 360° Virtual Tour building platform. Includes VR Editor Features, Embed & Customization Options, Advanced Embed Options, Security & Performance, and more.

Top comments (0)