술이 사람을 먹듯 생각이 사람을 먹었다

삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2 본문

VR

삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2

victorJ 2017. 5. 15. 11:00







블로그에 360 사진을 올려보자



관련내용

2017/05/08 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료






이제는 기본준비작업은 끝났고 티스토리에 360 사진을 볼수 있게 적용하는 또다른 준비작업을 알아보도록 하겠습니다.






Pannellum(링크)

△ Documentation 을 선적 서류 비치 로 번역하였군요 ㅎㅎ 개요가 나옵니다.







△ 예제들을 눌러 화면을 이동합니다.







△ 1.에서 예제를 선택하면 2.화면에 적용되고 3.소스로 나타납니다. 여기서는 API를 사용하는 방법으로 진행하겠습니다.







위 그림에서 예제를 보면 다양한 기능을 볼수 있습니다. 각각 기능들을 따로 사용할수도 있고 같이 사용할수도 있습니다.

그럼 이제 대충 페이지를 둘러보았고 예제를 적용해 보도록 하겠습니다.






△ 관리 화면에서 HTML/CSS 편집을 눌러줍니다.









△ 파일업로드를 눌러 기존에 다운받은 pannellum.css ,pannellum.js 파일을 추가해 줍니다.







△ 기본적으로 images/ 아래로 저장이 되더군요. 아무튼 2개의 파일을 추가하였습니다.






△ 이제 HTML 로 들어가서 올린 파일을 사용할수 있게 적용하겠습니다.






△ <head> 와 </head> 사이에 위와 같이 넣어줍니다.







이제 360 사진을 올릴수 있는 준비작업은 완료 되었습니다.

이제 원하는 곳에 Pannellum 에서 제공하는 API를 사용하면 끝입니다.


제가 사용한 코드 입니다. 다음의 코드를 원하는곳에 넣어주면 끝입니다.

1
2
3
4
5
6
7
8
9
<div id="panorama" style="width:80%;height:400px;margin: 0 auto;"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "http://i.imgur.com/xzZizo4.jpg",
     "autoLoad": true,
     "autoRotate": -10
});
</script>
cs





△ 위 코드가 적용된 360 사진입니다.




관련내용

2017/05/08 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업2

2017/05/15 - [VR] - 삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료



저작자표시

'VR' 카테고리의 다른 글

삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #적용완료  (2) 2017.05.15
삼성 기어 360(Gear 360)으로 찍은 사진 블로그에 올리기 #준비작업  (0) 2017.05.08
삼성 뉴기어vr 과 기어vr 2017 스펙비교  (0) 2017.04.22
기어vr 2017 에 대해서 알아봅시다.  (0) 2017.04.22
삼성 뉴기어VR(New GearVR) 추천어플#3 Jogger(모션게임)  (0) 2017.04.06
공유하기 링크
'VR' Related Articles more
Comments