gyro

Typeboolean | GyroControlOptions

Defaulttrue

모바일 기기에서 자이로스코프에 의한 회전을 담당하는 컨트롤.

true일 경우 자이로스코프에 의한 회전을 활성화하고 (기본값)
false일 경우 자이로스코프에 의한 회전을 비활성화합니다.
boolean값 뿐만 아니라 GyroControlOptions타입의 오브젝트를 통해 세부 옵션도 지정할 수 있습니다.

주의

주의할 점으로, iOS와 같은 일부 환경의 경우 사용자로부터 DeviceMotion Permission을 받아야만 자이로컨트롤을 활성화 가능합니다.
즉, true로 지정한다고 해서 바로 자이로컨트롤을 사용할 수 있는 것은 아닙니다.

DeviceMotion을 통해 Permission 수령이 필요한지 여부는 다음과 같이 확인 가능합니다.

import { GyroControl } from "@egjs/view360";

// iOS 13+ 등에서는 shouldQueryPermission가 `true`입니다.
const shouldQueryPermission = DeviceMotionEvent
  && typeof DeviceMotionEvent.requestPermission === "function";
// 이미 자이로스코프 권한을 취득했는지 여부를 반환합니다.
// 비동기 코드로, 최대 1초 걸릴 수 있습니다.
const gyroAvailable = await GyroControl.isAvailable();

// ⚠️ 아래 코드는 유저 인터랙션 컨텍스트 내에서 실행되어야 합니다.
// 즉, 클릭 이벤트의 핸들러 등에서 실행되어야 하며, 그렇지 않을 경우 동작하지 않습니다.
if (shouldQueryPermission && !gyroAvailable) {
  const permissionGranted = await GyroControl.requestSensorPermission();
}

예시 (모바일에서 확인해주세요)

자이로 컨트롤을 비활성화하는 예시입니다.
우측 하단의 자이로스코프 버튼을 눌러 재활성화 가능합니다.

{
    gyro: false,
    projection: new EquirectProjection({
        src: "/pano/equirect/veste.jpg",
    })
}

세부 옵션은 아래와 같이 오브젝트를 지정하면 됩니다.
적용 가능한 세부 옵션 및 관련 설명은 왼쪽 사이드바의 하위 항목을 참고해주세요.

{
    gyro: {
        ignoreRoll: false
    },
    projection: new EquirectProjection({
        src: "/pano/equirect/veste.jpg",
    })
}

예시 (모바일에서 확인해주세요)​

예시 (모바일에서 확인해주세요)