# spherical-image

> Very lightweight 360deg spherical image viewer

Latest version **0.2.0** (published 2019-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install spherical-image
pnpm add spherical-image
yarn add spherical-image
bun add spherical-image
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-07-03 |
| First published | 2019-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 454.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Yomotsu |
| Maintainers | yomotsu |
| Keywords | webgl, 360, spherical, panorama |

## Links

- npm: https://www.npmjs.com/package/spherical-image
- Repository: https://github.com/yomotsu/spherical-image
- Homepage: https://github.com/yomotsu/spherical-image#readme
- Issues: https://github.com/yomotsu/spherical-image/issues
- npm.io page: https://npm.io/package/spherical-image

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2019-07-03
- 0.1.0 — 2019-03-11
- 0.0.1 — 2019-03-02

## README

# spherical-image

Very lightweight 360deg spherical image viewer

[![Latest NPM release](https://img.shields.io/npm/v/spherical-image.svg)](https://www.npmjs.com/package/spherical-image)
![MIT License](https://img.shields.io/npm/l/spherical-image.svg)

## Demos

- [basic](https://yomotsu.github.io/spherical-image/examples/index.html)

## Usage

```shell
$ npm install --save spherical-image
```

then
```html
<canvas id="myCanvas" width="800" height="600"></canvas>
```

```javascript
import SphericalImage from 'spherical-image';

new SphericalImage(
  document.getElementById( 'myCanvas' ),
  './img.jpg'
);
```

or

```html
<script src="./js/spherical-image.js"></script>
```

```javascript
const sphericalImage = new SphericalImage(
  document.getElementById( 'myCanvas' ),
  './img.jpg'
);
```

## Options

The third argument is options.

```js
const sphericalImage = new SphericalImage(
  document.getElementById( 'myCanvas' ),
  './img.jpg',
  options
);
```

- `options.offsetAzimuth`: default horizontal rotation in radian. default is `0`
- `options.offsetAltitude`: default vertical rotation in radian. default is `0`


## Methods

- `.reset()`: reset view rotation.
- `.setSize( width, height )`: set canvas size.
- `.destroy()`: destroy the instance. dispose WebGL. detach all events.

---
_Source: https://npm.io/package/spherical-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._