{"_id":"360-image-viewer","_rev":"2-b36e8856900d51ba7d5ee0d3e6244f15","name":"360-image-viewer","description":"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 ","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"360-image-viewer","version":"1.0.0","description":"Experiments with `regl`, see the demo here:","main":"index.js","license":"MIT","author":{"name":"Matt DesLauriers","email":"dave.des@gmail.com","url":"https://github.com/mattdesl"},"dependencies":{"defined":"^1.0.0","object-assign":"^4.1.1","orbit-controls":"^1.1.3","perspective-camera":"^2.0.1","primitive-sphere":"^3.0.0","raf-loop":"^1.1.3","regl":"^1.3.0"},"devDependencies":{"babel-preset-es2015":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","budo":"^10.0.3","drag-drop":"^2.13.2","get-canvas-context":"^1.0.2","surge":"^0.19.0","uglify-js":"^3.0.15"},"scripts":{"test":"node test.js","deploy:upload":"surge -p demo -d 360-image-viewer-test.surge.sh","deploy":"npm run build && npm run deploy:upload","start":"budo demo/index.js:bundle.js --dir demo --live -- -t babelify","build":"browserify demo/index.js -t babelify | uglifyjs -m -c warnings=false > demo/bundle.js"},"keywords":[],"repository":{"type":"git","url":"git://github.com/Jam3/360-image-viewer.git"},"homepage":"https://github.com/Jam3/360-image-viewer","bugs":{"url":"https://github.com/Jam3/360-image-viewer/issues"},"gitHead":"1921b7dd29c8ccced1ba44b88d308c07449e81c5","_id":"360-image-viewer@1.0.0","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"mattdesl","email":"dave.des@gmail.com"},"dist":{"integrity":"sha512-LSVVktK3Iaewg8Td5tVtdHg2iYiGD5EWrhTE6J8Mjrb+cGcbb5H4vrtnWvQPwYVGsE0LB8+H8d7Ow4IXRE62vg==","shasum":"b7c58aa80aadde2f8cb0629223b6ef7088e96d0a","tarball":"https://registry.npmjs.org/360-image-viewer/-/360-image-viewer-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5cmLGFHj+z3rVEF39u6DAF5aVTGj/7OEq3g+PUsrV7QIgbH6CCovvVkw7bU3oxXHTsQgl2U2/hCPN9UdqWwrTT+I="}]},"maintainers":[{"name":"mattdesl","email":"dave.des@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/360-image-viewer-1.0.0.tgz_1501859585362_0.4955671294592321"}},"1.0.1":{"name":"360-image-viewer","version":"1.0.1","description":"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 ","main":"index.js","license":"MIT","author":{"name":"Matt DesLauriers","email":"dave.des@gmail.com","url":"https://github.com/mattdesl"},"dependencies":{"defined":"^1.0.0","object-assign":"^4.1.1","orbit-controls":"^1.2.0","perspective-camera":"^2.0.1","primitive-sphere":"^3.0.0","raf-loop":"^1.1.3","regl":"^1.3.0"},"devDependencies":{"babel-preset-es2015":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","budo":"^10.0.3","drag-drop":"^2.13.2","get-canvas-context":"^1.0.2","surge":"^0.19.0","uglify-js":"^3.0.15"},"scripts":{"test":"node test.js","deploy:upload":"surge -p demo -d 360-image-viewer-test.surge.sh","deploy":"npm run build && npm run deploy:upload","start":"budo demo/index.js:bundle.js --dir demo --live -- -t babelify","build":"browserify demo/index.js -t babelify | uglifyjs -m -c warnings=false > demo/bundle.js"},"keywords":[],"repository":{"type":"git","url":"git://github.com/Jam3/360-image-viewer.git"},"homepage":"https://github.com/Jam3/360-image-viewer","bugs":{"url":"https://github.com/Jam3/360-image-viewer/issues"},"gitHead":"37fd48687b6b3f016b894a713085411ebfd07500","_id":"360-image-viewer@1.0.1","_npmVersion":"5.0.0","_nodeVersion":"8.0.0","_npmUser":{"name":"mattdesl","email":"dave.des@gmail.com"},"dist":{"integrity":"sha512-ywIH6y/r2tddUUSTahi4RWBowXPp7eOQQXyrDSIAov9wrT9O92rSh5/Wz4d+DJUw81pjDFVhbbwwWEnF+Fj9jQ==","shasum":"81ac3b1048ebd32196a1e1337efe76bb8520b723","tarball":"https://registry.npmjs.org/360-image-viewer/-/360-image-viewer-1.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfzkNfYK/dcFIu8F4wzAbkdnZtSlWGuaEYUm9Y+Pc4dAiEArH7dtIu8u1v/04IXC4ZtESLnBumoS2+1EbtFYZs1gOU="}]},"maintainers":[{"name":"mattdesl","email":"dave.des@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/360-image-viewer-1.0.1.tgz_1501863091222_0.16742022312246263"}}},"readme":"# 360-image-viewer\n\nA 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).\n\n## Install\n\n```sh\nnpm install 360-image-viewer --save\n```\n\n## Live Demo\n\nClick [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).\n\n[<img src=\"demo/screenshot.jpg\" width=\"75%\" />](http://360-image-viewer-test.surge.sh/)\n\n## Example\n\nThe code below sets up a full-screen 360 image viewer. For a more complete example, see [demo/index.js](./demo/index.js).\n\n```js\nconst create360Viewer = require('360-image-viewer');\nconst canvasFit = require('canvas-fit');\n\n// load your image\nconst image = new Image();\nimage.src = 'panosphere.jpg';\n\nimage.onload = () => {\n  // when the image is loaded, setup the viewer\n  const viewer = create360Viewer({\n    image: image\n  });\n\n  // attach canvas to body\n  document.body.appendChild(viewer.canvas);\n\n  // setup fullscreen canvas sizing\n  const fit = canvasFit(viewer.canvas, window, window.devicePixelRatio);\n  window.addEventListener('resize', fit, false);\n  fit();\n\n  // start the render loop\n  viewer.start();\n};\n```\n\n## Usage\n\n#### `viewer = create360Viewer([opt])`\n\nCreates and returns a new WebGL canvas viewer with the specified `opt` options object.\n\nOptions:\n\n- `image` — the HTMLImageElement, if not specified it can be set later\n- `canvas` —  a `<canvas>` tag to use, otherwise creates a new one\n- `fov` — a field of view, in radians, defaults to 45 degrees\n- `rotateSpeed` — a scalar for the drag rotation speed, default 0.15\n- `damping` — a scalar for damping/spring, default 0.275\n- `clearColor` — a RGBA clear color, default `[ 0, 0, 0, 0 ]` (ie. transparent)\n\nYou can also pass [orbit-controls](https://github.com/Jam3/orbit-controls) options, for example `phi` as the initial rotation, or passing `{ rotate: fale }` to ignore mouse/touch rotation.\n\nThe `image` should be a DOM Image or Video element, and should already be loaded.\n\n#### `viewer.start()`\n\nStart the requestAnimationFrame render loop.\n\n#### `viewer.stop()`\n\nStop the requestAnimationFrame render loop.\n\n#### `viewer.render()`\n\nRender a single frame. This may be useful if, say, you change the canvas size when the requestAnimationFrame is not running.\n\n#### `viewer.enableControls()`\n\nEnable the input controls, attaching mouse/touch events to the canvas. Has no effect if the controls are already enabled.\n\n#### `viewer.disableControls()`\n\nDisable the input controls, detaching mouse/touch events from the canvas. Has no effect if the controls are already disabled.\n\n#### `viewer.texture(image)`\n\nChanges the current image to the specified DOM `image`. This can be an image, video, or an options object for [regl#texture()](https://github.com/regl-project/regl/blob/gh-pages/API.md#textures). By default, `min` and `mag` filter will use `'linear'` for smoother filtering.\n\n#### `viewer.destroy()`\n\nStop the render loop, disable the input controls, and destroy the WebGL context. The viewer will no longer be usable after this point.\n\n#### `viewer.canvas`\n\nThe canvas the viewer will render into.\n\n#### `viewer.fov`\n\nThe current field of view of the perspective camera in radians. Can be altered at run-time.\n\n#### `viewer.phi`\n\nThe current horizontal rotation angle in radians.\n\n#### `viewer.theta`\n\nThe current vertical rotation angle in radians.\n\n#### `viewer.on('tick', fn)`\n\nAttach a frame listener to the viewer, where `fn` accepts the `dt` (delta time) parameter per frame. You can remove this with `viewer.removeListener('tick', fn)`.\n\n## License\n\nMIT, see [LICENSE.md](http://github.com/Jam3/360-image-viewer/blob/master/LICENSE.md) for details.\n","maintainers":[{"name":"mattdesl","email":"dave.des@gmail.com"}],"time":{"modified":"2022-04-04T10:20:27.992Z","created":"2017-08-04T15:13:06.188Z","1.0.0":"2017-08-04T15:13:06.188Z","1.0.1":"2017-08-04T16:11:32.129Z"},"homepage":"https://github.com/Jam3/360-image-viewer","keywords":[],"repository":{"type":"git","url":"git://github.com/Jam3/360-image-viewer.git"},"author":{"name":"Matt DesLauriers","email":"dave.des@gmail.com","url":"https://github.com/mattdesl"},"bugs":{"url":"https://github.com/Jam3/360-image-viewer/issues"},"license":"MIT","readmeFilename":"README.md"}