React Templates & Themes Logo React Templates & Themes
Pannellum React screenshot

Pannellum React

Author Avatar Theme by Farminf
Updated: 16 Aug 2022
123 Stars

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

Github

Overview:

The pannellum-react package is a React component library for the Pannellum project. It allows users to easily incorporate interactive panoramas into their React applications. Currently, there are some compatibility issues with React V18 that need to be addressed.

Features:

  • React Component library for the Pannellum project: The package provides a set of React components that can be used to display and interact with panoramas created using the Pannellum project.
  • Installation: The package can be installed using npm. Once installed, it can be imported into a React component file.
  • Support for equirectangular type: Currently, only equirectangular type panoramas are supported. Support for multi-resolution panoramas is planned for future updates.
  • Custom hotspot for video tours: The package includes a custom hotspot component that can be used to implement video scene changing in tours. This allows users to create tours with both videos and photos.
  • Dynamic image updating: If the component’s props are managed by state, the image can be updated smoothly without re-rendering the entire component. For example, changing the yaw, pitch, or hfov values can dynamically update the image.

Installation:

To install the pannellum-react component, follow these steps:

  1. Using npm, run the following command in your project directory:
npm install pannellum-react
  1. After the installation is complete, you can import the pannellum-react component into your React component file using the following code snippet:
import Pannellum from "pannellum-react/es/elements/Pannellum";

Note: Using this import statement will skip importing the video.js component, reducing the production build size by over 500kb.

Please note that currently, only equirectangular type panoramas are supported. Support for multi-resolution panoramas is planned for future updates. The Tours component is currently not supported, but work is in progress.

Summary:

The pannellum-react package is a React component library that provides a convenient way to incorporate interactive panoramas created using the Pannellum project into React applications. It offers features such as support for equirectangular type panoramas, custom hotspots for video tours, and the ability to dynamically update images without re-rendering the entire component. Note that there are some compatibility issues with React V18 that need to be resolved.