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

All Around The World

Mazipano Package for React

Demo

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