view360

Source: src/PanoViewer/PanoViewer.ts

  1. import Component, { ComponentEvent } from "@egjs/component";
  2. import Promise from "promise-polyfill";
  3. import { quat } from "gl-matrix";
  5. import { DeviceMotionEvent, checkXRSupport } from "../utils/browserFeature";
  6. import YawPitchControl, { YawPitchControlOptions } from "../YawPitchControl/YawPitchControl";
  7. import PanoImageRenderer from "../PanoImageRenderer/PanoImageRenderer";
  8. import WebGLUtils from "../PanoImageRenderer/WebGLUtils";
  9. import { util as mathUtil } from "../utils/math-util";
  10. import { VERSION } from "../version";
  11. import { CubemapConfig, ValueOf } from "../types/internal";
  12. import { AnimationEndEvent, ReadyEvent, ViewChangeEvent, ErrorEvent } from "../types/event";
  14. import { ERROR_TYPE, PANOVIEWER_EVENTS as EVENTS, GYRO_MODE, PROJECTION_TYPE, STEREO_FORMAT, DEFAULT_CANVAS_CLASS } from "./consts";
  16. export interface PanoViewerOptions {
  17.   image: string | HTMLElement;
  18.   video: string | HTMLElement;
  19.   projectionType: ValueOf<typeof PROJECTION_TYPE>;
  20.   cubemapConfig: Partial<CubemapConfig>;
  21.   stereoFormat: ValueOf<typeof STEREO_FORMAT>;
  22.   width: number;
  23.   height: number;
  24.   yaw: number;
  25.   pitch: number;
  26.   fov: number;
  27.   showPolePoint: boolean;
  28.   useZoom: boolean;
  29.   useKeyboard: boolean;
  30.   gyroMode: ValueOf<typeof GYRO_MODE>;
  31.   yawRange: number[];
  32.   pitchRange: number[];
  33.   fovRange: number[];
  34.   touchDirection: ValueOf<typeof PanoViewer.TOUCH_DIRECTION>;
  35.   canvasClass: string;
  36. }
  38. export interface PanoViewerEvent {
  39.   ready: ReadyEvent;
  40.   viewChange: ViewChangeEvent;
  41.   animationEnd: AnimationEndEvent<PanoViewer>;
  42.   error: ErrorEvent;
  43. }
  45. /**
  46.  * @memberof eg.view360
  47.  * @extends eg.Component
  48.  * PanoViewer
  49.  */
  50. class PanoViewer extends Component<PanoViewerEvent> {
  51.   /**
  52.    * Check whether the current environment can execute PanoViewer
  53.    * @ko 현재 브라우저 환경에서 PanoViewer 실행이 가능한지 여부를 반환합니다.
  54.    * @return PanoViewer executable <ko>PanoViewer 실행가능 여부</ko>
  55.    */
  56.   public static isSupported(): boolean {
  57.     return WebGLUtils.isWebGLAvailable() && WebGLUtils.isStableWebGL();
  58.   }
  60.   /**
  61.    * Check whether the current environment supports the WebGL
  62.    * @ko 현재 브라우저 환경이 WebGL 을 지원하는지 여부를 확인합니다.
  63.    * @return WebGL support <ko>WebGL 지원여부</ko>
  64.    */
  65.   public static isWebGLAvailable(): boolean {
  66.     return WebGLUtils.isWebGLAvailable();
  67.   }
  69.   /**
  70.    * Check whether the current environment supports the gyro sensor.
  71.    * @ko 현재 브라우저 환경이 자이로 센서를 지원하는지 여부를 확인합니다.
  72.    * @param callback Function to take the gyro sensor availability as argument <ko>자이로 센서를 지원하는지 여부를 인자로 받는 함수</ko>
  73.    */
  74.   public static isGyroSensorAvailable(callback: (isAvailable: boolean) => any) {
  75.     if (!DeviceMotionEvent && callback) {
  76.       callback(false);
  77.       return;
  78.     }
  80.     let onDeviceMotionChange;
  82.     const checkGyro = () => new Promise(res => {
  83.       onDeviceMotionChange = deviceMotion => {
  84.         const isGyroSensorAvailable = !(deviceMotion.rotationRate.alpha == null);
  86.         res(isGyroSensorAvailable);
  87.       };
  89.       window.addEventListener("devicemotion", onDeviceMotionChange);
  90.     });
  92.     const timeout = () => new Promise(res => {
  93.       setTimeout(() => res(false), 1000);
  94.     });
  96.     Promise.race([checkGyro(), timeout()]).then((isGyroSensorAvailable: boolean) => {
  97.       window.removeEventListener("devicemotion", onDeviceMotionChange);
  99.       if (callback) {
  100.         callback(isGyroSensorAvailable);
  101.       }
  103.       PanoViewer.isGyroSensorAvailable = fb => {
  104.         if (fb) {
  105.           fb(isGyroSensorAvailable);
  106.         }
  107.         return isGyroSensorAvailable;
  108.       };
  109.     });
  110.   }
  112.   private static _isValidTouchDirection(direction) {
  113.     return direction === PanoViewer.TOUCH_DIRECTION.NONE ||
  114.       direction === PanoViewer.TOUCH_DIRECTION.YAW ||
  115.       direction === PanoViewer.TOUCH_DIRECTION.PITCH ||
  116.       direction === PanoViewer.TOUCH_DIRECTION.ALL;
  117.   }
  119.   /**
  120.    * Version info string
  121.    * @ko 버전정보 문자열
  122.    * @name VERSION
  123.    * @static
  124.    * @type {String}
  125.    * @example
  126.    * eg.view360.PanoViewer.VERSION;  // ex) 3.0.1
  127.    * @memberof eg.view360.PanoViewer
  128.    */
  129.   public static VERSION = VERSION;
  130.   public static ERROR_TYPE = ERROR_TYPE;
  131.   public static EVENTS = EVENTS;
  132.   public static PROJECTION_TYPE = PROJECTION_TYPE;
  133.   public static GYRO_MODE = GYRO_MODE;
  134.   // This should be deprecated!
  135.   // eslint-disable-next-line @typescript-eslint/naming-convention
  136.   public static ProjectionType = PROJECTION_TYPE;
  137.   public static STEREO_FORMAT = STEREO_FORMAT;
  139.   /**
  140.    * Constant value for touch directions
  141.    * @ko 터치 방향에 대한 상수 값.
  142.    * @namespace
  143.    * @name TOUCH_DIRECTION
  144.    */
  145.   public static TOUCH_DIRECTION = {
  146.     /**
  147.      * Constant value for none direction.
  148.      * @ko none 방향에 대한 상수 값.
  149.      * @name NONE
  150.      * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
  151.      * @constant
  152.      * @type {Number}
  153.      * @default 1
  154.      */
  155.     NONE: YawPitchControl.TOUCH_DIRECTION_NONE,
  156.     /**
  157.      * Constant value for horizontal(yaw) direction.
  158.      * @ko horizontal(yaw) 방향에 대한 상수 값.
  159.      * @name YAW
  160.      * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
  161.      * @constant
  162.      * @type {Number}
  163.      * @default 6
  164.      */
  165.     YAW: YawPitchControl.TOUCH_DIRECTION_YAW,
  166.     /**
  167.      * Constant value for vertical direction.
  168.      * @ko vertical(pitch) 방향에 대한 상수 값.
  169.      * @name PITCH
  170.      * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
  171.      * @constant
  172.      * @type {Number}
  173.      * @default 24
  174.      */
  175.     PITCH: YawPitchControl.TOUCH_DIRECTION_PITCH,
  176.     /**
  177.      * Constant value for all direction.
  178.      * @ko all 방향에 대한 상수 값.
  179.      * @name ALL
  180.      * @memberof eg.view360.PanoViewer.TOUCH_DIRECTION
  181.      * @constant
  182.      * @type {Number}
  183.      * @default 30
  184.      */
  185.     ALL: YawPitchControl.TOUCH_DIRECTION_ALL
  186.   };
  188.   private _container: HTMLElement;
  189.   // Options
  190.   private _image: ConstructorParameters<typeof PanoImageRenderer>[0];
  191.   private _isVideo: boolean;
  192.   private _projectionType: ValueOf<typeof PROJECTION_TYPE>;
  193.   private _cubemapConfig: Partial<CubemapConfig>;
  194.   private _stereoFormat: ValueOf<typeof STEREO_FORMAT>;
  195.   private _width: number;
  196.   private _height: number;
  197.   private _yaw: number;
  198.   private _pitch: number;
  199.   private _fov: number;
  200.   private _gyroMode: ValueOf<typeof GYRO_MODE>;
  201.   private _quaternion: quat | null;
  202.   private _aspectRatio: number;
  203.   private _isReady: boolean;
  204.   private _canvasClass: string;
  206.   // Internal Values
  207.   private _photoSphereRenderer: PanoImageRenderer | null;
  208.   private _yawPitchControl: YawPitchControl | null;
  210.   /**
  211.    * @classdesc 360 media viewer
  212.    * @ko 360 미디어 뷰어
  213.    *
  214.    * @param container The container element for the renderer. <ko>렌더러의 컨테이너 엘리먼트</ko>
  215.    * @param options
  216.    *
  217.    * @param {String|HTMLImageElement} options.image Input image url or element (Use only image property or video property)<ko>입력 이미지 URL 혹은 엘리먼트(image 와 video 둘 중 하나만 설정)</ko>
  218.    * @param {String|HTMLVideoElement} options.video Input video url or element(Use only image property or video property)<ko>입력 비디오 URL 혹은 엘리먼트(image 와 video 둘 중 하나만 설정)</ko>
  219.    * @param {String} [options.projectionType=equirectangular] The type of projection: equirectangular, cubemap <br/>{@link eg.view360.PanoViewer.PROJECTION_TYPE}<ko>Projection 유형 : equirectangular, cubemap <br/>{@link eg.view360.PanoViewer.PROJECTION_TYPE}</ko>
  220.    * @param {Object} options.cubemapConfig Config cubemap projection layout. It is applied when projectionType is {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} or {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP}<ko>cubemap projection type 의 레이아웃을 설정한다. 이 설정은 ProjectionType이 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP} 혹은 {@link eg.view360.PanoViewer.PROJECTION_TYPE.CUBESTRIP} 인 경우에만 적용된다.</ko>
  221.    * @param {Object} [options.cubemapConfig.order = "RLUDBF"(ProjectionType === CUBEMAP) | "RLUDFB" (ProjectionType === CUBESTRIP)] Order of cubemap faces <ko>Cubemap 형태의 이미지가 배치된 순서</ko>
  222.    * @param {Object} [options.cubemapConfig.tileConfig = { flipHorizontal:false, rotation: 0 }] Setting about rotation angle(degree) and whether to flip horizontal for each cubemap faces, if you put this object as a array, you can set each faces with different setting. For example, [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]<ko>각 Cubemap 면에 대한 회전 각도/좌우반전 여부 설정, 객체를 배열 형태로 지정하여 각 면에 대한 설정을 다르게 지정할 수도 있다. 예를 들어 [{flipHorizontal:false, rotation:90}, {flipHorizontal: true, rotation: 180}, ...]과 같이 지정할 수 있다.</ko>
  223.    * @param {Number} [options.cubemapConfig.trim=0] A px distance to discard from each tile side. You can use this value to avoid graphical glitch at where tiles are connected. This option is available when there's only one texture.<ko>각 타일의 끝으로부터 폐기할 px 거리. 이 옵션을 사용하여 타일의 접합부에서 나타나는 그래픽 결함을 완화할 수 있습니다. 이 옵션은 한 개의 텍스쳐만 사용할 때 적용 가능합니다.</ko>
  224.    * @param {String} [options.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection.<br/>See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다.<br/>{@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
  225.    * @param {Number} [options.width=width of container] the viewer's width. (in px) <ko>뷰어의 너비 (px 단위)</ko>
  226.    * @param {Number} [options.height=height of container] the viewer's height.(in px) <ko>뷰어의 높이 (px 단위)</ko>
  227.    * @param {Number} [options.yaw=0] Initial Yaw of camera (in degree) <ko>카메라의 초기 Yaw (degree 단위)</ko>
  228.    * @param {Number} [options.pitch=0] Initial Pitch of camera (in degree) <ko>카메라의 초기 Pitch (degree 단위)</ko>
  229.    * @param {Number} [options.fov=65] Initial vertical field of view of camera (in degree) <ko>카메라의 초기 수직 field of view (degree 단위)</ko>
  230.    * @param {Boolean} [options.showPolePoint=false] If false, the pole is not displayed inside the viewport <ko>false 인 경우, 극점은 뷰포트 내부에 표시되지 않습니다</ko>
  231.    * @param {Boolean} [options.useZoom=true] When true, enables zoom with the wheel and Pinch gesture <ko>true 일 때 휠 및 집기 제스춰로 확대 / 축소 할 수 있습니다.</ko>
  232.    * @param {Boolean} [options.useKeyboard=true] When true, enables the keyboard move key control: awsd, arrow keys <ko>true 이면 키보드 이동 키 컨트롤을 활성화합니다: awsd, 화살표 키</ko>
  233.    * @param {String} [options.gyroMode=yawPitch] Enables control through device motion. ("none", "yawPitch", "VR") <br/>{@link eg.view360.PanoViewer.GYRO_MODE} <ko>디바이스 움직임을 통한 컨트롤을 활성화 합니다. ("none", "yawPitch", "VR") <br/>{@link eg.view360.PanoViewer.GYRO_MODE} </ko>
  234.    * @param {Array} [options.yawRange=[-180, 180]] Range of controllable Yaw values <ko>제어 가능한 Yaw 값의 범위</ko>
  235.    * @param {Array} [options.pitchRange=[-90, 90]] Range of controllable Pitch values <ko>제어 가능한 Pitch 값의 범위</ko>
  236.    * @param {Array} [options.fovRange=[30, 110]] Range of controllable vertical field of view values <ko>제어 가능한 수직 field of view 값의 범위</ko>
  237.    * @param {Number} [options.touchDirection= {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL}(6)] Direction of touch that can be controlled by user <br/>{@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>사용자가 터치로 조작 가능한 방향 <br/>{@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
  238.    * @param {String} [options.canvasClass="view360-canvas"] A class name for the canvas element inside the container element. PanoViewer will use the canvas that has this class instead of creating one if it exists<ko>콘테이너 엘리먼트 내부의 캔버스 엘리먼트의 클래스 이름. PanoViewer는 해당 클래스를 갖는 캔버스 엘리먼트가 콘테이너 엘리먼트 내부에 존재할 경우, 새로 생성하는 대신 그 엘리먼트를 사용할 것입니다</ko>
  239.    *
  240.    * @example
  241.    * ```
  242.    * // PanoViewer Creation
  243.    * // create PanoViewer with option
  244.    * var PanoViewer = eg.view360.PanoViewer;
  245.    * // Area where the image will be displayed(HTMLElement)
  246.    * var container = document.getElementById("myPanoViewer");
  247.    *
  248.    * var panoViewer = new PanoViewer(container, {
  249.    *   // If projectionType is not specified, the default is "equirectangular".
  250.    *   // Specifies an image of the "equirectangular" type.
  251.    *   image: "/path/to/image/image.jpg"
  252.    * });
  253.    * ```
  254.    *
  255.    * @example
  256.    * ```
  257.    * // Cubemap Config Setting Example
  258.    * // For support Youtube EAC projection, You should set cubemapConfig as follows.
  259.    * cubemapConfig: {
  260.    *   order: "LFRDBU",
  261.    *   tileConfig: [{rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: -90}, {rotation: 180}]
  262.    * }
  263.    * ```
  264.    */
  265.   public constructor(container: HTMLElement, options: Partial<PanoViewerOptions> = {}) {
  266.     super();
  268.     // Raises the error event if webgl is not supported.
  269.     if (!WebGLUtils.isWebGLAvailable()) {
  270.       setTimeout(() => {
  271.         this.trigger(new ComponentEvent(EVENTS.ERROR, {
  272.           type: ERROR_TYPE.NO_WEBGL,
  273.           message: "no webgl support"
  274.         }));
  275.       }, 0);
  276.       return this;
  277.     }
  279.     if (!WebGLUtils.isStableWebGL()) {
  280.       setTimeout(() => {
  281.         this.trigger(new ComponentEvent(EVENTS.ERROR, {
  282.           type: ERROR_TYPE.INVALID_DEVICE,
  283.           message: "blacklisted browser"
  284.         }));
  285.       }, 0);
  287.       return this;
  288.     }
  290.     if (!!options.image && !!options.video) {
  291.       setTimeout(() => {
  292.         this.trigger(new ComponentEvent(EVENTS.ERROR, {
  293.           type: ERROR_TYPE.INVALID_RESOURCE,
  294.           message: "Specifying multi resouces(both image and video) is not valid."
  295.         }));
  296.       }, 0);
  297.       return this;
  298.     }
  300.     // Check XR support at not when imported, but when created.
  301.     // This is intended to make polyfills easier to use.
  302.     checkXRSupport();
  304.     this._container = container;
  305.     this._image = options.image! as HTMLImageElement || options.video! as HTMLVideoElement;
  306.     this._isVideo = !!options.video;
  307.     this._projectionType = options.projectionType || PROJECTION_TYPE.EQUIRECTANGULAR;
  308.     this._cubemapConfig = {
  309.       ...{
  310.         /* RLUDBF is abnormal, we use it on CUBEMAP only for backward compatibility*/
  311.         order: this._projectionType === PROJECTION_TYPE.CUBEMAP ? "RLUDBF" : "RLUDFB",
  312.         tileConfig: {
  313.           flipHorizontal: false,
  314.           rotation: 0
  315.         },
  316.         trim: 0
  317.       }, ...options.cubemapConfig
  318.     };
  319.     this._stereoFormat = options.stereoFormat || STEREO_FORMAT.TOP_BOTTOM;
  321.     // If the width and height are not provided, will use the size of the container.
  322.     this._width = options.width || parseInt(window.getComputedStyle(container).width, 10);
  323.     this._height = options.height || parseInt(window.getComputedStyle(container).height, 10);
  325.     /**
  326.      * Cache the direction for the performance in renderLoop
  327.      *
  328.      * This value should be updated by "change" event of YawPitchControl.
  329.      */
  330.     this._yaw = options.yaw || 0;
  331.     this._pitch = options.pitch || 0;
  332.     this._fov = options.fov || 65;
  334.     this._gyroMode = options.gyroMode || GYRO_MODE.YAWPITCH;
  335.     this._quaternion = null;
  337.     this._aspectRatio = this._height !== 0 ? this._width / this._height : 1;
  339.     this._canvasClass = options.canvasClass || DEFAULT_CANVAS_CLASS;
  341.     const fovRange = options.fovRange || [30, 110];
  342.     const touchDirection = PanoViewer._isValidTouchDirection(options.touchDirection) ?
  343.       options.touchDirection : YawPitchControl.TOUCH_DIRECTION_ALL;
  344.     const yawPitchConfig = {
  345.       ...options,
  346.       ...{
  347.         element: container,
  348.         yaw: this._yaw,
  349.         pitch: this._pitch,
  350.         fov: this._fov,
  351.         gyroMode: this._gyroMode,
  352.         fovRange,
  353.         aspectRatio: this._aspectRatio,
  354.         touchDirection
  355.       }
  356.     };
  358.     this._isReady = false;
  360.     this._initYawPitchControl(yawPitchConfig);
  361.     this._initRenderer(this._yaw, this._pitch, this._fov, this._projectionType, this._cubemapConfig);
  362.   }
  364.   /**
  365.    * Get the video element that the viewer is currently playing. You can use this for playback.
  366.    * @ko 뷰어가 현재 사용 중인 비디오 요소를 얻습니다. 이 요소를 이용해 비디오의 컨트롤을 할 수 있습니다.
  367.    * @return HTMLVideoElement<ko>HTMLVideoElement</ko>
  368.    * @example
  369.    * ```
  370.    * var videoTag = panoViewer.getVideo();
  371.    * videoTag.play(); // play the video!
  372.    * ```
  373.    */
  374.   public getVideo() {
  375.     if (!this._isVideo) {
  376.       return null;
  377.     }
  379.     return this._photoSphereRenderer!.getContent() as HTMLVideoElement;
  380.   }
  382.   /**
  383.    * Set the video information to be used by the viewer.
  384.    * @ko 뷰어가 사용할 이미지 정보를 설정합니다.
  385.    * @param {string|HTMLVideoElement|object} video Input video url or element or config object<ko>입력 비디오 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정)</ko>
  386.    * @param {object} param
  387.    * @param {string} [param.projectionType={@link eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR}("equirectangular")] Projection Type<ko>프로젝션 타입</ko>
  388.    * @param {object} param.cubemapConfig config cubemap projection layout. <ko>cubemap projection type 의 레이아웃 설정</ko>
  389.    * @param {string} [param.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection. See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. {@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
  390.    *
  391.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  392.    * @example
  393.    * ```
  394.    * panoViewer.setVideo("/path/to/video/video.mp4", {
  395.    *     projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR
  396.    * });
  397.    * ```
  398.    */
  399.   public setVideo(video: string | HTMLElement | { type: string; src: string }, param: Partial<{
  400.     projectionType: PanoViewer["_projectionType"];
  401.     cubemapConfig: PanoViewer["_cubemapConfig"];
  402.     stereoFormat: PanoViewer["_stereoFormat"];
  403.   }> = {}) {
  404.     if (video) {
  405.       this.setImage(video, {
  406.         projectionType: param.projectionType,
  407.         isVideo: true,
  408.         cubemapConfig: param.cubemapConfig,
  409.         stereoFormat: param.stereoFormat
  410.       });
  411.     }
  413.     return this;
  414.   }
  416.   /**
  417.    * Get the image information that the viewer is currently using.
  418.    * @ko 뷰어가 현재 사용하고있는 이미지 정보를 얻습니다.
  419.    * @return Image Object<ko>이미지 객체</ko>
  420.    * @example
  421.    * var imageObj = panoViewer.getImage();
  422.    */
  423.   public getImage() {
  424.     if (this._isVideo) {
  425.       return null;
  426.     }
  428.     return this._photoSphereRenderer!.getContent();
  429.   }
  431.   /**
  432.    * Set the image information to be used by the viewer.
  433.    * @ko 뷰어가 사용할 이미지 정보를 설정합니다.
  434.    * @param {string|HTMLElement|object} image Input image url or element or config object<ko>입력 이미지 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정한다.)</ko>
  435.    * @param {object} param Additional information<ko>이미지 추가 정보</ko>
  436.    * @param {string} [param.projectionType="equirectangular"] Projection Type<ko>프로젝션 타입</ko>
  437.    * @param {object} param.cubemapConfig config cubemap projection layout. <ko>cubemap projection type 레이아웃</ko>
  438.    * @param {string} [param.stereoFormat="3dv"] Contents format of the stereoscopic equirectangular projection. See {@link eg.view360.PanoViewer.STEREO_FORMAT}.<ko>Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. {@link eg.view360.PanoViewer.STEREO_FORMAT} 참조.</ko>
  439.    * @param {boolean} [param.isVideo=false] Whether the given `imaage` is video or not.<ko>이미지가 비디오인지 여부</ko>
  440.    *
  441.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  442.    * @example
  443.    * ```
  444.    * panoViewer.setImage("/path/to/image/image.png", {
  445.    *     projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP
  446.    * });
  447.    * ```
  448.    */
  449.   public setImage(image: string | HTMLElement | { src: string; type: string }, param: Partial<{
  450.     projectionType: PanoViewer["_projectionType"];
  451.     cubemapConfig: PanoViewer["_cubemapConfig"];
  452.     stereoFormat: PanoViewer["_stereoFormat"];
  453.     isVideo: boolean;
  454.   }> = {}) {
  455.     const cubemapConfig = {
  456.       ...{
  457.         order: "RLUDBF",
  458.         tileConfig: {
  459.           flipHorizontal: false,
  460.           rotation: 0
  461.         },
  462.         trim: 0
  463.       }, ...param.cubemapConfig
  464.     };
  465.     const stereoFormat = param.stereoFormat || STEREO_FORMAT.TOP_BOTTOM;
  466.     const isVideo = !!(param.isVideo);
  468.     if (this._image && this._isVideo !== isVideo) {
  469.       /* eslint-disable no-console */
  470.       console.warn("PanoViewer is not currently supporting content type changes. (Image <--> Video)");
  471.       /* eslint-enable no-console */
  472.       return this;
  473.     }
  475.     if (image) {
  476.       this._deactivate();
  478.       this._image = image as HTMLImageElement;
  479.       this._isVideo = isVideo;
  480.       this._projectionType = param.projectionType || PROJECTION_TYPE.EQUIRECTANGULAR;
  481.       this._cubemapConfig = cubemapConfig;
  482.       this._stereoFormat = stereoFormat;
  484.       this._initRenderer(this._yaw, this._pitch, this._fov, this._projectionType, this._cubemapConfig);
  485.     }
  487.     return this;
  488.   }
  490.   /**
  491.    * Set whether the renderer always updates the texture and renders.
  492.    * @ko 렌더러가 항상 텍스쳐를 갱신하고 화면을 렌더링 할지 여부를 설정할 수 있습니다.
  493.    * @param doUpdate When true viewer will always update texture and render, when false viewer will not update texture and render only camera config is changed.<ko>true면 항상 텍스쳐를 갱신하고 화면을 그리는 반면, false면 텍스쳐 갱신은 하지 않으며, 카메라 요소에 변화가 있을 때에만 화면을 그립니다.</ko>
  494.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  495.    */
  496.   public keepUpdate(doUpdate: boolean) {
  497.     this._photoSphereRenderer!.keepUpdate(doUpdate);
  498.     return this;
  499.   }
  501.   /**
  502.    * Get the current projection type (equirectangular/cube)
  503.    * @ko 현재 프로젝션 타입(Equirectangular 혹은 Cube)을 반환합니다.
  504.    * @return {@link eg.view360.PanoViewer.PROJECTION_TYPE}
  505.    */
  506.   public getProjectionType() {
  507.     return this._projectionType;
  508.   }
  510.   /**
  511.    * Activate the device's motion sensor, and return the Promise whether the sensor is enabled
  512.    * If it's iOS13+, this method must be used in the context of user interaction, like onclick callback on the button element.
  513.    * @ko 디바이스의 모션 센서를 활성화하고, 활성화 여부를 담는 Promise를 리턴합니다.
  514.    * iOS13+일 경우, 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
  515.    * @return Promise containing nothing when resolved, or string of the rejected reason when rejected.<ko>Promise. resolve되었을 경우 아무것도 반환하지 않고, reject되었을 경우 그 이유를 담고있는 string을 반환한다.</ko>
  516.    */
  517.   public enableSensor() {
  518.     return new Promise((resolve, reject) => {
  519.       if (DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function") {
  520.         DeviceMotionEvent.requestPermission().then(permissionState => {
  521.           if (permissionState === "granted") {
  522.             resolve();
  523.           } else {
  524.             reject(new Error("permission denied"));
  525.           }
  526.         }).catch(e => {
  527.           // This can happen when this method wasn't triggered by user interaction
  528.           reject(e);
  529.         });
  530.       } else {
  531.         resolve();
  532.       }
  533.     });
  534.   }
  536.   /**
  537.    * Disable the device's motion sensor.
  538.    * @ko 디바이스의 모션 센서를 비활성화합니다.
  539.    * @deprecated
  540.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  541.    */
  542.   public disableSensor() {
  543.     return this;
  544.   }
  546.   /**
  547.    * Switch to VR stereo rendering mode which uses WebXR / WebVR API (WebXR is preferred).
  548.    * This method must be used in the context of user interaction, like onclick callback on the button element.
  549.    * It can be rejected when an enabling device sensor fails or image/video is still loading("ready" event not triggered).
  550.    * @ko WebXR / WebVR API를 사용하는 VR 스테레오 렌더링 모드로 전환합니다. (WebXR을 더 선호합니다)
  551.    * 이 메소드는 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
  552.    * 디바이스 센서 활성화에 실패시 혹은 아직 이미지/비디오가 로딩중인 경우("ready"이벤트가 아직 트리거되지 않은 경우)에는 Promise가 reject됩니다.
  553.    * @param {object} [options={}] Additional options for WebXR session, see {@link https://developer.mozilla.org/en-US/docs/Web/API/XRSessionInit XRSessionInit}.<ko>WebXR용 추가 옵션, {@link https://developer.mozilla.org/en-US/docs/Web/API/XRSessionInit XRSessionInit}을 참조해주세요.</ko>
  554.    * @return Promise containing either a string of resolved reason or an Error instance of rejected reason.<ko>Promise가 resolve된 이유(string) 혹은 reject된 이유(Error)</ko>
  555.    */
  556.   public enterVR(options: {
  557.     requiredFeatures?: any[];
  558.     optionalFeatures?: any[];
  559.     [key: string]: any;
  560.   } = {}): globalThis.Promise<string> {
  561.     if (!this._isReady) {
  562.       return Promise.reject(new Error("PanoViewer is not ready to show image.")) as any;
  563.     }
  565.     return new Promise((resolve, reject) => {
  566.       this.enableSensor()
  567.         .then(() => this._photoSphereRenderer!.enterVR(options))
  568.         .then((res: string) => resolve(res))
  569.         .catch(e => reject(e));
  570.     }) as any;
  571.   }
  573.   /**
  574.    * Exit VR stereo rendering mode.
  575.    * @ko VR 스테레오 렌더링 모드에서 일반 렌더링 모드로 전환합니다.
  576.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  577.    */
  578.   public exitVR() {
  579.     this._photoSphereRenderer!.exitVR();
  580.     return this;
  581.   }
  583.   /**
  584.    * When set true, enables zoom with the wheel or pinch gesture. However, in the case of touch, pinch works only when the touchDirection setting is {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL}.
  585.    * @ko true 로 설정 시 휠 혹은 집기 동작으로 확대/축소 할 수 있습니다. false 설정 시 확대/축소 기능을 비활성화 합니다. 단, 터치인 경우 touchDirection 설정이 {@link eg.view360.PanoViewer.TOUCH_DIRECTION.ALL} 인 경우에만 pinch 가 동작합니다.
  586.    * @param useZoom
  587.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  588.    */
  589.   public setUseZoom(useZoom: boolean): this {
  590.     if (typeof useZoom === "boolean") {
  591.       this._yawPitchControl!.option("useZoom", useZoom);
  592.     }
  594.     return this;
  595.   }
  597.   /**
  598.    * When true, enables the keyboard move key control: awsd, arrow keys
  599.    * @ko true이면 키보드 이동 키 컨트롤을 활성화합니다. (awsd, 화살표 키)
  600.    * @param useKeyboard
  601.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  602.    */
  603.   public setUseKeyboard(useKeyboard: boolean): this {
  604.     this._yawPitchControl!.option("useKeyboard", useKeyboard);
  605.     return this;
  606.   }
  608.   /**
  609.    * Enables control through device motion. ("none", "yawPitch", "VR")
  610.    * @ko 디바이스 움직임을 통한 컨트롤을 활성화 합니다. ("none", "yawPitch", "VR")
  611.    * @param gyroMode {@link eg.view360.PanoViewer.GYRO_MODE}
  612.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  613.    * @example
  614.    * ```
  615.    * panoViewer.setGyroMode("yawPitch");
  616.    * //equivalent
  617.    * panoViewer.setGyroMode(eg.view360.PanoViewer.GYRO_MODE.YAWPITCH);
  618.    * ```
  619.    */
  620.   public setGyroMode(gyroMode: PanoViewer["_gyroMode"]) {
  621.     this._yawPitchControl!.option("gyroMode", gyroMode);
  622.     return this;
  623.   }
  625.   /**
  626.    * Set the range of controllable FOV values
  627.    * @ko 제어 가능한 FOV 구간을 설정합니다.
  628.    * @param range
  629.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  630.    * @example
  631.    * panoViewer.setFovRange([50, 90]);
  632.    */
  633.   public setFovRange(range: number[]) {
  634.     this._yawPitchControl!.option("fovRange", range);
  635.     return this;
  636.   }
  638.   /**
  639.    * Get the range of controllable FOV values
  640.    * @ko 제어 가능한 FOV 구간을 반환합니다.
  641.    * @return FOV range
  642.    * @example
  643.    * var range = panoViewer.getFovRange(); // [50, 90]
  644.    */
  645.   public getFovRange(): [number, number] {
  646.     return this._yawPitchControl!.option("fovRange") as [number, number];
  647.   }
  649.   /**
  650.    * Update size of canvas element by it's container element's or specified size. If size is not specified, the size of the container area is obtained and updated to that size.
  651.    * @ko 캔버스 엘리먼트의 크기를 컨테이너 엘리먼트의 크기나 지정된 크기로 업데이트합니다. 만약 size 가 지정되지 않으면 컨테이너 영역의 크기를 얻어와 해당 크기로 갱신합니다.
  652.    * @param {object} [size]
  653.    * @param {number} [size.width=width of the container]
  654.    * @param {number} [size.height=height of the container]
  655.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  656.    */
  657.   public updateViewportDimensions(size: Partial<{
  658.     width: number;
  659.     height: number;
  660.   }> = {}): this {
  661.     if (!this._isReady) {
  662.       return this;
  663.     }
  665.     let containerSize;
  667.     if (size.width === undefined || size.height === undefined) {
  668.       containerSize = window.getComputedStyle(this._container);
  669.     }
  671.     const width = size.width || parseInt(containerSize.width, 10);
  672.     const height = size.height || parseInt(containerSize.height, 10);
  674.     // Skip if viewport is not changed.
  675.     if (width === this._width && height === this._height) {
  676.       return this;
  677.     }
  679.     this._width = width;
  680.     this._height = height;
  682.     this._aspectRatio = width / height;
  683.     this._photoSphereRenderer!.updateViewportDimensions(width, height);
  684.     this._yawPitchControl!.option("aspectRatio", this._aspectRatio);
  685.     this._yawPitchControl!.updatePanScale({height});
  687.     this.lookAt({}, 0);
  688.     return this;
  689.   }
  691.   /**
  692.    * Get the current field of view(FOV)
  693.    * @ko 현재 field of view(FOV) 값을 반환합니다.
  694.    */
  695.   public getFov(): number {
  696.     return this._fov;
  697.   }
  699.   /**
  700.    * Get current yaw value
  701.    * @ko 현재 yaw 값을 반환합니다.
  702.    */
  703.   public getYaw() {
  704.     return this._yaw;
  705.   }
  707.   /**
  708.    * Get current pitch value
  709.    * @ko 현재 pitch 값을 반환합니다.
  710.    */
  711.   public getPitch() {
  712.     return this._pitch;
  713.   }
  715.   /**
  716.    * Get the range of controllable Yaw values
  717.    * @ko 컨트롤 가능한 Yaw 구간을 반환합니다.
  718.    */
  719.   public getYawRange(): [number, number] {
  720.     return this._yawPitchControl!.option("yawRange") as [number, number];
  721.   }
  723.   /**
  724.    * Get the range of controllable Pitch values
  725.    * @ko 컨트롤 가능한 Pitch 구간을 가져옵니다.
  726.    */
  727.   public getPitchRange(): [number, number] {
  728.     return this._yawPitchControl!.option("pitchRange") as [number, number];
  729.   }
  731.   /**
  732.    * Set the range of controllable yaw
  733.    * @ko 컨트롤 가능한 Yaw 구간을 반환합니다.
  734.    * @param {number[]} range
  735.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  736.    * @example
  737.    * panoViewer.setYawRange([-90, 90]);
  738.    */
  739.   public setYawRange(yawRange: number[]) {
  740.     this._yawPitchControl!.option("yawRange", yawRange);
  741.     return this;
  742.   }
  744.   /**
  745.    * Set the range of controllable Pitch values
  746.    * @ko 컨트롤 가능한 Pitch 구간을 설정합니다.
  747.    * @param {number[]} range
  748.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  749.    * @example
  750.    * panoViewer.setPitchRange([-40, 40]);
  751.    */
  752.   public setPitchRange(pitchRange: number[]) {
  753.     this._yawPitchControl!.option("pitchRange", pitchRange);
  754.     return this;
  755.   }
  757.   /**
  758.    * Specifies whether to display the pole by limiting the pitch range. If it is true, pole point can be displayed. If it is false, it is not displayed.
  759.    * @ko pitch 범위를 제한하여 극점을 표시할지를 지정합니다. true 인 경우 극점까지 표현할 수 있으며 false 인 경우 극점까지 표시하지 않습니다.
  760.    * @param showPolePoint
  761.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  762.    */
  763.   public setShowPolePoint(showPolePoint: boolean) {
  764.     this._yawPitchControl!.option("showPolePoint", showPolePoint);
  765.     return this;
  766.   }
  768.   /**
  769.    * Set a new view by setting camera configuration. Any parameters not specified remain the same.
  770.    * @ko 카메라 설정을 지정하여 화면을 갱신합니다. 지정되지 않은 매개 변수는 동일하게 유지됩니다.
  771.    * @param {object} orientation
  772.    * @param {number} orientation.yaw Target yaw in degree <ko>목표 yaw (degree 단위)</ko>
  773.    * @param {number} orientation.pitch Target pitch in degree <ko>목표 pitch (degree 단위)</ko>
  774.    * @param {number} orientation.fov Target vertical fov in degree <ko>목표 수직 fov (degree 단위)</ko>
  775.    * @param {number} duration Animation duration in milliseconds <ko>애니메이션 시간 (밀리 초)</ko>
  776.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  777.    * @example
  778.    * ```
  779.    * // Change the yaw angle (absolute angle) to 30 degrees for one second.
  780.    * panoViewer.lookAt({yaw: 30}, 1000);
  781.    * ```
  782.    */
  783.   public lookAt(orientation: Partial<{
  784.     yaw: number;
  785.     pitch: number;
  786.     fov: number;
  787.   }>, duration: number = 0) {
  788.     if (!this._isReady) {
  789.       return this;
  790.     }
  792.     const yaw = orientation.yaw !== undefined ? orientation.yaw : this._yaw;
  793.     const pitch = orientation.pitch !== undefined ? orientation.pitch : this._pitch;
  794.     const pitchRange = this._yawPitchControl!.option("pitchRange");
  795.     const verticalAngleOfImage = pitchRange[1] - pitchRange[0];
  796.     let fov = orientation.fov !== undefined ? orientation.fov : this._fov;
  798.     if (verticalAngleOfImage < fov) {
  799.       fov = verticalAngleOfImage;
  800.     }
  802.     this._yawPitchControl!.lookAt({yaw, pitch, fov}, duration);
  804.     if (duration === 0) {
  805.       this._photoSphereRenderer!.renderWithYawPitch(yaw, pitch, fov);
  806.     }
  807.     return this;
  808.   }
  810.   /**
  811.    * Set touch direction by which user can control.
  812.    * @ko 사용자가 조작가능한 터치 방향을 지정합니다.
  813.    * @param direction of the touch. {@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>컨트롤 가능한 방향 {@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
  814.    * @return PanoViewer instance
  815.    * @example
  816.    * ```
  817.    * panoViewer = new PanoViewer(el);
  818.    * // Limit the touch direction to the yaw direction only.
  819.    * panoViewer.setTouchDirection(eg.view360.PanoViewer.TOUCH_DIRECTION.YAW);
  820.    * ```
  821.    */
  822.   public setTouchDirection(direction: number): this {
  823.     if (PanoViewer._isValidTouchDirection(direction)) {
  824.       this._yawPitchControl!.option("touchDirection", direction);
  825.     }
  827.     return this;
  828.   }
  830.   /**
  831.    * Returns touch direction by which user can control
  832.    * @ko 사용자가 조작가능한 터치 방향을 반환한다.
  833.    * @return direction of the touch. {@link eg.view360.PanoViewer.TOUCH_DIRECTION}<ko>컨트롤 가능한 방향 {@link eg.view360.PanoViewer.TOUCH_DIRECTION}</ko>
  834.    * @example
  835.    * ```
  836.    * panoViewer = new PanoViewer(el);
  837.    * // Returns the current touch direction.
  838.    * var dir = panoViewer.getTouchDirection();
  839.    * ```
  840.    */
  841.   public getTouchDirection(): number {
  842.     return this._yawPitchControl!.option("touchDirection") ;
  843.   }
  845.   /**
  846.    * Destroy viewer. Remove all registered event listeners and remove viewer canvas.
  847.    * @ko 뷰어 인스턴스를 해제합니다. 모든 등록된 이벤트리스너를 제거하고 뷰어 캔버스를 삭제합니다.
  848.    * @return PanoViewer instance<ko>PanoViewer 인스턴스</ko>
  849.    */
  850.   public destroy(): this {
  851.     this._deactivate();
  853.     if (this._yawPitchControl) {
  854.       this._yawPitchControl.destroy();
  855.       this._yawPitchControl = null;
  856.     }
  858.     return this;
  859.   }
  861.   // TODO: Remove parameters as they're just using private values
  862.   private _initRenderer(
  863.     yaw: number,
  864.     pitch: number,
  865.     fov: number,
  866.     projectionType: PanoViewer["_projectionType"],
  867.     cubemapConfig: PanoViewer["_cubemapConfig"]
  868.   ) {
  869.     this._photoSphereRenderer = new PanoImageRenderer(
  870.       this._image,
  871.       this._width,
  872.       this._height,
  873.       this._isVideo,
  874.       this._container,
  875.       this._canvasClass,
  876.       {
  877.         initialYaw: yaw,
  878.         initialPitch: pitch,
  879.         fieldOfView: fov,
  880.         imageType: projectionType,
  881.         cubemapConfig,
  882.         stereoFormat: this._stereoFormat
  883.       },
  884.     );
  885.     this._photoSphereRenderer.setYawPitchControl(this._yawPitchControl!);
  887.     this._bindRendererHandler();
  889.     this._photoSphereRenderer
  890.       .bindTexture()
  891.       .then(() => this._activate())
  892.       .catch(() => {
  893.         this.trigger(new ComponentEvent(EVENTS.ERROR, {
  894.           type: ERROR_TYPE.FAIL_BIND_TEXTURE,
  895.           message: "failed to bind texture"
  896.         }));
  897.       });
  898.   }
  900.   /**
  901.    * @private
  902.    * update values of YawPitchControl if needed.
  903.    * For example, In Panorama mode, initial fov and pitchRange is changed by aspect ratio of image.
  904.    *
  905.    * This function should be called after isReady status is true.
  906.    */
  907.   private _updateYawPitchIfNeeded() {
  908.     if (this._projectionType === PanoViewer.ProjectionType.PANORAMA) {
  909.       // update fov by aspect ratio
  910.       const image = this._photoSphereRenderer!.getContent()! as HTMLImageElement;
  911.       let imageAspectRatio = image.naturalWidth / image.naturalHeight;
  912.       let yawSize;
  913.       let maxFov;
  915.       // If height is larger than width, then we assume it's rotated by 90 degree.
  916.       if (imageAspectRatio < 1) {
  917.         // So inverse the aspect ratio.
  918.         imageAspectRatio = 1 / imageAspectRatio;
  919.       }
  921.       if (imageAspectRatio < 6) {
  922.         yawSize = mathUtil.toDegree(imageAspectRatio);
  923.         // 0.5 means ratio of half height of cylinder(0.5) and radius of cylider(1). 0.5/1 = 0.5
  924.         maxFov = mathUtil.toDegree(Math.atan(0.5)) * 2;
  925.       } else {
  926.         yawSize = 360;
  927.         maxFov = (360 / imageAspectRatio); // Make it 5 fixed as axes does.
  928.       }
  930.       // console.log("_updateYawPitchIfNeeded", maxFov, "aspectRatio", image.naturalWidth, image.naturalHeight, "yawSize", yawSize);
  931.       const minFov = (this._yawPitchControl!.option("fovRange"))[0];
  933.       // this option should be called after fov is set.
  934.       this._yawPitchControl!.option({
  935.         "fov": maxFov, /* parameter for internal validation for pitchrange */
  936.         "yawRange": [-yawSize / 2, yawSize / 2],
  937.         "pitchRange": [-maxFov / 2, maxFov / 2],
  938.         "fovRange": [minFov, maxFov]
  939.       });
  940.       this.lookAt({fov: maxFov});
  941.     }
  942.   }
  944.   private	_bindRendererHandler() {
  945.     this._photoSphereRenderer!.on(PanoImageRenderer.EVENTS.ERROR, e => {
  946.       this.trigger(new ComponentEvent(EVENTS.ERROR, e));
  947.     });
  949.     this._photoSphereRenderer!.on(PanoImageRenderer.EVENTS.RENDERING_CONTEXT_LOST, () => {
  950.       this._deactivate();
  951.       this.trigger(new ComponentEvent(EVENTS.ERROR, {
  952.         type: ERROR_TYPE.RENDERING_CONTEXT_LOST,
  953.         message: "webgl rendering context lost"
  954.       }));
  955.     });
  956.   }
  958.   private _initYawPitchControl(yawPitchConfig: Partial<YawPitchControlOptions>) {
  959.     this._yawPitchControl = new YawPitchControl(yawPitchConfig);
  961.     this._yawPitchControl.on(EVENTS.ANIMATION_END, e => {
  962.       this.trigger(new ComponentEvent(EVENTS.ANIMATION_END, e));
  963.     });
  965.     this._yawPitchControl.on("change", e => {
  966.       this._yaw = e.yaw;
  967.       this._pitch = e.pitch;
  968.       this._fov = e.fov;
  969.       this._quaternion = e.quaternion;
  971.       this.trigger(new ComponentEvent(EVENTS.VIEW_CHANGE, {
  972.         yaw: e.yaw,
  973.         pitch: e.pitch,
  974.         fov: e.fov,
  975.         quaternion: e.quaternion,
  976.         isTrusted: e.isTrusted
  977.       }));
  978.     });
  979.   }
  981.   private _activate() {
  982.     this._photoSphereRenderer!.attachTo(this._container);
  983.     this._yawPitchControl!.enable();
  985.     this.updateViewportDimensions();
  987.     this._isReady = true;
  989.     // update yawPitchControl after isReady status is true.
  990.     this._updateYawPitchIfNeeded();
  992.     this.trigger(new ComponentEvent(EVENTS.READY));
  993.     this._photoSphereRenderer!.startRender();
  994.   }
  996.   /**
  997.    * Destroy webgl context and block user interaction and stop rendering
  998.    */
  999.   private _deactivate() {
  1000.     // Turn off the video if it has one
  1001.     const video = this.getVideo();
  1002.     if (video) {
  1003.       video.pause();
  1004.     }
  1006.     if (this._isReady) {
  1007.       this._photoSphereRenderer!.stopRender();
  1008.       this._yawPitchControl!.disable();
  1009.       this._isReady = false;
  1010.     }
  1012.     if (this._photoSphereRenderer) {
  1013.       this._photoSphereRenderer.destroy();
  1014.       this._photoSphereRenderer = null;
  1015.     }
  1016.   }
  1017. }
  1019. export default PanoViewer;
comments powered by Disqus