일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 웹에이전시
- 쇼핑몰
- 홈페이지제작
- 제이쿼리
- 사이트제작
- 개발자
- 홈페이지구축
- JQuery
- 웹디자이너
- 웹퍼블리셔
- 쇼핑몰구축
- jQuery Plugin
- 플러그인
- 워크식스
- 튜닝
- 안드로이드
- plugin
- 3D프린터
- 포트폴리오
- 프로그래머
- work6.kr
- 커스터마이징
- 홈페이지
- 웹개발자
- CSS
- 웹디자인
- 고도몰
- PHP
- 쇼핑몰제작
- 웹퍼블리싱
- Today
- Total
그냥 개발자 블로그
[워크식스] 사이버 모델하우스에 이용하면 좋은 VR(3D) 웹뷰어 본문
사이버 모델하우스를 통해서 현장에 가지 않고도 많은 것을 볼 수 있습니다. 파노라마를 촬영하여 구현하면 더욱 신뢰감 가는 홈페이지를 만들수 있을것 입니다.
이를 도와주는 Pannellum은 웹용으로 가볍고 자유롭고 오픈소스 파노라마 뷰어 입니다. HTML5, CSS3, JAVASCRIPT 및 WebGL을 사용하여 제작된 플러그인 입니다.
자세한 내용은 https://pannellum.org/ 에서 확인 할 수 있으며 여기서는 간단한 사용법만 안내 합니다.
멋진 가상체험 공간을 만들기 위해선 특수 카메라로 촬영된 이미지가 필요 합니다.
Pannellum 은 HTML5, CSS3, JAVASCRIPT 만 안다면 쉽게 구현이 가능 합니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tour</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.4/pannellum.js"></script> <style> #panorama { width: 600px; height: 400px; } </style> </head> <body> <div id="panorama"></div> <script> pannellum.viewer('panorama', { "default": { "firstScene": "circle", "author": "Matthew Petroff", "sceneFadeDuration": 1000 }, "scenes": { "circle": { "title": "Mason Circle", "hfov": 110, "pitch": -3, "yaw": 117, "type": "equirectangular", "panorama": "/images/from-tree.jpg", "hotSpots": [ { "pitch": -2.1, "yaw": 132.9, "type": "scene", "text": "Spring House or Dairy", "sceneId": "house" } ] }, "house": { "title": "Spring House or Dairy", "hfov": 110, "yaw": 5, "type": "equirectangular", "panorama": "/images/bma-0.jpg", "hotSpots": [ { "pitch": -0.6, "yaw": 37.1, "type": "scene", "text": "Mason Circle", "sceneId": "circle", "targetYaw": -23, "targetPitch": 2 } ] } } }); </script> </body> </html>
심지어 iframe 형태로의 CDN 도 지원하고 있어 보다 쉽게 사용할 수 있습니다.
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.4/pannellum.htm?config=https://pannellum.org/configs/tour.json"></iframe>
예제입니다.
copyright ⓒ 2018. 워크식스
'IT소식&팁' 카테고리의 다른 글
로고 디자인 공모전 후기 (0) | 2018.08.27 |
---|---|
SW기술자 평균임금(개발자 평균임금) 정말 높은걸까? (0) | 2018.08.24 |
산출 방법에 따라 달라지는 홈페이지(소프트웨어) 개발 견적 (0) | 2018.08.14 |
차갑군 캐릭터 이모티콘 디자인 (0) | 2018.07.27 |
법원 경매 정보 API (0) | 2018.07.27 |