pr

pannellum-react

React Component for Pannellum (open source panorama viewer for the web)

Showing:

Popularity

Downloads/wk

2.7K

GitHub Stars

56

Maintenance

Last Commit

2yrs ago

Contributors

7

Package

Dependencies

1

Size (min+gzip)

11.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

pannellum-react

Travis npm package

React Component library for the Pannellum project.

Special thanks to Matthew Petroff

Install and Import

Install pannellum-react component

npm install pannellum-react --save

Import pannellum-react in your react component file by

import { Pannellum, PannellumVideo } from "pannellum-react";

Note: Currently only equirectangular type is supported! planning to do also multires

Note: Tours component currently is not supported but is WIP. Note: For having video tours, there is the custum hotspot which can implement the video scene changing using handleClick. In fact in can be the tour for videos and photos. Note: You can also create your tour with custom hotspot, by changing the image dynamically. Note: If you manage the props by state, you can update the component smoothly (example: updating yaw, pitch or hfov won't re-render the image and it will dynamically update)

Demo

https://farminf.github.io/pannellum-react/

you can also use codesandbox playground

Edit q27rq5p6

Simple Example

import React, { Component } from 'react';
import { render } from 'react-dom';

import { Pannellum, PannellumVideo } from "pannellum-react";
import myImage from "./images/alma.jpg";
import myVideo from "./images/video.mp4";


const PannellumReact = () => (
  <div>
    <h1>Pannellum React Component</h>
    <Pannellum
        width="100%"
        height="500px"
        image={myImage}
        pitch={10}
        yaw={180}
        hfov={110}
        autoLoad
        onLoad={() => {
            console.log("panorama loaded");
        }}
    >
      <Pannellum.Hotspot
        type="info"
        pitch={11}
        yaw={-167}
        text="Info Hotspot Text 3"
        URL="https://github.com/farminf/pannellum-react"
      />

      <Pannellum.Hotspot
        type="info"
        pitch={31}
        yaw={-107}
        text="Info Hotspot Text 4"
        URL="https://github.com/farminf/pannellum-react"
      />
    </Pannellum>

    {/******  for video 360 component *******/}

    <PannellumVideo
      video={myVideo}
      loop
      width="100%"
      height="600px"
      pitch={10}
      yaw={180}
      hfov={140}
      minHfov={50}
      maxHfov={180}
    >
      <Pannellum.Hotspot
        type="custom"
        pitch={31}
        yaw={150}
        handleClick={(evt , name) => this.hanldeClick(name)}
        name="hs1"
      />

      <Pannellum.Hotspot
        type="info"
        pitch={31}
        yaw={-57}
        text="Info"
        URL="https://github.com/farminf"
      />
    </PannellumVideo>

    </div>
);

export default PannellumReact;

API

pannellum-react has most of the official pannellum properties (not all of them). It just needed to be passed as props of the pannellum component like example above.on

Props API

NameTypeDefaultDescription
idStringUnique Generated StringIf you pass it, it will use it for div id, if not it would be unique string for each component
widthString"100%"The width of the panorama div
heightString"400px"The height of the panorama div
imageString""The 360 image path
haovNumber360Initial horizontal angle of view
vaovNumber180Initial vertical angle of view
vOffsectNumber0Initial vertical offset angle
yawNumber0Starting yaw position in degrees
pitchNumber0Starting pitch position in degrees
hfovNumber100Starting horizontal field of view in degrees
maxHfovNumber150Maximum field of view which user can zoom (in degrees)
minHfovNumber50Minimum field of view which user can zoom (in degrees)
maxPitchNumber90Maximum field of view pitch (in degrees)
minPitchNumber-90Minimum field of view pitch (in degrees)
maxYawNumber180Maximum field of view yaw (in degrees)
minYawNumber-180Minimum field of view yaw (in degrees)
autoRotateNumber0rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise.
compassBooleanfalseShowing compass if true
titleString""Displays as the panorama’s title
authorString""Displays as the panorama’s author
previewString""Preview image path to display
previewTitleString""Preview title to display
previewAuthorString""Preview Author to display
autoLoadBooleanfalseLoad and dsplay the image automatically if true
orientationOnByDefaultBooleanfalseIf true Device orientation will work if device supported
showZoomCtrlBooleantrueThe zoom control display on the image
keyboardZoomBooleantrueEnables zoom control from keyboard if true
disableKeyboardCtrlBooleanfalseDisables control from keyboard if true
mouseZoomBooleantrueEnables zoom control with mouse if true
draggableBooleantrueIf false, mouse and touch dragging is disabled
showFullscreenCtrlBooleantrueFullScreen control display
showControlsBooleantrueif False, no control displays
onLoadFunctionCallback function which fires after loading
onRenderFunctionCallback function which fires after each render, helpful if you need to react to yaw/pitch/roll/zoom changes
onErrorFunctionCallback function which fires after error
onErrorclearedFunctionCallback function which calls after clearing the error
onMousedownFunctionCallback function which calls after mouse button press
onMouseupFunctionCallback function which calls after mouse button release
onTouchstartFunctionCallback function which calls after touch starts
onTouchendFunctionCallback function which calls after touch ends
hotspotDebugBooleanfalseFor debug pupose (finding correct point for hotspot)

Additionally, by Getting refrence of the component, you can get the pannellum Viewer calling getViewer() which gives all the available functions of the viewer such as getPitch, setPitch , getyaw and etc. find here

Moreover, you can force render the component using forceRender() in case if you change a prop and didn't change constantly.(example would be hotspot: if you want to update hotspot dynamically, better to call forceRender after updating the hotspots)

example this.PanImage.current.getViewer().getPitch(), PanImage is ref of the component.

This is working also for the video component


HotSpot API

Info

NameTypeDefaultDescription
typeStringinfoyou should pass it
pitchNumber0the pitch for hotspot
yawNumber0the yaw for hotspot
textString""on mouse over hotspot shows the text box
URLString""onClick of hotspot opens on new page

Custom

NameTypeDefaultDescription
typeStringcustomyou should pass it
pitchNumber0the pitch for hotspot
yawNumber0the yaw for hotspot
tooltipFunctionsee demo(createTooltipFunc) the function pass div element and you can append any shape or html or ...
tooltipArgObject{}(createTooltipArgs) will be passed to handleClick
handleClickFunctionlogging the handleClickArg(clickHandlerFunc) fires onclick of hotspot
handleClickArgObject{}(clickHandlerArgs) will be passed to handleClick
cssClassStringtooltipcssString is used as the CSS class for the hotspot

Video API

these are videojs configuration properties which can be used

NameTypeDefaultDescription
videoString" "Path to your 360 video
loopBooleanfalseLooping over video
autoplayBooleantruePlay the video as page loaded
controlsBooleanfalseshowing controls under
mutedBooleantruemaking video mute

in addition there are also pannellum properties(panorama) which works on video

NameTypeDefaultDescription
widthString"100%"The width of the panorama div
heightString"400px"The height of the panorama div
videoString""The 360 video path
yawNumber0Starting yaw position in degrees
pitchNumber0Starting pitch position in degrees
hfovNumber100Starting horizontal field of view in degrees
maxHfovNumber150Maximum field of view which user can zoom (in degrees)
minHfovNumber50Minimum field of view which user can zoom (in degrees)
maxPitchNumber90Maximum field of view pitch (in degrees)
minPitchNumber-90Minimum field of view pitch (in degrees)
maxYawNumber180Maximum field of view yaw (in degrees)
minYawNumber-180Minimum field of view yaw (in degrees)
autoRotateNumber0rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise.
mouseZoomBooleantrueEnables zoom control with mouse if true
hotspotDebugBooleanfalseFor debug pupose (finding correct point for hotspot)

if you are using chrome, try to keep muted true for autoplay.


Example with all the available props

<Pannellum
  width="100%"
  height="500px"
  image={myImage}
  haov={180}
  vaov={90}
  vOffset={1}
  pitch={10}
  yaw={180}
  hfov={110}
  maxHfov={170}
  minHfov={30}
  autoLoad
  author=""
  title=""
  orientationOnByDefault={false}
  compass
  draggable
  keyboardZoom
  mouseZoom
  preview=""
  previewAuthor=""
  previewTitle=""
  showControls
  showFullscreenCtrl
  showZoomCtrl
  hotspotDebug={false}
  onLoad={() => {
    console.log("panorama loaded");
  }}
  onError={err => {
    console.log("Error", err);
  }}
  onErrorcleared={() => {
    console.log("Error Cleared");
  }}
  onMousedown={evt => {
    console.log("Mouse Down", evt);
  }}
  onMouseup={evt => {
    console.log("Mouse Up", evt);
  }}
  onTouchstart={evt => {
    console.log("Touch Start", evt);
  }}
  onTouchend={evt => {
    console.log("Touch End", evt);
  }}
>
  <Pannellum.Hotspot
    type="info"
    pitch={11}
    yaw={-167}
    text="Info Hotspot Text"
    URL="https://github.com/farminf"
  />

  <Pannellum.Hotspot
    type="custom"
    pitch={31}
    yaw={150}
    handleClick={(evt , args) => console.log(args.name)}
    handleClickArg={{ "name":"test" }}
    {/* there are 3 other props. see the custom hotspot doc above*/}
  />

</Pannellum>

License

pannellum-react is released under the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100