├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── demo
├── getMaxTextureSize.js
├── index.html
├── index.js
├── pano_2048.jpg
├── pano_4096.jpg
├── pano_7000.jpg
└── screenshot.jpg
├── index.js
├── package-lock.json
└── package.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | presets: [ "es2015" ]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | *.log
4 | .DS_Store
5 | bundle.js
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | *.log
4 | .DS_Store
5 | bundle.js
6 | test
7 | test.js
8 | demo/
9 | .npmignore
10 | LICENSE.md
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Jam3
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy
5 | of this software and associated documentation files (the "Software"), to deal
6 | in the Software without restriction, including without limitation the rights
7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the Software is
9 | furnished to do so, subject to the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
20 | OR OTHER DEALINGS IN THE SOFTWARE.
21 |
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 360-image-viewer
2 |
3 | A standalone panorama WebGL image viewer for desktop and mobile. This uses [regl](https://www.npmjs.com/package/regl) as the WebGL wrapper, and comes in at a total of 140kb uglified, or 46kb gzipped. This is useful if you need a panorama viewer but don't want to embed all of ThreeJS (which is around 500kb uglified).
4 |
5 | ## Install
6 |
7 | ```sh
8 | npm install 360-image-viewer --save
9 | ```
10 |
11 | ## Live Demo
12 |
13 | Click [here](http://360-image-viewer-test.surge.sh/) to see a demo of this module in action. The source code is in [demo/index.js](./demo/index.js).
14 |
15 | [](http://360-image-viewer-test.surge.sh/)
16 |
17 | ## Example
18 |
19 | The code below sets up a full-screen 360 image viewer. For a more complete example, see [demo/index.js](./demo/index.js).
20 |
21 | ```js
22 | const create360Viewer = require('360-image-viewer');
23 | const canvasFit = require('canvas-fit');
24 |
25 | // load your image
26 | const image = new Image();
27 | image.src = 'panosphere.jpg';
28 |
29 | image.onload = () => {
30 | // when the image is loaded, setup the viewer
31 | const viewer = create360Viewer({
32 | image: image
33 | });
34 |
35 | // attach canvas to body
36 | document.body.appendChild(viewer.canvas);
37 |
38 | // setup fullscreen canvas sizing
39 | const fit = canvasFit(viewer.canvas, window, window.devicePixelRatio);
40 | window.addEventListener('resize', fit, false);
41 | fit();
42 |
43 | // start the render loop
44 | viewer.start();
45 | };
46 | ```
47 |
48 | ## Usage
49 |
50 | #### `viewer = create360Viewer([opt])`
51 |
52 | Creates and returns a new WebGL canvas viewer with the specified `opt` options object.
53 |
54 | Options:
55 |
56 | - `image` — the HTMLImageElement, if not specified it can be set later
57 | - `canvas` — a `