360 degree photospheres

Lewis Wake
Tuesday 16 January 2018

We have recently launched refreshed webpages regarding accommodation at the University. An important element we really wanted to communicate with people looking to stay in St Andrews was what the University’s accommodation actually looks like. It would have been a quick and easy solution to take some high quality photographs of the rooms and campuses around the town, but we wanted to do more than that.

Our new accommodation webpages now include an interactive media pattern that we like to call “photospheres”. Photospheres are 360° images using Google VR view, and they allow our users to interact with immersive content.

If a photograph is worth 1,000 words, then surely a 360° photograph is worth 360,000 words.

Photospheres are displayed in an iframe that can be viewed from desktop browsers and mobile apps without any special VR hardware. However, by using Google VR view, our photospheres support true stereoscopic VR playback through compatible VR platforms. The most accessible of which being Google Cardboard.

Full information on proper application of the photospheres pattern can be found in the Digital Pattern Library from v1.8.0 onwards.

Try it out for yourself below. Even better, if you have access to compatible hardware, try it out for the full St Andrews stereoscopic VR experience.

University of St Andrews accommodation webpages which feature photospheres

All of our photospheres were shot by John and Aasta from Eik-Caffery Creative.

Related topics

Share this story

One reply to "360 degree photospheres"

  • Luke Robinson
    Wednesday 17 January 2018, 2.08pm

    Hello Lewis, The photospheres look great on desktop! However, they refuse to load in Chrome on my Samsung S7 smartphone. I believe self-hosting Google's VR API script on the same domain as your 360° images will fix the issue. From Google, "360° videos [images] do not work in OSX Safari if the media and the VR view code are hosted on different servers." In my testing, I found modifying the header keys in our servers' CORS rule allowed cross domain sharing with Google's API on mobile: http://calvin.edu/test/vr-view/ Access-Control-Allow-Origin Access-Control-Allow-Methods Access-Control-Allow-Headers Cheers, Luke


Leave a reply

By using this form you agree with the storage and handling of your data by this website.