Giter Club home page Giter Club logo

pano's Introduction

Pano.js

Build Status License NPM version Code Style NPM downloads

Add multiple Panolens.js 360-panoramic viewers to a page with ease.

Installation

You can either install via npm and include the scripts in your build process, or use a CDN.

  • Using npm packages

    Install dependencies

    # with yarn
    yarn add pano
    
    # with npm
    npm install --save pano

    Import Pano

    import * as Pano from 'pano'
  • Using the CDN

    Include scripts via CDN by adding them to your index.html:

    <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-vendor-v3.0.0.min.js"></script>
    <script type="text/javascript" src="//sinanbolel.firebaseapp.com/cdn/pano-v3.0.0.min.js"></script>

Usage

  1. Instantiate Pano.Page object

    /** ES6 */
    import { Page } from 'pano'
    const panoPage = new Page('pano')
    panoPage.init()
    
    /** ES5 */
    var Pano = require('pano')
    var panoPage = new Pano.Page('pano')
    panoPage.init()
  2. Add <pano> elemement HTML

    Include the required width, height, src, caption (optional) attributes for the <pano> element(s) in your view:

    <pano width="1024" height="512" src="https://sbolel.github.io/pano/img/588ca1b0bf_o.jpg" caption="Equirectangular Panorama"/></pano>
  3. Initialize all <pano> elements on the page

    var panoPage = new Pano.Page('pano')
    panoPage.init()

Credits

  • prescottprue - Webpack implementation, tests, coverage
  • pchen66 - Original Panolens.js implementation

pano's People

Contributors

dependabot[bot] avatar prescottprue avatar sbolel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

pano's Issues

lib not found in npm

The library at the time of use generates the error:
Uncaught ReferenceError: PANOLENS is not defined.

this demo can not run??

`

<title>Pano</title>

<script type="text/javascript" src="node_modules/panolens.js/panolens.min.js"></script>
<script type="text/javascript" src="node_modules/pano/dist/pano.min.js"></script>
<!-- CDN available -->
<!-- <script src="http://cdn.sinanbolel.com/js/pano/pano.js"></script> -->

<script type="text/javascript"> var panoPage = new Pano.Page('pano'); panoPage.init(); </script> `

this demo can not run??

WebGL error (if WebGL is disabled)

Current Behavior

  • if WebGL is not supported or WebGL extension is not allowed, Panolens fails silently
  • pano elements do not render

Console:

panolens.min.js:11 THREE.WebGLRenderer: Error creating WebGL context.

panolens.min.js:12 Uncaught TypeError: Cannot read property 'getExtension' of null
    at THREE.WebGLExtensions.get (panolens.min.js:12)
    at new THREE.WebGLRenderer (panolens.min.js:11)
    at new PANOLENS.Viewer (panolens.min.js:19)
    at new t (pano.min.js:2)
    at new t (pano.min.js:2)
    at localhost/:56

Expected Behavior

  • user should see an error notifying that WebGL is not supported

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.