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)"}