Note : User can grap photo to move around


What is a 360 image?

A 360 or a panorama image, is a special type of image that allows the user to experience being inside a 3D scene, the user can view the scene on a mobile, or using Facebook or other viewers.

Unlike the complete VR experience, the user will not be able to interact with the scene, or change the view location.

How to create a 360 image?

Creating a 360 image using 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.

This process is shown in the following tutorial .

Sharing 360 images on facebook?

Facebook has one extra restriction on 360 images to be automatically detected, width to height ratio should be 2 to 1, for example if width is 2000, height on the image should be 1000

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: Link 1, Link 2