vue-360vr let you use 360 photo viewer in VR using VueJs technology. This library adapt one of the samples from WebXR Sample. A great thanks to The Immersive Web Community Group.
If VR is not supported, a magic window is enabled.
You must use https to display XR content. If you use http you will only have cardboard display. More informations
Install the package
npm i vue-360vr --save
In the parent component import the component:
import Vr360 from "vue-360vr";
export default {
name: "app",
components: {
Vr360
}
};Last but not least, in the template:
<Vr360 imgSrc="path/to/image" />
The Vr360 component has some attributes to display the view.
| Attributes | description |
|---|---|
| imgSrc | source of the image to display, need to be a equirectangular image (jpg or png accepted) |
| displayMode(optional) | Mode to display image ('mono', 'stereoTopBottom','stereoLeftRight'). 'mono' is the default mode. |
| customCanvasDimensions(optional) | object to customize canvas dimensions |
| showVRButton(optional) | boolean to show VR button (default value: true) |
The property 'customCanvasDimensions' is Javascript object :
| Attributes | Description |
|---|---|
| height(optional) | height of the canvas (vh). |
| width(optional) | width of the canvas (vw) |
MIT