[워드프레스에서 가상 투어 만들기 -3] 스팟 정보 지정 해주기

 

 

본 작업은 고려대학교 360 스마트 강의실 만들기 제자 진행하면서 적은 WPVR 사용법에 대한 안내입니다.

 

 

360 공간을 촬영하고 편집하는 것은 이전시간에 다루었다. 오늘은 스팟 정보를 주는 법을 알아보고자 한다.

 

 

먼저 지난번 작업한 파일을 연다. 임시글로 들어간다. 

 

좌측에 있는 핫스팟으로 들어간 뒤 새로운 플러스 버튼을 눌러 준다.

이전의 핫스팟들이 이동을 위한 인터렉션이었다면 이번 핫스팟은 정보 입력을 위한 핫스팟인 셈이다. 

 

원하는 씬에서 필요한 핫스팟을 만들어준다. HotSpot Type은 Info로 둔다. 

 

Pictch와 Yaw는 지난번 인터렉션 마커 위치와 마찬가지로 스팟이 찍힐 자리이다. 좌표를 복사해 원하는 값을 입력한다. 

우측에 있는 이 버튼을 클릭하면 알아서 복사되어 입력되니 편하다.

 

 

이런식으로 마우스를 가져다 대면 정보가 뜨게 하는 것이 On Hover Content이며 On Click Content는 클릭해야 보이는 것이다. 상황에 맞게 적절히 사용하면 된다. 

여기서 주의할 점은 일반 텍스트는 안된다는 점이다. 텍스트를 적으려면 <p>    </p> 사이에 적어주어야 한다. 

이미지 역시 링크를 가져오는 방식이다. 코드를 잘 몰라도 복사해서 쓸 수 있도록 다음 예시를 공유한다. 

 

WPVR 정보, 이미지 삽입 방법 코드

<p>텍스트가 들어가는 곳</p>
<img src="이미지 링크 주소가 들어가는 곳" alt="Protrait" width="150" height="150" style="margin: 10px 20px">
<p style="text-align: center;">텍스트가 들어갈 수 있다.(가운데 정렬)</p>

그럼 다음처럼 i라는 마커가 뜨고, 마우스를 대면 정보를 얻을 수 있다.