360도 VR 사진 또는 동영상 뷰어 게시판
관련링크
본문
현재, 네이버 블로그에서는 인스타360 등으로 찍은 사진을 등록하고 360도 VR로 볼 수가 있는데, 그누보드 게시판에서도 동일하게 직접 등록하고 볼 수 있게 혹시 가능할까요?
답변 3
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
</script>
</body>
</html>
이거 그대로 저장하면 보일 겁니다.
네 감사합니다. 한번 해보겠습니다.
와~ 잘 됩니다!! 정말 감사합니다^^
한국차박물관 360VR 파노라마 - https://dalmoi.pe.kr/vr/bosung/
그누보드 5.xx
. . .
게시판에서도 직접 등록하고,
VR 방식으로 회전/확대/탐색이 가능한 형태로 구현하실 수 있습니다.
이미지 업로드 + JavaScript 뷰어 연동만 하시면 되고,
커스터마이징 범위 내에서 어렵지 않게 구축하실 수 있습니다.
붙임) 그누보드 게시판 내부에 VR 기능을 직접 구현하는 것도 좋지만,
실 서비스에서는 "링크 방식"을 사용하는 것이 훨씬 효율적입니다.
즉, 360 VR(정지 이미지 기반)이시라면, HTML 파일로 관리하고
이를 게시판(웹 페이지)에서 iframe으로 불러와 삽입하는 방식이 최상의 조합일 것입니다.
답변 감사합니다. 말씀주신 사항에 "이미지 업로드 + JavaScript 뷰어 연동"을 어떻게 할 수 있는지 조금 더 자세하게 알려주실 수 있으실까요? JavaScript 뷰어가 핵심인 것 같은데, 이걸 어디에 올려서 어떻게 연동 시켜야 할지 감이 영 안오네요;; 올려주신 360VR 파노라마 페이지가 굉장히 보기 좋네요.
그냥 카메라로 찍는다고 VR(정지 관점)이 되지 않습니다.
회전 가능한 구형 이미지가 필요합니다.
사용자가 볼 수 있도록 화면 회전, 확대, 초기 방향 등 세팅.. 등등 ~
VR을 제작할 수 있는 소프트웨어가 있어야합니다.
, , ,
혹시, 전용 장비가 아닌, 스마트폰으로 회전하면서 찍으셨나요?
, , ,
예시 VR은 vr 전용 장비로 찍어, pano2vr로 XML을 만들고 HTML/JS 뷰어로 로딩한 것임.
>>> 자바 핵심입니다.
pano = new pano2vrPlayer("container");
skin = new pano2vrSkin(pano);
window.addEventListener("load", function () {
pano.readConfigUrlAsync("pano.xml");
});
, , ,
폰으로 만든 *.jpg라면~ ===
<!-- 예시: pannellum.js -->
<div id="vrviewer" style="width:100%;height:500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css"/>
<script>
pannellum.viewer('vrviewer', {
"type": "equirectangular",
"panorama": "***.jpg",
"autoLoad": true
});
</script>
인스타360 장비로 촬영을 하였고, 말씀하신 equirectangular 이미지 방식(360도 VR)으로 촬영하고, 편집된 .jpg 파일까지만 있습니다. 이걸, 네이버 블로그에 올리면 자동으로 360도 VR 사진으로 보이는데, 그누보드 홈페이지에서도 게시판 게시물로 올렸을 때, 360 VR 화면으로 보여지게 하고 싶습니다.
또는, 게시물은 정지화면인 일반 .jpg 로 등록을 하고, 이미지를 클릭하거나 별도의 링크를 만들어 클릭하면 선생님께서 올려주신 한국차박물관 360VR 파노라마 - https://dalmoi.pe.kr/vr/bosung 처럼 보여지게 하고 싶은데, 이 방법을 잘 모르겠습니다.
그누보드 게시판에 360 VR 이미지를 첨부파일로 올린 뒤,
해당 첨부파일을 VR 뷰어로 "즉시 실행"시키는 방식은 기술적으로는 가능하지만,
일반적인 이미지 게시와는 달리 꽤 정교한 로직이 필요할 겁니다.
예시는 전문 P/G로 XML을 생성후, HTML/JS로 인덱스를 만들어 서비스하는 것입니다.
네이버 블로그는 360 VR 이미지를 자동 인식하여 회전형 뷰어로 표시해주지만,
그누보드는 기본적으로 해당 기능을 제공하지 않습니다.
그누보드에 사용자가 직접 pannellum.js 등과 뷰어를 연동하시면,
동일한 360도 VR을 구현하실 수 있겠죠~
네 감사합니다.
보내주신 링크보니까,
<iframe>
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://pannellum.org/images/alma.jpg"></iframe>
과
Standalone
https://cdn.pannellum.org/2.5/pannellum.htm#panorama=https://pannellum.org/images/alma.jpg
API
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
</script>
</body>
</html>
이렇게 핵심적인 코드가 보이는데,
이걸 그누보드 어떤 파일에 넣어야 될까요? <- 폴더권한, 파일권한 까지 다 줘도 마지막에 저 뷰어 페이지가 안나와서요 ㅠㅠ 제가 잘못 넣은건지;;