Class: PanoViewer

// PanoViewer Creation
// create PanoViewer with option
var PanoViewer = eg.view360.PanoViewer;
// Area where the image will be displayed(HTMLElement)
var container = document.getElementById("myPanoViewer");

var panoViewer = new PanoViewer(container, {
  // If projectionType is not specified, the default is "equirectangular".
  // Specifies an image of the "equirectangular" type.
  image: "/path/to/image/image.jpg"
});

// Cubemap Config Setting Example
// For support Youtube EAC projection, You should set cubemapConfig as follows.
cubemapConfig: {
  order: "LFRDBU",
  tileConfig: [{rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: 0}, {rotation: -90}, {rotation: 180}]
}

Extends

• eg.Component

Namespaces

ERROR_TYPE

EVENTS

GYRO_MODE

PROJECTION_TYPE

STEREO_FORMAT

Members

staticeg.view360.PanoViewer.VERSIONString

Version info string

버전정보 문자열

Example

eg.view360.PanoViewer.VERSION;  // ex) 3.0.1

_yaw

Cache the direction for the performance in renderLoop

This value should be updated by "change" event of YawPitchControl.

Methods

staticeg.view360.PanoViewer.isGyroSensorAvailable(callback)

PanoViewer.ts, line 74

Check whether the current environment supports the gyro sensor.

현재 브라우저 환경이 자이로 센서를 지원하는지 여부를 확인합니다.

• callback
  Type: (isAvailable: boolean) => any

  Function to take the gyro sensor availability as argument

  자이로 센서를 지원하는지 여부를 인자로 받는 함수

staticeg.view360.PanoViewer.isSupported(){boolean}

PanoViewer.ts, line 56

Check whether the current environment can execute PanoViewer

현재 브라우저 환경에서 PanoViewer 실행이 가능한지 여부를 반환합니다.

Returns:

Type	Description
boolean	PanoViewer executable PanoViewer 실행가능 여부

staticeg.view360.PanoViewer.isWebGLAvailable(){boolean}

PanoViewer.ts, line 65

Check whether the current environment supports the WebGL

현재 브라우저 환경이 WebGL 을 지원하는지 여부를 확인합니다.

Returns:

Type	Description
boolean	WebGL support WebGL 지원여부

destroy(){this}

PanoViewer.ts, line 850

Destroy viewer. Remove all registered event listeners and remove viewer canvas.

뷰어 인스턴스를 해제합니다. 모든 등록된 이벤트리스너를 제거하고 뷰어 캔버스를 삭제합니다.

Returns:

Type	Description
this	PanoViewer instance PanoViewer 인스턴스

disableSensor()

PanoViewer.ts, line 542

Disable the device's motion sensor.

디바이스의 모션 센서를 비활성화합니다.

Returns:

PanoViewer instancePanoViewer 인스턴스

Deprecated

• Yes

enableSensor()

PanoViewer.ts, line 517

Activate the device's motion sensor, and return the Promise whether the sensor is enabled
If it's iOS13+, this method must be used in the context of user interaction, like onclick callback on the button element.

디바이스의 모션 센서를 활성화하고, 활성화 여부를 담는 Promise를 리턴합니다.
iOS13+일 경우, 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.

Returns:

Promise containing nothing when resolved, or string of the rejected reason when rejected.Promise. resolve되었을 경우 아무것도 반환하지 않고, reject되었을 경우 그 이유를 담고있는 string을 반환한다.

enterVR(options){globalThis.Promise<string>}

PanoViewer.ts, line 556

Switch to VR stereo rendering mode which uses WebXR / WebVR API (WebXR is preferred).
This method must be used in the context of user interaction, like onclick callback on the button element.
It can be rejected when an enabling device sensor fails or image/video is still loading("ready" event not triggered).

WebXR / WebVR API를 사용하는 VR 스테레오 렌더링 모드로 전환합니다. (WebXR을 더 선호합니다)
이 메소드는 사용자 인터렉션에 의해서 호출되어야 합니다. 예로, 버튼의 onclick 콜백과 같은 콘텍스트에서 호출되어야 합니다.
디바이스 센서 활성화에 실패시 혹은 아직 이미지/비디오가 로딩중인 경우("ready"이벤트가 아직 트리거되지 않은 경우)에는 Promise가 reject됩니다.

• options (default: {}) optional
  Type: object

  Additional options for WebXR session, see XRSessionInit.

  WebXR용 추가 옵션, XRSessionInit을 참조해주세요.

Returns:

Type	Description
globalThis.Promise<string>	Promise containing either a string of resolved reason or an Error instance of rejected reason. Promise가 resolve된 이유(string) 혹은 reject된 이유(Error)

exitVR()

PanoViewer.ts, line 578

Exit VR stereo rendering mode.

VR 스테레오 렌더링 모드에서 일반 렌더링 모드로 전환합니다.

Returns:

PanoViewer instancePanoViewer 인스턴스

getFov(){number}

PanoViewer.ts, line 695

Get the current field of view(FOV)

현재 field of view(FOV) 값을 반환합니다.

Returns:

Type	Description
number

getFovRange(){[number, number]}

PanoViewer.ts, line 645

Get the range of controllable FOV values

제어 가능한 FOV 구간을 반환합니다.

Returns:

Type	Description
[number, number]	FOV range FOV range

Example

var range = panoViewer.getFovRange(); // [50, 90]

getImage()

PanoViewer.ts, line 423

Get the image information that the viewer is currently using.

뷰어가 현재 사용하고있는 이미지 정보를 얻습니다.

Returns:

Image Object이미지 객체

Example

var imageObj = panoViewer.getImage();

getPitch()

PanoViewer.ts, line 711

Get current pitch value

현재 pitch 값을 반환합니다.

getPitchRange(){[number, number]}

PanoViewer.ts, line 727

Get the range of controllable Pitch values

컨트롤 가능한 Pitch 구간을 가져옵니다.

Returns:

Type	Description
[number, number]

getProjectionType()

PanoViewer.ts, line 506

Get the current projection type (equirectangular/cube)

현재 프로젝션 타입(Equirectangular 혹은 Cube)을 반환합니다.

Returns:

eg.view360.PanoViewer.PROJECTION_TYPE

getTouchDirection(){number}

PanoViewer.ts, line 841

Returns touch direction by which user can control

사용자가 조작가능한 터치 방향을 반환한다.

Returns:

Type	Description
number	direction of the touch. eg.view360.PanoViewer.TOUCH_DIRECTION 컨트롤 가능한 방향 eg.view360.PanoViewer.TOUCH_DIRECTION

Example

panoViewer = new PanoViewer(el);
// Returns the current touch direction.
var dir = panoViewer.getTouchDirection();

getVideo()

PanoViewer.ts, line 374

Get the video element that the viewer is currently playing. You can use this for playback.

뷰어가 현재 사용 중인 비디오 요소를 얻습니다. 이 요소를 이용해 비디오의 컨트롤을 할 수 있습니다.

Returns:

HTMLVideoElementHTMLVideoElement

Example

var videoTag = panoViewer.getVideo();
videoTag.play(); // play the video!

getYaw()

PanoViewer.ts, line 703

Get current yaw value

현재 yaw 값을 반환합니다.

getYawRange(){[number, number]}

PanoViewer.ts, line 719

Get the range of controllable Yaw values

컨트롤 가능한 Yaw 구간을 반환합니다.

Returns:

Type	Description
[number, number]

keepUpdate(doUpdate)

PanoViewer.ts, line 496

Set whether the renderer always updates the texture and renders.

렌더러가 항상 텍스쳐를 갱신하고 화면을 렌더링 할지 여부를 설정할 수 있습니다.

• doUpdate
  Type: boolean

  When true viewer will always update texture and render, when false viewer will not update texture and render only camera config is changed.

  true면 항상 텍스쳐를 갱신하고 화면을 그리는 반면, false면 텍스쳐 갱신은 하지 않으며, 카메라 요소에 변화가 있을 때에만 화면을 그립니다.

Returns:

PanoViewer instancePanoViewer 인스턴스

lookAt(orientation, duration)

PanoViewer.ts, line 783

Set a new view by setting camera configuration. Any parameters not specified remain the same.

카메라 설정을 지정하여 화면을 갱신합니다. 지정되지 않은 매개 변수는 동일하게 유지됩니다.

• orientation
  Type: object
  • yaw (default: 0) optional
    Type: number

    Target yaw in degree

    목표 yaw (degree 단위)

  • pitch
    Type: number

    Target pitch in degree

    목표 pitch (degree 단위)

  • fov
    Type: number

    Target vertical fov in degree

    목표 수직 fov (degree 단위)

• duration
  Type: number

  Animation duration in milliseconds

  애니메이션 시간 (밀리 초)

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

// Change the yaw angle (absolute angle) to 30 degrees for one second.
panoViewer.lookAt({yaw: 30}, 1000);

setFovRange(range)

PanoViewer.ts, line 633

Set the range of controllable FOV values

제어 가능한 FOV 구간을 설정합니다.

• range
  Type: number[]

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setFovRange([50, 90]);

setGyroMode(gyroMode)

PanoViewer.ts, line 620

Enables control through device motion. ("none", "yawPitch", "VR")

디바이스 움직임을 통한 컨트롤을 활성화 합니다. ("none", "yawPitch", "VR")

• gyroMode
  Type: PanoViewer["_gyroMode"]

  eg.view360.PanoViewer.GYRO_MODE

  eg.view360.PanoViewer.GYRO_MODE

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setGyroMode("yawPitch");
//equivalent
panoViewer.setGyroMode(eg.view360.PanoViewer.GYRO_MODE.YAWPITCH);

setImage(image, param)

PanoViewer.ts, line 449

Set the image information to be used by the viewer.

뷰어가 사용할 이미지 정보를 설정합니다.

• image
  Type: string | HTMLElement | object

  Input image url or element or config object

  입력 이미지 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정한다.)

• param (default: {}) optional
  Type: object

  Additional information

  이미지 추가 정보

  • projectionType (default: "equirectangular") optional
    Type: string

    Projection Type

    프로젝션 타입

  • cubemapConfig
    Type: object

    config cubemap projection layout.

    cubemap projection type 레이아웃

  • stereoFormat (default: "3dv") optional
    Type: string

    Contents format of the stereoscopic equirectangular projection. See eg.view360.PanoViewer.STEREO_FORMAT.

    Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. eg.view360.PanoViewer.STEREO_FORMAT 참조.

  • isVideo (default: false) optional
    Type: boolean

    Whether the given imaage is video or not.

    이미지가 비디오인지 여부

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setImage("/path/to/image/image.png", {
    projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.CUBEMAP
});

setPitchRange(range)

PanoViewer.ts, line 752

Set the range of controllable Pitch values

컨트롤 가능한 Pitch 구간을 설정합니다.

• range
  Type: Array.<number>

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setPitchRange([-40, 40]);

setShowPolePoint(showPolePoint)

PanoViewer.ts, line 763

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.

pitch 범위를 제한하여 극점을 표시할지를 지정합니다. true 인 경우 극점까지 표현할 수 있으며 false 인 경우 극점까지 표시하지 않습니다.

• showPolePoint
  Type: boolean

Returns:

PanoViewer instancePanoViewer 인스턴스

setTouchDirection(direction){this}

PanoViewer.ts, line 822

Set touch direction by which user can control.

사용자가 조작가능한 터치 방향을 지정합니다.

• direction
  Type: number

  of the touch. eg.view360.PanoViewer.TOUCH_DIRECTION

  컨트롤 가능한 방향 eg.view360.PanoViewer.TOUCH_DIRECTION

Returns:

Type	Description
this	PanoViewer instance PanoViewer instance

Example

panoViewer = new PanoViewer(el);
// Limit the touch direction to the yaw direction only.
panoViewer.setTouchDirection(eg.view360.PanoViewer.TOUCH_DIRECTION.YAW);

setUseKeyboard(useKeyboard){this}

PanoViewer.ts, line 603

When true, enables the keyboard move key control: awsd, arrow keys

true이면 키보드 이동 키 컨트롤을 활성화합니다. (awsd, 화살표 키)

• useKeyboard
  Type: boolean

Returns:

Type	Description
this	PanoViewer instance PanoViewer 인스턴스

setUseZoom(useZoom){this}

PanoViewer.ts, line 589

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 eg.view360.PanoViewer.TOUCH_DIRECTION.ALL.

true 로 설정 시 휠 혹은 집기 동작으로 확대/축소 할 수 있습니다. false 설정 시 확대/축소 기능을 비활성화 합니다. 단, 터치인 경우 touchDirection 설정이 eg.view360.PanoViewer.TOUCH_DIRECTION.ALL 인 경우에만 pinch 가 동작합니다.

• useZoom
  Type: boolean

Returns:

Type	Description
this	PanoViewer instance PanoViewer 인스턴스

setVideo(video, param)

PanoViewer.ts, line 399

Set the video information to be used by the viewer.

뷰어가 사용할 이미지 정보를 설정합니다.

• video
  Type: string | HTMLVideoElement | object

  Input video url or element or config object

  입력 비디오 URL 혹은 엘리먼트 혹은 설정객체를 활용(image 와 video 둘 중 하나만 설정)

• param (default: {}) optional
  Type: object
  • projectionType (default: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR("equirectangular")) optional
    Type: string

    Projection Type

    프로젝션 타입

  • cubemapConfig
    Type: object

    config cubemap projection layout.

    cubemap projection type 의 레이아웃 설정

  • stereoFormat (default: "3dv") optional
    Type: string

    Contents format of the stereoscopic equirectangular projection. See eg.view360.PanoViewer.STEREO_FORMAT.

    Stereoscopic equirectangular projection type의 콘텐츠 포맷을 설정한다. eg.view360.PanoViewer.STEREO_FORMAT 참조.

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setVideo("/path/to/video/video.mp4", {
    projectionType: eg.view360.PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR
});

setYawRange(range)

PanoViewer.ts, line 739

Set the range of controllable yaw

컨트롤 가능한 Yaw 구간을 반환합니다.

• range
  Type: Array.<number>

Returns:

PanoViewer instancePanoViewer 인스턴스

Example

panoViewer.setYawRange([-90, 90]);

updateViewportDimensions(size){this}

PanoViewer.ts, line 657

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.

캔버스 엘리먼트의 크기를 컨테이너 엘리먼트의 크기나 지정된 크기로 업데이트합니다. 만약 size 가 지정되지 않으면 컨테이너 영역의 크기를 얻어와 해당 크기로 갱신합니다.

• size (default: {}) optional
  Type: object
  • width (default: width of the container) optional
    Type: number
  • height (default: height of the container) optional
    Type: number

Returns:

Type	Description
this	PanoViewer instance PanoViewer 인스턴스