@allestaire.acasio/all-around-the-world

All Around The World

• Mazipano Package for React

Installation

# Using Yarn
yarn add @allestaire.acasio/all-around-the-world

# Using NPM
npm install @allestaire.acasio/all-around-the-world

Usage

import AllAroundTheWorld from '@allestaire.acasio/all-around-the-world'

const SCENE = [
  ...
  {
    label: 'Radiant Church of God',
    facesize: 4096,
    settings: {
      yaw: -0.8742276521196057,
      pitch: 0.13728319936422295,
      roll: 0,
      fov: Math.PI/1.5
    },
    image: '/imgs/cubemap/{f}.jpg',
    levels: [{ tileSize: 1024, size: 1024 }],
    hotspots: [
      {
        ele: 'outside',
        coordinates: {
          yaw: 2.2787784123665737,
          pitch: 0.08445560195570856,
        },
        perspective: {
          radius: 1640, extraTransforms: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'
        }
      },
    ]
  }
]

const MyComponent = () => {
  const sceneEl = useRef(null)
  const handleClick = (coordinate, scene) => {
    console.log(coordinate, scene)
    // Change to next scene
    // scene.current.switchScene(sceneIndex, setting)
  }

  return (
    <AllAroundTheWorld ref={sceneEl} scenes={SCENE} onClick={handleClick}/>
  )
}

export default MyComponent

Component Property

Attribute	Type	Description
scenes	Array	List of scenes (see Scene Format)
limiter	Boolean	This will add limiter to the scene
onClick	Function	Click event when click on the scene, this will have a parameter of coordinate and scene
_	coordinate	Coordinate of the click position
_	scene	Current data scene upon clicking

Scene Format

Property	Type	Description
label	String	Title of the scene
facesize	Number	Face size of the screen (I guess) See for documentation
settings	Object	Custom view point
image	String	Image URL
levels	Array	List of leveles [{ tileSize: 1024, size: 1024 }]
hotspots	Array	List of hotspot configuration
_	ele	Element ID, i.e my-hotspot
_	coordinates	Coordinate consist of {yaw: 0, pitch: 0}
_	perspective	Change perspective of the hotspot relative to its view, i.e {radius: 0, extraTransforms: "rotateX(0deg) rotateY(0deg) rotateZ(0deg)"}