VR Viewer SDK helps you creating a panorama easily on website.
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
-
First, you need to sign up VR Maker SDK account by contact iStaging mailto:benjamin@staging.com.tw.
-
Then check your nodejs version, we recommend you use the version upper 8.5.0.
npm install vrviewer-sdk (or use yarn)Run sample nodejs server, change the panoCollection id you have and start it, that's all.
// 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.<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>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 startVR Viewer is a RWD website, it's split up layout by 768px.
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
- Some default value are put over here
- Some functions for this project
- Just prevent IE break in some functions
- Online resources hosted in iStaging website
- Some functions for global use
- Floorplan component here
- For blocking portrait iOS in VR mode
- The core of VR
- Collection avatar and name
- It will show up in the center of the VR Viewer SDK, it is used by marker info, share, information
- Panoramas list
- Hovered markers use this component
- All icon use this component, but you need to add image by yourself
- This is used for clicked marker popup
- This is used for icons, but can change its color
- While loading each panorama, it will appear
- Just a repeater
- QR code
- Component IRepeat use filterBy
- Get/set some state in the vuex framework
- Collection info is placed here.
- Powered by iStaging
- Including INav component and close full screen or VR mode button
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.
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.