Pannellum React

screenshot of Pannellum React
react

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

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.

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading