I recently needed to prepare a virtual tour at my workplace. I started looking for a simple and affordable solution. I wanted to capture the office’s 360° panoramas then, embed it in an HTML document. I was very pleased to find out that this can be done quite easily using free tools and the result looks pretty good!

Capturing the panorama

Capturing a scene to create a 360° panorama seemed like a tedious task at first. I thought I would need a special camera or software to stitch a bunch of images together. In fact, it’s way simpler than that. Using the Google StreetView app, it’s possible to capture a complete 360° image using any modern mobile device.

Capturing the image is as simple as opening the app, tapping the camera icon and panning around your device following the dots on your screen. Well, kind of… I quickly realized I would need some kind of technique to produce a quality result without any artifact or tearing. I settled on using a tripod with a phone holder so I could scan the room with a lot of stability. After, you can export the image as a JPG file, which can be used in 360° image viewers.

Embedding in a web page

Once I got the images I needed, I searched for a way to display them in a web page. I initially found all-in-one solutions to embed a viewer in your HTML just like a youtube video. This didn’t offer the flexibility I wanted. I tweaked my search to specifically look for “javascript 360 images viewer” and this yielded much more interesting results like:

They were all interesting, seemed pretty well documented and offered functionnality demos. ForgeJS is made by GoPro and was the one which looked the most feature-rich, but also more complicated so I rejected it. Pannellum and Photo Sphere Viewer were much much simpler to use. At this point, I browsed their great documentation pages and decided to build a proof-of-concept with one of them. I chose Photo Sphere Viewer, only because my gut feeling was telling me so. I can’t really say why, but I instinctively prefered this one.

Using Photo Sphere is very straigth-forward. Just follow the getting started guide on the web site and you will be up and running very quickly. Read carefully and you will see that your questions are answered just as they come up to your mind. Once the basics are working, then explore the customization options to tweak the appearance and behaviour of the viewer. It’s amazingly easy to do so. Since I wanted to build a virtual tour, I needed a way to go from one panorama to another. Well, Photo Sphere got me covered. I could easily add markers and run Javascript to dynamically interact with the viewer upon user’s interactions.

Result sample

Finally, here is a demo (source code) of what it looks like when you use photo-sphere-viewer.js to display 360° panoramas images. The results might not be as smooth as the real Google StreetView navigation, but it’s more flexible and I keep control over how the content is displayed. It was a very fun project to do and I hope to work on something like this again! 🤓