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
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.
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! 🤓
Any comments? Hit me up @codingjames