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

Share: