Vrviewer-sdk NPM

VR Viewer

VR Viewer SDK helps you creating a panorama easily on website.

Resource

Tutorial: https://medium.com/@istaging_RD/vrmaker-sdk-create-your-virtual-tour-c6b4d796da29

Document: https://evs-doc-test.istaging.com.cn

vreditor-sdk github: https://github.com/iStaging/vreditor-sdk

vrviewer-sdk github: https://github.com/iStaging/vrviewer-sdk

Getting Started

First, you need to sign up VR Maker SDK account by contact iStaging benjamin@staging.com.tw.
Then check your nodejs version, we recommend you use the version upper 8.5.0.

How to use

npm install vrviewer-sdk (or use yarn)

Run sample nodejs server, change the panoCollection id you have and start it, that's all.

ES6:

// Before use vreditor-sdk, you need to have threejs and krpano first.
// go to https://threejs.org/ and https://krpano.com/ to purchase krpano license.

// import vrviewer-sdk js, css.
import 'vrviewer-sdk'
import 'vrviewer-sdk/dist/vrviewer-sdk.css'

VRViewer.init({
  el: '#vrviewer-sdk',
  lang: 'zh-cn',
  panoCollection: fakePanoCollection,
  panoramas: fakePanoramas,
  setting: {
    autoRotateSetting: {
      active: true,
      revert: false,
      rotateDuration: 200000,
      restartTime: 20000
    },
    gyroSetting: {
      active: false
    },
    krpanoSetting: {
      mwheel: true,
      focus: false
    },
    tripodSetting: {
      image: 'https://www.istaging.com/sdk/logo-tripod.png',
      size: 60
    },
    hideUISetting: {
      hideCollectionInfo: false,
      hidePanoramaList: false,
      hideFloorplan: false,
      hideFullscreen: false,
      hideLoading: false,
      hideMarkerInfo: false
    },
    shareSetting: {
      shareUrl: 'https://www.istaging.com/'
    }
  }
})
...
// Everything is ready, enjoy.

Use static file by cdn:

<head>
  <link href="https://github.com/iStaging/vrviewer-sdk/blob/master/dist/vrviewer-sdk.css" rel="stylesheet"></link>
</head>

<body>
  <div id="vrviewer-sdk"></div>
  <!-- make sure you have threejs and krpano first. -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/71/three.js"></script>
  <script src="krpano.min.js"></script>
  <script src="https://github.com/iStaging/vrviewer-sdk/blob/master/dist/vrviewer-sdk.js"></script>

</body>

<script>
VRViewer.init({
  el: '#vrviewer-sdk',
  lang: 'zh-cn',
  panoCollection: panoCollection,
  setting: {
    autoRotateSetting: {
      active: true,
      revert: false,
      rotateDuration: 200000,
      restartTime: 20000
    },
    gyroSetting: {
      active: false
    },
    krpanoSetting: {
      mwheel: true,
      focus: false
    },
    tripodSetting: {
      image: 'https://www.istaging.com/sdk/logo-tripod.png',
      size: 60
    },
    hideUISetting: {
      hideCollectionInfo: false,
      hidePanoramaList: false,
      hideFloorplan: false,
      hideFullscreen: false,
      hideLoading: false,
      hideMarkerInfo: false
    },
    shareSetting: {
      shareUrl: 'https://www.istaging.com/'
    }
  }
})
</script>

VR Viewer SDK is easily bind with VR Editor SDK

iStaging VR Viewer is a WebVR solution for developers, you can fetch data from VR Editor, and import data into VR Viewer. Check out node sample server in the exmaples folder to explore what we do it.

npm start

If you want to fork VR Viewer, please go ahead!

VR Viewer is a RWD website, it's split up layout by 768px.

Structure of VR Viewer SDK

Src is our source code, you can modify anything you like. src/api put some useful js src/common is put some vue files, like components but it's specific for the project src/components is vue components, it can use not only vr viewer sdk project src/images put some images src/messages is for vue i18n src/mixins is for vue mixins src/pages is for vue router, but it's only index page with multiple split vue files src/store is vuex structure src/stylesheets is global stylus css

src/api/constants.js

src/api/helpers.js

src/api/prototype.js

src/api/resources.js

src/api/utils.js

src/common/Floorplan

src/common/Instructions

src/common/Krpano

src/common/PanoCollectionInfo

src/common/ViewerLayer

src/common/ViewerList

src/common/ViewerMarkersHover

src/components/Icon/index.vue

src/components/Popup/index.vue

src/components/SvgIcon/index.vue

src/components/IProgress.vue

src/components/IRepeat.vue

src/components/QrCode.vue

src/pages/IHeader.vue

src/pages/IFooter.vue

src/pages/IAside.vue

src/pages/IMain.vue

Most of the important components are put here. There has the core of VR display area - krpano. And yet, there has hovered marker info, clicked marker info, share layer, panoramas list, floor plan, instructions (for iOS) and popup.

src/pages/INav.vue

You can depends on what button you want to add, in small layout menu and in large layout menu. Find it out in the file, there's three menu list in computed object: navMobileOuterList, navMobileInnerList and navPcList. Apparently the naming of these menu list is 2 for mobile view, 1 for desktop view, just add some code like this before the value return:

After you finished modifying, you can run npm run build, then your result will built in dist files! Examples folder is for building your site, but maybe you have no idea how to import the VR viewer SDK. Now you have a great build example in examples folder.