JavaScript tools for creating 360 degree Photo spheres WebVR viewers for your website

Aurora Borealis over trees
Photo by Bryan Goff on Unsplash

Main tools

  1. A-Frame
    A web framework for building virtual reality experiences. You can make WebVR with HTML and the component works on Vive, Rift, Daydream, GearVR. The framework is being used by a much broader community and has an active community due to support/widely usage used by major companies and institutions across globe.

  2. Marzipano
    This is a fantastic tool to get you started for your needs in displaying panoramas. The creators have also provisioned a tool that supports both sphere formats – equirectangular and cubeface. The output of this tool can serve as a boilerplate for further customisation using vanilla JavaScript, HTML and CSS. You can also add hotspots and labels on your viewer.

    Note: This tool requires latest version of Firefox or Chrome and is as well supported by IE using shims.

  3. React 360
    A ReactJS version to allow you create nice interactive experience for your web application. It requires Node.js and npm as the package installer. The project has a good documentation to refer to incase you are looking for some customisations.

Smaller/under development packages

  1. Pannellum
    A Lightweight Panorama Viewer for the Web. Pannellum is an Open source panorama viewer for the web where applications cane be built built using HTML5, CSS3, JavaScript and WebGL. It supports Equirectangular, partial, cubic and multi-resolution panoramas.

  2. Panolens.js
    Panolens.js is a based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality and potentially augmented reality. The tool is more for an Equirectangular image