1.0.2 • Published 3 years ago
vue-360vr v1.0.2
vue-360vr
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.
Warnings
You must use https to display XR content. If you use http you will only have cardboard display. More informations
Setup
Installing
Install the package
npm i vue-360vr --saveUsing
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" />API
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) |
LICENSE
MIT