그냥 개발자 블로그

[워크식스] 사이버 모델하우스에 이용하면 좋은 VR(3D) 웹뷰어 본문

IT소식&팁

[워크식스] 사이버 모델하우스에 이용하면 좋은 VR(3D) 웹뷰어

마음이파파 2018. 8. 19. 09:45




사이버 모델하우스를 통해서 현장에 가지 않고도 많은 것을 볼 수 있습니다. 파노라마를 촬영하여 구현하면 더욱 신뢰감 가는 홈페이지를 만들수 있을것 입니다.

이를 도와주는  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
'IT소식&팁' Related Articles more