핫스팟(어노테이션) 표시하기

View360 영역 내에 특정한 클래스 이름을 갖는 마크업을 추가하면, View360은 이를 자동으로 수집해서 핫스팟으로 인식합니다.

기본적인 구조는 다음과 같습니다.

<div class="view360-container is-16by9">
  <canvas class="view360-canvas">
  <!-- 핫스팟 컨테이너 -->
  <div class="view360-hotspots">
    <!-- 핫스팟들 -->
    <div class="view360-hotspot" data-yaw="0" data-pitch="0">1</div>
    <!-- 핫스팟 위치를 지정하기 위해 Yaw(Y축 회전), Pitch(X축 회전)을 사용하거나 -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="0">2</div>
    <!-- 직접 3차원 좌표를 사용할 수도 있습니다 -->
    <div class="view360-hotspot" data-position="0 1 0">3</div>
    <!-- View360은 핫스팟을 적절한 위치에 배치만 해줍니다. -->
    <!-- 핫스팟을 꾸미는건 원하는대로 하실 수 있습니다! -->
    <div class="view360-hotspot" data-yaw="-90" data-pitch="-90">
      <div>핫스팟 내부에 어떤 내용을 넣던, 어떤 크기를 갖던 상관 없습니다</div>
      <img src="SOME_IMG_URL" alt="물론 이미지도 표시 가능하구요" />
    </div>
  </div>
</div>

프레임워크를 사용중이신 경우라면, <View360> 내부에 .view360-hotspots 엘리먼트를 추가해서 동일하게 사용하실 수 있습니다.

<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

• JSON
• Javascript
• React
• Angular
• Vue@2
• Vue@3
• Svelte

{
    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"
        ],
    })
}

위 데모는 demo-hotspot 클래스를 추가해서 흰색 원을 표시하도록 스타일을 추가했습니다.
스타일이나 인터랙션은 직접 추가하셔서 원하는대로 꾸미실 수 있습니다.

핫스팟의 동작도 커스터마이징 가능합니다.
핫스팟 옵션을 확인해보세요