/react-360-img

Equirectangular images convert to 360° images using with A-Frame

Primary LanguageJavaScript

React 360 Image

Just react component that equirectangular images convert to 360° images using with A-Frame.

Installation

Install with npm or yarn.

npm i react-360-img
yarn add react-360-img

Usage

import React from 'react'
import React360Img from 'react-360-img'

const App = () => {
  return (
    <>
        <React360Img 
            imgPath="/image/path.jpg" />
    </>
  )
}

Demo

See a live demo on CodePen

Props

Name Type Default Value
imgPath String [required]
width String or Number 100vw
height String or Number 100vh
rotation String 0 -130 0

License

MIT

Extra Notes

About Equirectangular Image

To be seamless, images should be equirectangular. You can find some sample equirectangular images on Flickr. To take an equirectangular photo, check out this ngokevin's 360-degree photographyguide

About Original Project

Checkout the magnificent A-Frame project