VR Maker SDK
  • Introduction
  • Initial page
  • Overview
  • Getting started
  • Methods
    • VR Viewer
  • API
Powered by GitBook
On this page

Last updated 6 years ago

Instructions

Installation

Choose or as your panorama viewer and include its script (it should be placed before vrmaker-sdk.js).

If you want to use Krpano as your viewer, you can use the free version with watermark to demo. Otherwise, you need to purchase a Krpano license.

Then import vrmaker by es6 in your project.

Or use include it in your project:

Finally, initialize the VRMaker object (don't forget do create a div with an id):

You can also hard-code the panorama Array. For example:

Result

Example

Live example

Clone and check it in examples / src folder.

panoramas: [{
  panoramaId: '1',
  panoramaName: 'a', 
  panoramaIndex: 0
  downloadLink: 'example.png',
  panoramaRotation: 0
}, {
  panoramaId: '2',
  // etc ...
}]
https://github.com/istagingRD/vrmaker-sdk
npm install

npm start

// You can also check webpack dev server
npm run dev
https://livetour.istaging.com/58217f61a22b9d0067e06d7c?ui=true
  • Instructions
  • Installation
  • Result
  • Example
  • Live example
PreviousOverviewNextMethods

Getting started

Krpano
A-frame
// purchase a KRPano license and use the paid version of the JS file in your project
<script type=text/javascript src="krpano.min.js"></script>
import VRViewer from 'vrviewer'
VR Maker SDK cdn 
<body>
  <div id="vrviewer"></div>
</body>

<script>
var vrviewer = new VRViewer()
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
    }
  }
})
</script>
<script src="https://www.istaging.com/sdk/vrviewer.js"></script>