A-frame - 360° images in VR easily

Wednesday, 12 April 2017 | Written by  |

Panoramatic 360° images is one of things, which we expect from WebVR. With A-frame is it very easy and fast implementation.

For panoramatic image we need 360° photo or image. Best way, how to use this photo is texture of <a-sky> tag.

Example

Complete code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    
  <a-scene>
   <a-assets>
      <img id="skyTexture" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Helvellyn_Striding_Edge_360_Panorama%2C_Lake_District_-_June_09.jpg">
   </a-assets>
  
    <a-sky src="#skyTexture"></a-sky>
  </a-scene>
  <body>
</html>

360° photo you can download everywhere for tests. But for comercial use i can recommend some photo library, where is in these days very good choice or you can do it yourself.

  

 

© 2017 WebooVR by Weboo.eu. All rights reserved