360 images of the new Arts building under construction

Theses images are interactive. Use your mouse or touch screen to rotate the image. If viewing on a phone or tablet, you should be able to change position by moving the device around in front of you. To do this on an iPad, you must first switch to the Mobile view (click on the AA to the left of the address bar). On iPad and iPhone you will need to enable Device Motion by clicking on the link at the top of the page. The images are quite large, and may take a while to appear.

The images were taken using a Ricoh Theta Z1 360 camera on a monopod. They are embedded into web pages using A-frame.

Entrance
Atrium
Atrium 2
Lecture theatre 1 - a conventional tiered layout.
Scene 5
Lecture theatre 2 - in this tiered room students will sit in small clusters around tables.
Scene 7
Theatre studio with mesh ceiling rig for hanging lights etc., air circulation systme, and sprung floor.
Cinema?
Scene 10
Scene 11
Three-walled teaching space with wood panel sound damping.
Scene 13
Scene 14
Scene 15 - small office.
Academic Studio with open space, sound damping in the ceiling, and meeting rooms.
Scene 17
Scene 18
Scene 19
Scene 20

Technical notes

360 images are embedded in the page using the A-frame javascript plugin.

<html>
<head>
    <script src="aframe.min.js"></script>
</head> 
<body>
<div id="360">
 <div id="iOSRequest" style="z-index: 1; position: absolute; width: 100%; background-color:#000; color: #fff"> 
    <p onclick="ClickRequestDeviceMotionEvent()">Click here to enable Device Motion</p>
  </div>

  <a-scene> 
    <a-assets> <img id="panorama" src="image.jpg" border="0" /> </a-assets>
    <a-sky src="#panorama" rotation="0 -130 0"></a-sky>
  </a-scene>
</div>
</body>
</html>

This code is used to allow the user to enable Device Motion on the iPad/iPhone.

<script>
function ClickRequestDeviceMotionEvent () {
window.DeviceMotionEvent.requestPermission()
    .then(response => {
      if (response === 'granted') {
        window.addEventListener('devicemotion',
          () => { console.log('DeviceMotion permissions granted.') },
          (e) => { throw e }
      )} else {
        console.log('DeviceMotion permissions not granted.')
      }
    })
    .catch(e => {
      console.error(e)
    })
}
</script>

In this case, the image is embedded on a Sitebuilder page but we want it to be full screen, so we hide the decoration and Sitebuilder interface.

jQuery("body").html(jQuery("#360").html());