Skip to main content

Adding Hotspots To 360-Degree Photos With Google VR View

This tutorial shows how to add 360-degree images with hotspots to a website using Google VR View. It also assumes you already have basic knowledge of JavaScript and HTML.
Your 360-degree images will work like in this example. Look around and click on the circle hotspots to go to the next location.

Step 1 - Take the 360-photos

You can use a 360-degree camera or an app that allows you to take 360-degree photos with your smartphone. In this post I talk about how to do this with the Cardboard Camera from Google:
 https://vrfanatico.blogspot.com/2018/08/taking-360-degree-photos-with-sound.html.

Your image will look something like this:



Step 2 - Convert the image to stereo

Upload your image to this converter provided by google https://storage.googleapis.com/cardboard-camera-converter/index.html. It will automatically convert it to stereo.

Your image will now look like this, but don't worry, it will look OK once you embed it into your website:



Step 3- Upload the image to your website

Upload the image to your website or blog and take note of the path. If you don't know the path (for example, if you uploaded your image directly into a blog post), then you can right click on the image and select copy link address, the image path and name will be there.

Step 4 - Add the JavaScript and HTML code to your page.

You Add the following code to the HTML page, in the location where you would like the 360-degree image to appear

<div id='vrview'></div>


Then add the following scripts at the bottom of your HTML page, and replace the images and hotspot settings (in blue) with yours. You can also add as many new elements as you need.

<script>
var vrView;
var locations = {
  cinema : {
      image : 'https://4.bp.blogspot.com/-oqJ8Ux4tG2M/W4kyuKGFObI/AAAAAAAAABw/Ulf1hGii4doXjOgLgeYIZrC2Q-VBFot0gCLcBGAs/s1600/winti_cinema_stereo.jpg', //360 image of the street outside the cinema.
      hotspots : {
      mall : {
              pitch : 0,   // Vertical alignment of the hotspot. Range is [-90, 90] with positive values corresponding to up.
              yaw : -55,      // Horizontal alignment of the hotspot. Range is [-180, 180] with positive values corresponding to the right.
              radius : 0.5,  // Size of the hotspot.
              distance : 13  // Distance of the hotspot.
             }
      }
  },
  mall : {
      image : '//2.bp.blogspot.com/-ntSQUifeLtE/W4kx3-Ofh0I/AAAAAAAAABo/Qno9cMP0ZhQtRQEn1qJLmvQvFQY_3WHUQCLcBGAs/s1600/winti_mall_stereo.jpg', //360 image of the street outside the mall.
      hotspots : {
      cinema : {
               pitch : 0,   // Vertical alignment of the hotspot. Range is [-90, 90] with positive values corresponding to up.
               yaw : 60,      // Horizontal alignment of the hotspot. Range is [-180, 180] with positive values corresponding to the right.
               radius : 0.5,  // Size of the hotspot.
               distance : 13  // Distance of the hotspot.
               }
      }
}
};

window.addEventListener('load', vrViewLoad);
function vrViewLoad() {
  vrView = new VRView.Player('#vrview', {
    image: '//2.bp.blogspot.com/-ntSQUifeLtE/W4kx3-Ofh0I/AAAAAAAAABo/Qno9cMP0ZhQtRQEn1qJLmvQvFQY_3WHUQCLcBGAs/s1600/winti_mall_stereo.jpg',
    is_stereo: true,
    width: '90%',
    height: '100%'
  });
  vrView.on('ready', vrViewReady);
  vrView.on('click', hotspotClick);
}

function vrViewReady(e) {
  // I set it to the second image to have a transition effect. If you don't want that set it to the first image.
  setLocation('mall');
}

function hotspotClick(e) {
  if (e.id) {
    setLocation(e.id);
  }
}

function setLocation(id) {
  // set image
  vrView.setContent({
    image: locations[id].image,
    is_autopan_off: true,
    is_stereo : true,
  });
  // set hotspots
  var location = locations[id];
  var locationHotspots = Object.keys(location.hotspots);
  for (var i = 0; i < locationHotspots.length; i++) {
    var key = locationHotspots[i];
    var hotspot = location.hotspots[key];
    vrView.addHotspot(key, {
                              pitch: hotspot.pitch,
                              yaw: hotspot.yaw,
                              radius: hotspot.radius,
                              distance: hotspot.distance });
    }
}
</script>

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
 

If you are interested in this topic and want to dive deeper into it, here is Google's official documentation:
 https://developers.google.com/vr/develop/web/vrview-web

Comments

  1. I am happy to find this post Very useful for me, as it contains lot of information

    Education
    Technology

    ReplyDelete
  2. A good blog for the people who really needs information about this. Good work keep it up.

    chocolatesanddreams
    Article submission sites

    ReplyDelete
  3. Thanks for sharing this post. I'm very interested in this topic. https://onlineconvertfree.com/converter/images/ Check out this awesome online converter tool

    ReplyDelete
  4. Great Article. Thank you for sharing! Really an awesome post for every one.

    IEEE Final Year projects Project Centers in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Project Domains for IT It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    JavaScript Training in Chennai

    JavaScript Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Embedding 360-Degree Images to a Web Page with iframes

This tutorial assumes you know the basics about HTML and website hosting.

Disclaimer: This iframe approach is for web view only. For embedding media on Android and iOS, please take a look at the Google's official documentation: 
https://developers.google.com/vr/discover/360-degree-media#how_to_embed_your_media

Step 1 - Take an image with the Cardboard Camera  If you are not familiar with the Cardboard Camera please take a look at this post first: https://vrfanatico.blogspot.com/2018/08/taking-360-degree-photos-with-sound.html.

Your image will look something like this:



Step 2 - Convert the image to stereo Upload your image to this very simple converter provided by google https://storage.googleapis.com/cardboard-camera-converter/index.html. It will automatically convert it to stereo.

Your image will now look like this, but don't worry, it will look OK once you embed it into your website:



Step 3- Upload the image to your website Upload the image to your website or blog and take not…

VR Worlds' Scavengers Odyssey Gave Me Motion Sickness

Recently I had my first encounter with motion sickness while playing VR Worlds' Scavengers Odyssey, a game included with the PlayStation VR. Believe me, it was not nice.
Everything started at the second level of the game, where you are in outer space jumping from one asteroid to the other and walking (some times vertically) while shooting aliens. Suddenly, I started having the feeling of being very tired and a bit uncomfortable, but I thought I could stop after getting to the next level instead of stopping right away, that was a mistake.
A few minutes later after reaching level 3, I turned off the PlayStation, something wasn’t right. I was sweating a lot and I was starting to get an upset stomach. Being my first experience with VR motion sickness, I wasn’t sure about what I had. My first thought was that this was caused by something I ate. I had food poisoning in the past and it felt just like that. I went to the bathroom and sat down, I wasn’t sure if I was going to throw up or …