pannellum-react

React Component library for the Pannellum project.

Special thanks to Matthew Petroff

Currently there are some problem with React V18

Install and Import

Install pannellum-react component

npm install pannellum-react --save

or

yarn add pannellum-react

Import pannellum-react in your react component file by

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

Note: By using import Pannellum from "pannellum-react/es/elements/Pannellum" the video.js component will be skipped, which decreases the production build by more than 500kb.

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)

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/goldest-star/pannellum-react"
      />

      <Pannellum.Hotspot
        type="info"
        pitch={31}
        yaw={-107}
        text="Info Hotspot Text 4"
        URL="https://github.com/goldest-star/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/goldest-star"
      />
    </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

Name	Type	Default	Description
id	String	Unique Generated String	If you pass it, it will use it for div id, if not it would be unique string for each component
width	String	"100%"	The width of the panorama div
height	String	"400px"	The height of the panorama div
image	String	""	The 360 image path
haov	Number	360	Initial horizontal angle of view
vaov	Number	180	Initial vertical angle of view
vOffsect	Number	0	Initial vertical offset angle
yaw	Number	0	Starting yaw position in degrees
pitch	Number	0	Starting pitch position in degrees
hfov	Number	100	Starting horizontal field of view in degrees
maxHfov	Number	150	Maximum field of view which user can zoom (in degrees)
minHfov	Number	50	Minimum field of view which user can zoom (in degrees)
maxPitch	Number	90	Maximum field of view pitch (in degrees)
minPitch	Number	-90	Minimum field of view pitch (in degrees)
maxYaw	Number	180	Maximum field of view yaw (in degrees)
minYaw	Number	-180	Minimum field of view yaw (in degrees)
autoRotate	Number	0	rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise.
compass	Boolean	false	Showing compass if true
title	String	""	Displays as the panorama’s title
author	String	""	Displays as the panorama’s author
preview	String	""	Preview image path to display
previewTitle	String	""	Preview title to display
previewAuthor	String	""	Preview Author to display
autoLoad	Boolean	false	Load and dsplay the image automatically if true
orientationOnByDefault	Boolean	false	If true Device orientation will work if device supported
showZoomCtrl	Boolean	true	The zoom control display on the image
keyboardZoom	Boolean	true	Enables zoom control from keyboard if true
disableKeyboardCtrl	Boolean	false	Disables control from keyboard if true
mouseZoom	Boolean	true	Enables zoom control with mouse if true
draggable	Boolean	true	If false, mouse and touch dragging is disabled
showFullscreenCtrl	Boolean	true	FullScreen control display
showControls	Boolean	true	if False, no control displays
onLoad	Function		Callback function which fires after loading
onRender	Function		Callback function which fires after each render, helpful if you need to react to yaw/pitch/roll/zoom changes
onError	Function		Callback function which fires after error
onErrorcleared	Function		Callback function which calls after clearing the error
onMousedown	Function		Callback function which calls after mouse button press
onMouseup	Function		Callback function which calls after mouse button release
onTouchstart	Function		Callback function which calls after touch starts
onTouchend	Function		Callback function which calls after touch ends
hotspotDebug	Boolean	false	For debug pupose (finding correct point for hotspot)
doubleClickZoom	Boolean	true	Zoom if you double click

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

Name	Type	Default	Description
type	String	info	you should pass it
pitch	Number	0	the pitch for hotspot
yaw	Number	0	the yaw for hotspot
text	String	""	on mouse over hotspot shows the text box
URL	String	""	onClick of hotspot opens on new page

---

Custom

Name	Type	Default	Description
type	String	custom	you should pass it
pitch	Number	0	the pitch for hotspot
yaw	Number	0	the yaw for hotspot
tooltip	Function	see demo	(createTooltipFunc) the function pass div element and you can append any shape or html or ...
tooltipArg	Object	{}	(createTooltipArgs) will be passed to handleClick
handleClick	Function	logging the handleClickArg	(clickHandlerFunc) fires onclick of hotspot
handleClickArg	Object	{}	(clickHandlerArgs) will be passed to handleClick
cssClass	String	tooltipcss	String is used as the CSS class for the hotspot

---

Video API

these are videojs configuration properties which can be used

Name	Type	Default	Description
video	String	" "	Path to your 360 video
loop	Boolean	false	Looping over video
autoplay	Boolean	true	Play the video as page loaded
controls	Boolean	false	showing controls under
muted	Boolean	true	making video mute

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

Name	Type	Default	Description
width	String	"100%"	The width of the panorama div
height	String	"400px"	The height of the panorama div
video	String	""	The 360 video path
yaw	Number	0	Starting yaw position in degrees
pitch	Number	0	Starting pitch position in degrees
hfov	Number	100	Starting horizontal field of view in degrees
maxHfov	Number	150	Maximum field of view which user can zoom (in degrees)
minHfov	Number	50	Minimum field of view which user can zoom (in degrees)
maxPitch	Number	90	Maximum field of view pitch (in degrees)
minPitch	Number	-90	Minimum field of view pitch (in degrees)
maxYaw	Number	180	Maximum field of view yaw (in degrees)
minYaw	Number	-180	Minimum field of view yaw (in degrees)
autoRotate	Number	0	rotation speed in degrees per second. Positive is counter-clockwise, and negative is clockwise.
mouseZoom	Boolean	true	Enables zoom control with mouse if true
hotspotDebug	Boolean	false	For 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/goldest-star"
  />

  <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>