Skip to main content

Using hotspots

When you add elements with a specific class name within the View360 area, View360 automatically collects it and recognizes it as a hotspot.

The basic structure is as follows:

<div class="view360-container is-16by9">
  <canvas class="view360-canvas">
  <!-- Hotspot container -->
  <div class="view360-hotspots">
    <!-- Hotspots -->
    <div class="view360-hotspot" data-yaw="0" data-pitch="0">1</div>
    <!-- You can use either Yaw(Y-axis rotation), Pitch(X-axis rotation) for hotspot position -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="0">2</div>
    <!-- You can also use direct 3D coordinates. -->
    <div class="view360-hotspot" data-position="0 1 0">3</div>
    <!-- View 360 only places the hotspot in the appropriate location. -->
    <!-- You can decorate your hotspots however you want! -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="-90">
      <div>It doesn't matter what content you put inside the hotspot or what size you have.</div>
      <img src="SOME_IMG_URL" alt="Of course, you can display images." />
    </div>
  </div>
</div>

If you're using a framework, you can do it same by adding .view360-hotspots inside <View360> like this:

<View360 class="is-16by9">
  <!-- Hotspot container -->
  <div class="view360-hotspots">
    <!-- Hotspots -->
    <div class="view360-hotspot" data-yaw="0" data-pitch="0">1</div>
    <!-- You can use either Yaw(Y-axis rotation), Pitch(X-axis rotation) for hotspot position -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="0">2</div>
    <!-- You can also use direct 3D coordinates. -->
    <div class="view360-hotspot" data-position="0 1 0">3</div>
    <!-- View 360 only places the hotspot in the appropriate location. -->
    <!-- You can decorate your hotspots however you want! -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="-90">
      <div>It doesn't matter what content you put inside the hotspot or what size you have.</div>
      <img src="SOME_IMG_URL" alt="Of course, you can display images." />
    </div>
  </div>
</View360>
1
2
3
4
{
    hotspot: {
        zoom: true
    },
    projection: new CubemapProjection({
        src: [
            "/pano/cube/FishermansBastion/posx.jpg",
            "/pano/cube/FishermansBastion/negx.jpg",
            "/pano/cube/FishermansBastion/posy.jpg",
            "/pano/cube/FishermansBastion/negy.jpg",
            "/pano/cube/FishermansBastion/posz.jpg",
            "/pano/cube/FishermansBastion/negz.jpg"
        ],
    })
}

The above demo added a style to display a white circle by adding a demo-hotspot class.
You can add styles or interactions yourself and decorate them as you like.

The behavior of the hotspot can also be customized.
Check out hotspot options.