GithubHelp home page GithubHelp logo

inier / 360-image-viewer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from experience-monks/360-image-viewer

0.0 2.0 0.0 9.73 MB

A standalone panorama viewer with WebGL

Home Page: http://360-image-viewer-test.surge.sh/

License: MIT License

JavaScript 100.00%

360-image-viewer's Introduction

360-image-viewer

A standalone panorama WebGL image viewer for desktop and mobile. This uses 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).

Install

npm install 360-image-viewer --save

Live Demo

Click here to see a demo of this module in action. The source code is in demo/index.js.

Example

The code below sets up a full-screen 360 image viewer. For a more complete example, see demo/index.js.

const create360Viewer = require('360-image-viewer');
const canvasFit = require('canvas-fit');

// load your image
const image = new Image();
image.src = 'panosphere.jpg';

image.onload = () => {
  // when the image is loaded, setup the viewer
  const viewer = create360Viewer({
    image: image
  });

  // attach canvas to body
  document.body.appendChild(viewer.canvas);

  // setup fullscreen canvas sizing
  const fit = canvasFit(viewer.canvas, window, window.devicePixelRatio);
  window.addEventListener('resize', fit, false);
  fit();

  // start the render loop
  viewer.start();
};

Usage

viewer = create360Viewer([opt])

Creates and returns a new WebGL canvas viewer with the specified opt options object.

Options:

  • image — the HTMLImageElement, if not specified it can be set later
  • canvas — a <canvas> tag to use, otherwise creates a new one
  • fov — a field of view, in radians, defaults to 45 degrees
  • rotateSpeed — a scalar for the drag rotation speed, default 0.15
  • damping — a scalar for damping/spring, default 0.275
  • clearColor — a RGBA clear color, default [ 0, 0, 0, 0 ] (ie. transparent)

You can also pass orbit-controls options, for example phi as the initial rotation, or passing { rotate: fale } to ignore mouse/touch rotation.

The image should be a DOM Image or Video element, and should already be loaded.

viewer.start()

Start the requestAnimationFrame render loop.

viewer.stop()

Stop the requestAnimationFrame render loop.

viewer.render()

Render a single frame. This may be useful if, say, you change the canvas size when the requestAnimationFrame is not running.

viewer.enableControls()

Enable the input controls, attaching mouse/touch events to the canvas. Has no effect if the controls are already enabled.

viewer.disableControls()

Disable the input controls, detaching mouse/touch events from the canvas. Has no effect if the controls are already disabled.

viewer.texture(image)

Changes the current image to the specified DOM image. This can be an image, video, or an options object for regl#texture(). By default, min and mag filter will use 'linear' for smoother filtering.

viewer.destroy()

Stop the render loop, disable the input controls, and destroy the WebGL context. The viewer will no longer be usable after this point.

viewer.canvas

The canvas the viewer will render into.

viewer.fov

The current field of view of the perspective camera in radians. Can be altered at run-time.

viewer.phi

The current horizontal rotation angle in radians.

viewer.theta

The current vertical rotation angle in radians.

viewer.on('tick', fn)

Attach 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).

License

MIT, see LICENSE.md for details.

360-image-viewer's People

Contributors

mattdesl avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.