Skip to content

PanoViewer 3.0 User Guide | 한국어

Jump to bottom
Jongmoon Yoon edited this page Dec 27, 2018 · 12 revisions

시작하기

사전 지식

  • WebGL 은 기본적으로 동일한 출처(Origin)의 이미지만 허용합니다.
  • 만약 다른 출처(Origin)이미지를 사용하는 경우 이미지 제공 서버에서 CORS 설정을 해주어야 합니다.

출처(Origin) 동일의 기준

  1. 프로토콜
  2. 호스트 명
  3. 포트

참고: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

1. 사진 로딩하기

Equirectangular 형태의 360도 사진(참고)이 준비되었다면 이미 절반은 진행한 것입니다.

지원가능한 프로젝션 타입

이미지가 보여질 영역(div#myPanoViewer)를 만들어 두고, view360 라이브러리를 로드한 후 PanoViewer 에 준비된 이미지 URL 을 옵션의 image 속성에 지정하면 끝입니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    #myPanoViewer {
      position: relative; /* 반드시 relative 혹은absolute 를 지정합니다.*/
      width: 600px;
      height: 400px;
    }
    </style>
</head>
<body>

<div id="myPanoViewer"></div>
<script src="//naver.github.io/egjs-view360/release/3.0.0-rc/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
<script>
// create PanoViewer with option
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer");// 이미지가 표시될 영역(HTMLElement)
	
var panoViewer = new PanoViewer(container, {
            // projectionType 을 지정하지 않는 경우 기본값은 "equirectangular" 이다.
            image: "/path/to/image/image.jpg" // "equirectangular" 타입의 이미지를 지정한다.
      }
);
</script>

</body>
</html>

예제 보러 가기

2. 비디오 로딩하기

view360 은 360 이미지 뿐만 아니라 360 동영상도 지원합니다.

비디오 로딩 방법은 이미지 로딩하는 방법과 유사합니다. 다른 점은 이미지를 로딩하는 경우 생성자의 옵션 중 image 속성에 값을 지정하는 대신 비디오를 로딩하는 경우 생성자의 옵션중 video 속성을 지정해야 합니다.

아래 예제에서는 재생하고자하는 비디오 태그를 video 속성에 지정한 예입니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    #myPanoViewer {
      position: relative; /* 반드시 relative 혹은absolute 를 지정합니다.*/
      width: 600px;
      height: 400px;
    }
    </style>
</head>
<body>

<div id="myPanoViewer"></div>
<script src="//naver.github.io/egjs-view360/release/3.0.0-rc/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>
<!-- video 태그를 지정한다. 이때 video 가 중복으로 보여지지 않도록 display:none 처리한다. -->
<video id="videoSrc" style="width:100%;height:400px;display:none">
	<source src="../img/PanoViewer/pano.webm" type="video/webm">
	<source src="../img/PanoViewer/pano.mp4" type="video/mp4">
</video>
<script>
// create PanoViewer with option
var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer"); // 비디오가 표시될 영역(HTMLElement)
var videoTag = document.getElementById("videoSrc");
	
const panoViewer = new PanoViewer(container, {
            // projectionType 을 지정하지 않는 경우 기본값은 "equirectangular" 이다.
            video: videoTag // 이미지 태그를 지정한다.
      }
);
</script>

</body>
</html>

예제 보러 가기

es5 & es6 환경에서 사용법

1. es5

<script src="//naver.github.io/egjs-view360/release/3.0.0-rc/dist/PanoViewer/view360.panoviewer.pkgd.min.js"></script>

<script>
	// Use global namespace
	var PanoViewer = eg.view360.PanoViewer;
	
	// create PanoViewer with option
	var panoViewer = new PanoViewer(
	  document.getElementById("myPanoViewer"),
	  {
		image: "/path/to/image/image.jpg"
	  }
	);
</script>

2. es6

import {PanoViewer} from "@egjs/view360"
	
// create PanoViewer with option
const panoViewer = new PanoViewer(
  document.getElementById("myPanoViewer"),
  {
	image: "/path/to/image/image.jpg"
  }
);

주요 옵션 사용법

1. 컨텐트 타입 지정하기

지원가능한 프로젝션 타입

관련 옵션

  1. projectionType
  2. image
  3. video

2. 시야(View) 변경 하기

관련 옵션

  1. yaw
  2. pitch
  3. fov

3. 움직임에 의한 시야 변경 방식 바꾸기

관련 옵션

gyroMode

4. 터치 방향 제한하기

관련 옵션

touchDirection

이벤트/에러 핸들링

1. 이벤트 처리하기

2. 에러 처리하기

API 문서

Guide

PanoViewer

Getting Started

Option usage

Event/Error Handling

SpinViewer

Getting Started

Common

Change Notes

Trouble Shooting

Clone this wiki locally