React Component library for the Pannellum project.
Special thanks to Matthew Petroff
Currently there are some problem with React V18
Install pannellum-react component
npm install pannellum-react --saveor
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
equirectangulartype is supported! planning to do alsomultires
Note:
Tourscomponent currently is not supported but is WIP. Note: For having video tours, there is the custum hotspot which can implement the video scene changing usinghandleClick. 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)
https://farminf.github.io/pannellum-react/
you can also use codesandbox playground
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;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
| 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
| 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 |
| 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 |
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.
<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>pannellum-react is released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
