Changing the View | 한국어

시야(View) 변경 하기

관련 옵션

1. yaw
2. pitch
3. fov

시야 변경을 위해서는 먼저 yaw/pitch/fov 의 용어를 이해할 필요가 있습니다. 간단히 설명하면 다음과 같이 이해할 수 있습니다.

• yaw: 좌우 (단위는 도(degree))
• pitch: 상하 (단위는 도)
• fov: 시야각도 (단위는 도)

이 중 fov 는 field of view 의 줄임말로 화각(시야각)을 의미합니다. fov 값이 적으면 좁은 영역을 볼 수 있게 되고 fov 값이 크면 넓은 영역을 볼 수 있게 됩니다. 이 개념은 확대 축소와도 일맥상통하므로 확대/축소를 위한 용도로 사용합니다.

초기 각도(yaw/pitch/fov) 지정하기

yaw/pitch/fov의 각도를 지정하지 않은 경우 yaw = 0, pitch = 0, fov = 65 의 기본값으로 설정됩니다.

만약 360도 화면 중 특정 위치의 화면으로 초기 위치를 변경하고 싶은 경우 아래와 같이 yaw, pitch, fov 값을 원하는 각도 값으로 변경합니다.

var PanoViewer = eg.view360.PanoViewer;
var panoViewer = new PanoViewer(
      document.getElementById("myPanoViewer"), // 이미지가 표시될 영역(HTMLElement)
      {
            // projectionType 을 지정하지 않는 경우 기본값은 "equirectangular" 이다.
            image: "/path/to/image/image.jpg", // "equirectangular" 타입의 이미지를 지정한다.
            yaw: 180,
            pitch: 40,
            fov: 30 /* 기본값은 65, 기본 값보다 더 확대해서 보려는 의도이다.*/
      }
);

한번 초기 위치를 지정한 이후에는 setYaw, setPitch, setFov 와 같은 함수를 이용해 각도를 조절할 수도 있습니다.

//1. yaw 변경
panoViewer.setYaw(100);

// 2. pitch 변경
panoViewer.setPitch(100);

// 3. fov 변경
panoViewer.setFov(45);

예제 보러가기

• Setting the initial view

애니메이션으로 시야 변경하기

일정 시간 동안 지정된 각도로 움직이는 애니메이션 효과를 줄 수 있습니다.

// 1초 동안 yaw 각도를 (절대각도) 30도로 변경합니다.
panoViewer.lookAt({yaw: 30}, 1000);

lookAt() 은 setYaw(), setPitch(), setFov() 와 동일하게 각도를 변경할 수 있습니다. 더불어 lookAt()은 yaw/pitch/fov 를 한번에 설정하고, 움직일(애니메이션) 시간을 지정할 수 있는 편의성을 제공합니다.

예제 보러가기

• Change direction

시야/움직임 각도 제한하기

단, VR 모드인 경우 yaw, pitch 각도를 제한할 수 없습니다.

yawRange, pitchRange, fovRange 를 지정함으로서 움직이는 각도(시야)를 제한할 수 있습니다.

기본적으로 yawRange 는 -180 도 부터 +180, pitchRange 는 -90 도에서 +90도, 그리고 fovRange 는 30도 부터 110도로 지정되어 있습니다.

파노라마 사진과 같이 360도를 커버하는 이미지가 아닌 경우 혹은 특정 위치로 움직임을 제한하고 싶은 경우 생성자에서 yawRange, pitchRange, fovRange 값을 지정하여 움직임 각도를 제한할 수 있습니다.

var PanoViewer = eg.view360.PanoViewer;
var panoViewer = new PanoViewer(
  document.getElementById("myPanoViewer"), // 이미지가 표시될 영역(HTMLElement)
  {
    // projectionType 을 지정하지 않는 경우 기본값은 "equirectangular" 이다.
      image: "/path/to/image/image.jpg", // "equirectangular" 타입의 이미지를 지정한다.
      yawRange: [-144, 144], /* -144 도에서 +144 도 범위로 yaw 범위 제한 */
      pitchRange: [-31.5, 31.5],/* -31.5 도에서 +31.5 도 범위로 pitch 범위 제한 */
      fovRange: [30, 63]/* 30 도에서 63 도 범위로 fov 범위 제한 */
  }
);

예제 보러가기

• Constraint angle for partial panorama