ngx-view360
v2.2.7
Published
An API to use 360 view in VR with Angular framework
Downloads
178
Maintainers
Readme
NgxView360
NgxView360 let you use 360 photo viewer in VR using Angular 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.
This library was generated with Angular CLI.
Warnings
You must use https to display XR content. If you use http you will only have cardboard display. More informations
Versions
NgxView360 | Angular ------------ | ------------- 2.0.0 | 8 2.1.0 + | 9-12 2.2.1 | 13 2.2.6 | 14-15 2.2.7 | 16 +
Changelog
Setup
Installing
First, you will need to add the webxr polyfill. Some browsers don't have develop in production the WEBXR API. You will need also to install gl-matrix package to calculate webgl matrix.
npm i webxr-polyfill --save
npm i gl-matrix --save
Then append these lines on polyfills.ts:
import WebXRPolyfill from 'webxr-polyfill';
let polyfill = new WebXRPolyfill();
Now, you can add the library:
npm i ngx-view360 --save
Using
Import NgxView360Module on AppModule.
import { NgxView360Module } from 'ngx-view360';
@NgModule({...
imports: [...,
NgxView360Module
...],
})
Then, you can use the component in template:
<ngx-view360 imageSrc="path/to/image"></ngx-view360>
API
The NgxView360Component has some attributes to display the view.
Attributes | description ------------ | ------------- imageSrc | 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. customButtonStyle(optional) | object to customize vr button customCanvasStyle(optional) | object to customize canvas dimensions showVRButton(optional) | boolean to show VR button (default value: true)
The property 'customButtonStyle' has this structure:
interface ButtonOptionStyle {
color?: string;
height?: number;
corners?: any;
backColor?: string;
}
Attributes | description ------------ | ------------- color(optional) | color of texts and logos and borders height(optional) | height of the button (px). corners(optional) | 'square' or 'round' or any number representing border-radius (px) backColor(optional) | background color of vr button
The property 'customCanvasStyle' has this structure:
interface CanvasOptionStyle {
height?: string;
width?: string;
}
Attributes | description ------------ | ------------- height(optional) | height of the canvas. width(optional) | width of the canvas
LICENSE
MIT