Difference between revisions of "Panorama on web pages"

From Publication Station
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
Panorama images for the Web can be easily be created using a '''Equirectangular panorama image'''.
Here are two ways of doing it using '''A-frame''' Mozilla framework for VR and '''Pannellum''' a Javascript library for displaying panorama images. 
=A-frame=
[https://aframe.io/ A-Frame] is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible. It spares you having to use a complex JavaScript libraries like ThreeJS and presents a simple HTML like language to build VR projects.
A-frame allows interaction with rotation sensors and stereo images (for VR goggles) out of the box, without having to write any code
One of the examples that is present in Aframe website is of a [https://aframe.io/examples/showcase/sky/ Panoranama]
.
What do you need:
* Equirectangular panorama image
* Load: aframe library <code><script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script></code>
* create a aframe a-sence
** inside add the a-sky element which include the panorama image
<source lang="html4strict">
<a-scene>
      <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
</lang>
</source>
See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/
Source code:
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Panorama</title>
    <meta name="description" content="Panorama — A-Frame">
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="Mars.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </body>
</html>
</source>
==Links==
* [http://www.stefankaltenegger.com/playground/capture-embed-vr-360-images/ Capture and embed VR 360 images]
* [https://davidwalsh.name/3d-panorama-image Create a 3D Panorama Image with A-Frame]
* https://aframe.io/
=Pannellum=
'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
'''
'''
Line 15: Line 68:
'''To run it you will need to store the folder with the library, html page and images in webserver'''.
'''To run it you will need to store the folder with the library, html page and images in webserver'''.


=Example=
==Example==
See live example in http://publicationstation.wdka.hro.nl/pannellum/
See live example in http://publicationstation.wdka.hro.nl/pannellum/


==HTML code==
==HTML code==
Line 31: Line 83:
     <style>
     <style>


       /*CSS for fullscreen */
        
       html {
       html {
       height: 100%;
       height: 100%;
Line 46: Line 98:
       }
       }
/*       
/*       
    /* CSS for non-full screen */
       #panorama {
       #panorama {
       width: 600px;
       width: 600px;
Line 57: Line 108:


     <div id="panorama"></div>
     <div id="panorama"></div>
     <script>
     <script>
      pannellum.viewer('panorama', {
    viewer =  pannellum.viewer('panorama', {
       "type": "equirectangular",
       "type": "equirectangular",
       "panorama": "Mars.jpg",
       "panorama": "Mars.jpg",
Line 64: Line 116:
       "showFullscreenCtrl":false
       "showFullscreenCtrl":false
       });
       });
  </script>
    </script>
</body>
 
</html>
  </body>
  </html>


</source>
</source>
==Interaction==
Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]
* <code>viewer.getYawBounds()</code> returns the boundaries ( minimum and maximum) allowed pitches (in degrees)
* <code>viewer.setYaw(10)</code> set Yaw to 10
* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it
Example in https://pannellum.org/documentation/examples/custom-controls/


[[Category:Research]] [[Category:Tutorial]]
[[Category:Research]] [[Category:Tutorial]]

Latest revision as of 19:55, 18 December 2016

Panorama images for the Web can be easily be created using a Equirectangular panorama image.

Here are two ways of doing it using A-frame Mozilla framework for VR and Pannellum a Javascript library for displaying panorama images.

A-frame

A-Frame is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible. It spares you having to use a complex JavaScript libraries like ThreeJS and presents a simple HTML like language to build VR projects.

A-frame allows interaction with rotation sensors and stereo images (for VR goggles) out of the box, without having to write any code

One of the examples that is present in Aframe website is of a Panoranama .

What do you need: 

<a-scene>
      <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
</lang>

See it running in: http://publicationstation.wdka.hro.nl/D&T/AframeVR/panorama/

Source code: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Panorama</title>
    <meta name="description" content="Panorama — A-Frame">

    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

  </head>
  <body>
    <a-scene>
      <a-sky src="Mars.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
  </body>
</html>

Links

Pannellum

Pannellum is JavaScript library for displaying and navigate panorama images on web pages. In order to use Pannellum you must:

  • Download Pannellum: https://pannellum.org/download/
  • Place the downloaded files: pannellum.css, pannellum.htm, pannellum.js in a folder
  • Save a panorama image in the same folder
    • Wikimedia commons is a good source of panoramic images under free licenses
    • Pannellum images with a maximum of 8000px wide, so you might need to resize the panorama image file
  • Use the API example in Pannellum documentation to write your HTML page. An example of the change code can be seen below
  • Set the pannellum.viewer with the settings for your image, most important parameters are:
    • "panorama": defines the image file to use
    • "type": the type of the image: equirectangular, cubemap, or multires
    • A full list of Pannellum parameters and methods can is available in its API documentation

To run it you will need to store the folder with the library, html page and images in webserver.

Example

See live example in http://publicationstation.wdka.hro.nl/pannellum/

HTML code

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="pannellum.css"/>
    <script type="text/javascript" src="pannellum.js"></script>
    <style>

      
      html {
      height: 100%;
      }

      body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: fixed;
      cursor: default;
      width: 100%;
      height: 100%;
      }
/*      
      #panorama {
      width: 600px;
      height: 400px;
      }
*/      
    </style>
  </head>
  <body>

    <div id="panorama"></div>

    <script>
     viewer =  pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "Mars.jpg",
      "autoLoad": true,
      "showFullscreenCtrl":false
      });
    </script>

  </body>
  </html>

Interaction

Programmatic interaction with the panorama can be achieved by using Pannellum API

  • viewer.getYawBounds() returns the boundaries ( minimum and maximum) allowed pitches (in degrees)
  • viewer.setYaw(10) set Yaw to 10
  • viewer.setYaw(viewer.getYaw()-100) get current yaw and move -100 from it

Example in https://pannellum.org/documentation/examples/custom-controls/

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Panorama_on_web_pages&oldid=5969’