Package Exports

ngx-view360

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-view360) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgxView360

This library was generated with Angular CLI version 8.2.14.

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.

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.
rightController(optional)	gltf file containing right controller 3D model
leftController(optional)	gltf file containing left controller 3D model
customButtonStyle(optional)	object to customize vr button
customCanvasStyle(optional)	object to customize canvas dimensions

The property 'customButtonStyle' has this structure:

interface ButtonOptionStyle {
    color?: string;
    height?: number;
    corners?: any;
    backColor?: string;
    textEnterXRTitle?: string;
    textXRNotFoundTitle?: string;
    textExitXRTitle?: 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
textEnterXRTitle(optional)	Text showing when support for VR
textXRNotFoundTitle(optional)	Text showing when no support for VR
textExitXRTitle(optional)	Text showing when quiting vr experience (case with device associated with computer)

The property 'customButtonStyle' has this structure:

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

Attributes	description
height(optional)	height of the canvas.
width(optional)	width of the canvas

NB: To show controllers, you need to give the 3D model for each controller, you need to take in account handedness.

LICENSE

MIT