<img height="1" width="1" src="https://www.facebook.com/tr?id=383677921986643&amp;ev=PageView &amp;noscript=1">
Close
Searchs
Loginu
Subscribe
Subscribe

Structure Studios Business Blog

header.jpg

How to Add 360° Photos to Your Website

Michael Malaska on May 4, 2017 5:00:00 AM

Creating and sharing the most innovative, and the most immersive, 3D experiences with clients is one of the best ways to engage your clients with your designs.

Now, standing out and reaching even more clients with your 3D designs just got easier. Capture your clients' attention when you add 360° images to your website, ready for your clients to explore instantly — from every angle, from any device.

Once you've captured a potential client's interest, making your content memorable for them is key: Google’s research points out that there’s an important “difference between reach and attentive reach.”

So how can you make sure your images are the ones that stand out and get remembered?

Enhance your client's experience by giving them a new way to interact with your designs: 360° Photos.


What can you do with 360° photos?

Since Update 2.300, Vip3D users have been sharing their newly created 360° Photos and Videos with clients on Facebook, YouTube and Vimeo.

And who doesn’t love exploring the amazing details in 360°? We sure do!

As easy as it is to share your 360° content on social media sites like Facebook — what if you could also share your most immersive and engaging images on your own website?

Currently, Facebook is the only easy way for most people to share their 360° images.

This is where Google VR View now comes in to play. It's the simple, uncomplicated way to embed fully interactive 360° content on your website.

When you use Google VR View, whether your clients view your website from their desktop, tablet, or smartphone, they’ll be able to view and interact with your 360° images.


How can you share 360° photos on your website?

We use Google VR View on our website — it’s one of the ways we share with you examples of just how incredibly easy it is to showcase your projects as well as your 3D design prowess!

Here's an example of a Google VR View 360° photo tour:

 
Click and drag to look around. Click on hot-spots to change your view.

If you haven’t created a 360° image of your own yet, no problem: read our quick guide and you'll be ready to start creating images, screenshots, even videos with Vip3D in a snap.

And if you want to share even more 360°images, you can take pictures in the real world with a 360° camera!

So, let's take a look at how Google VR View works. We'll show you how you can use it to add amazing 360° photos to your website.

Send this next part to your web developer. We'll cover concepts that require a solid working knowledge of HTML and Javascript.


Getting Started

To use the VR View class, you need to include the VR View script (provided by Google) within your HTML.

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

Next, add a placeholder that we will use to hold our 360° view.

<div id="vrview"></div>

This div will be used by the Google VR View script as a placeholder for an iframe with class="vrview" .

When the web page loads we want to call a function that creates a new VR View instance:

<script>
  window.addEventListener('load', onVrViewLoad)
  function onVrViewLoad() {
    var vrView = new VRView.Player('#vrview', {
      image: '/my-image-url.jpg',
      is_stereo: false,
      width: '100%',
      height: '100%'
    });
  }
</script>

Adding Hotspots

Google VR View supports Hotspots — interactive regions in the 360° photosphere. These Hotspots can be rendered on all platforms that support the VR View script, including on mobile devices while in VR mode.

By adding Hotspots, you can guide your viewers — highlighting interesting details you’d like to invite them to explore — while also giving them the space to explore the 360° image on their own.

When you add a Hotspot, you can specify the center coordinates, choose the radius of the circle that appears, and assign each hotspot a unique ID. Each Hotspot will appear as a circle at the locations you've specified in your 360° image.

Here is an example of how to create a VR View hotspot:

vrView.addHotspot('dining-room', {
  pitch: 30, // In degrees. Up is positive.
  yaw: 20, // In degrees. To the right is positive.
  radius: 0.05, // Radius of the circular target in meters.
  distance: 2 // Distance of target from camera in meters.
});

Hotspot events

Now that we have a Hotspot, we can add an event when the Hotspot is clicked. Here is an example:

vrView.on('click', function(event) {
  if (event.id == myHotspotId) {
    // Handle hotspot click.
  }
});

Putting it all together

Now that we know how to create a VR View instance and add Hotspots, we can create our 360° tour.

In this case, we set up a scene variable to hold all the data for our scene locations, as well as specific functions for loading, clicking a Hotspot, etc.

Try this example pulled from our 360° tour, if you'd like a jump-start before creating your own:

var vrView;
// All the scenes for the tour
var scenes = {
  deck : {
    image : '/360-deck.jpg', //replace with your image url
    preview : '/360-deck-preview.jpg', //replace with your image url
    hotspots : {
	  pool : { pitch : -10, yaw : -20, radius : 0.05, distance : 2 }
	}
  },
  pool : {
    image : '/360-pool.jpg', //replace with your image url
	preview : '/360-pool-preview.jpg', //replace with your image url
	hotspots : {
      deck : { pitch : 4, yaw : 20, radius : 0.05, distance : 2 }
	} 
  }
};

function onLoad() {
  vrView = new VRView.Player('#vrview', {
    image : '/360-deck.jpg', //replace with your image url
	preview : '/360-deck-preview.jpg', //replace with your image url
	is_stereo : false,
	is_autopan_off : true
  });
  
  vrView.on('ready', onVRViewReady);
  vrView.on('modechange', onModeChange);
  vrView.on('click', onHotspotClick);
  vrView.on('error', onVRViewError);
  
  vrView.on('ready', function(){
    $('.tip360').removeClass('paused');
  });
}

function onVRViewReady(e) {
  console.log('onVRViewReady');
  loadScene('deck');
}

function onModeChange(e) {
  console.log('onModeChange', e.mode);
}

function onHotspotClick(e) {
  console.log('onHotspotClick', e.id); 
  if (e.id) {
    loadScene(e.id);
  }
}

function loadScene(id) {
  console.log('loadScene', id);
  //Set Image
  vrView.setContent({
    image : scenes[id].image,
	preview : scenes[id].preview,
	is_stereo : false,
	is_autopan_off : true
  });
  // Add all the hotspots for the scene 
  var newScene = scenes[id];
  var sceneHotspots = Object.keys(newScene.hotspots);
  for (var i = 0; i < sceneHotspots.length; i++) {
    var hotspotKey = sceneHotspots[i];
	var hotspot = newScene.hotspots[hotspotKey];
	vrView.addHotspot(hotspotKey, { pitch : hotspot.pitch, yaw : hotspot.yaw, radius : hotspot.radius, distance : hotspot.distance });
  }
}

function onVRViewError(e) {
  console.log('Error! %s', e.message);
}

window.addEventListener('load', onLoad);

Now it's your turn!

Are you excited to share 360° images with your clients?

The results are so impressive that it might seem complicated to achieve — but it's actually incredibly easy with Vip3D or your own 360° camera.

Your incredible designs will stand out from the competition, and you'll grab your client’s attention by giving them fully interactive 360° photos, videos, and even photo tours that invite them to explore every detail of your design in an innovative new way.

Just send your 360° images to your web designer, share these instructions with them, and show us your results!

Subscribe to Our Blog

Comments


Subscribe Now and Get:   * Time-saving how-to guides   * Industry trends   * Problem-solving tips Subscribe Now
Ready to take your design to the next level? Get Started
Register for a Live Demo  We can show you how you can close more leads, and sell more on every project. Schedule Your Live Demo