ngx-view360 v2.2.7

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

Changelog

see file

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.

The property 'customButtonStyle' has this structure:

interface ButtonOptionStyle {
    color?: string;
    height?: number;
    corners?: any;
    backColor?: string;
}

The property 'customCanvasStyle' has this structure:

interface CanvasOptionStyle {
    height?: string;
    width?: string;
}

LICENSE

MIT