SimLab 360 technology makes it easy to create and render 360 images. In this article we will talk about how to share those 360 rendered images within interactive 360 views on the web.
Whether the user wants to share it on a website or blog, social media, or a device like mobile or quest, SimLab Soft can help you in managing it simply and effectively.
There are three different ways to help the user to embed or share a 360 image:
1- SimLab Soft Cloud.
2- Third Party.
3- Facebook .
First: SimLab Soft Cloud
SimLab Soft Cloud provides a portal for the users to upload and share 360 images, this way of sharing is the easiest way to embed and share 360 images in a professional way. This method is available from inside SimLab Composer.
All that you have to do is to download SimLab Composer, import your scene & models, then in one click you can have 360 rendered images embedded on the web like this example.
The needed steps for the user is to share in SimLab Cloud are explained in the following tutorial.
Second: Third Party (Such as Photosphere Viewer)
Many solutions offer 360 viewers add-ins that can be used to embed 360 images on the web, here we will use photosphere viewer which gives a lot of flexibility and options to view 360 images with smoothness.
Steps:
- Download photo-sphere-viewer JavaScript library.
- Add 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 using this method visit these links:
Direct website, Github
Third: Facebook
If you render a 360 image using SimLab Composer, the image can be posted on Facebook in a 360 view natively.
Create a Facebook post, select a 360 image, it will automatically create a 360 view of it as shown in the following video.
Note: Facebook requires aspect ratio of the 360 image to be 2 to 1, for example 2000*1000 pixels