Embed 360 images in your website

by | Feb 18, 2018 | 360, SimLab | 0 comments

Creating a 360 or a panorama image in SimLab Composer is very simple, first you need to create a VR camera, place it in the scene, then select the VR camera, and render a 360 image, for more information about our 360 click here.

How to embed and use a 360 image in a website?

  • Download photo-sphere-viewer JavaScript library.
  • Added it in your website files.
  • Embed the necessary JavaScript files needed such as: three.min.js, photo-sphere-viewer.js
  • Add CSS:
              html, body {
		   margin: 0;
	       width: 100%;
	       height: 100%;
		   overflow: hidden;
		  }
		  #container {
		   width: 100%;
		   height: 100%;
		  }
  • In your body tag create container for 360 images:
               <div style="color:#fff" id="container_pan"></div>
  • Then Include JavaScript Code:
               var div = document.getElementById('container_pan');
           var PSV = new PhotoSphereViewer({
            panorama: '../Simlabimages/image360.jpg',
            container: div,
            time_anim: 3000,
            navbar: true,
            navbar_style: {backgroundColor: 'rgba(58, 67, 77, 0.7)'},
           });
  • Finally it will look like this :
                <head>
             <title>Simlab 360 images</title>
             <link rel="stylesheet" href="../assets/css/360.css">
             <script src="../assets/js/Photo-Sphere-Viewer-master/three.min.js"></script>
             <script src="../assets/js/Photo-Sphere-Viewer-master/photo-sphere-viewer.js"></script>
            </head>
            <body>
             <div id="container_pan"></div>
             <script>
              var div = document.getElementById('container_pan');
              var PSV = new PhotoSphereViewer({
              panorama: '../Simlabimages/image360.jpg',
              container: div,
              time_anim: 3000,
              navbar: true,
              navbar_style: {
              backgroundColor: 'rgba(58, 67, 77, 0.7)'
              },
              });
             </script>
            </body>

For more details and examples on how to embed a 360 image in a website visit these links:
Direct website, Github

To stay in touch with our latest news and updates, and for any info and support:

info@simlab-soft.com www.simlab-soft.com Our Facebook: simlabsoft

Our Linkedin: simlabsoft