React-Viewer360

This is a 360 viewer library inspired by google map's navigation. Using points for each 360 image, the 360 images are placed in a 3D world using XYZ coordinates and the POV travels to each position in transition.

Why

• Transitions to other 360 images as though flying to it
• Each 360 image can hold their own markers
• Each marker can customize sprite, content (with html support) and line from marker to a position (can be used to illustrate pointing to an item)

Installation

npm install react-viewer360 # or yarn add react-viewer360

Usage

Display one 360 image

import Viewer360 from "react-viewer360";

export const App = () => {
  return (
    <Viewer360
      img="./360_1.jpg"
    />
  )
}

Display one 360 image with markers

import Viewer360 from "react-viewer360";
import "react-viewer360/dist/viewer360.css";

export const App = () => {
  return (
    <Viewer360
      img="./360_1.jpg"
      markers={[
        {
          point: [2, 0, 3],
          content: (
            <div>
              An apple product
              <a href="www.apple.com">Apple Store</a>
            </div>
          )
        }
      ]}
    />
  )
}

Display multiple 360 images with markers

import Viewer360 from "react-viewer360";
import "react-viewer360/dist/viewer360.css";

export const App = () => {
  return (
    <Viewer360
      positions={[
        {
          point: { x: 0, y: 0, z: 0 },
          img: "./360_1.jpg",
          label: "Bedroom",
          markers: [
            {
              point: [2, 0, 3],
              content: (
                <div>
                  An apple product
                  <a href="www.apple.com">Apple Store</a>
                </div>
              )
            }
          ]
        },
        {
          point: [1, 0, 0],
          img: './360_2.jpg',
          label: 'Living Room',
          sprite: './sprite_1.png',
        },
        {
          point: [3, 0, 3],
          img: './360_3.jpg',
          label: 'Kitchen',
        },
      ]}
    />
  )
}

Options

| Prop | Type | Default | Description | | ---------------------- | ------------------- | ------- | ------------------------------------------------------------------------------------ | | positions | Viewer360Position[] | [] | Positions of each 360, along with each 360's settings such as its markers and sprite | | img | string | | A 360 image. Use this if only displaying one image ever | | markers | Marker[] | [] | A list of markers for the singular img (only applies to img prop) | | dragSpeed | number | 1 | The speed when mouse drag screen (ev.movementX * dragSpeed) | | autoRotate | boolean | false | Flag for whether screen will auto rotate | | autoRotateSpeed | number | 1 | If autoRotate true, the speed it'll move per frame | | initialCameraRotation | View360Point | | The initial camera rotation (using XYZ) on first load | | pointMarkerSprite | string | | A marker image to indicate next travel point | | markerSprite | string | | A marker image indicating a marker position | | pointMarkerSpriteScale | number | 0.2 | Scale the point marker image | | markerSpriteScale | number | 0.15 | Scale the marker image | | styles | Viewer360Styles | {} | Styles for each part of the dom layer | | hideLabels | boolean | false | Hide all labels (both markers and points) | | enableZoom | boolean | true | Enable zoom in/out on scroll |

Ref Functions

zoomDelta(delta: number)

change zoom by delta

goToIndex: (positionIndex: number, duration?: number)

go to position by index

startDrawing()

start drawing loop

stopDrawing()

stop drawing loop

dragDelta(delta: Position2D, speed?: number)

drag the 3D world through 2D screen

Structures

Viewer360Position

point: View360Point;
img: string;
label?: string | React.ReactNode;
markers?: Marker[];
sprite?: string;
spriteScale?: number;

Marker

point: View360Point;
content: string | React.ReactNode;
lineTo?: View360Point;
sprite?: string;
spriteScale?: string;

View360Point

{ x: number; y: number; z: number } | [ number, number, number ]

Viewer360Styles

container?: React.CSSProperties;
pointMarkerLabel?: React.CSSProperties;
pointMarkerLabelHover?: React.CSSProperties;
pointMarkerLabelContent?: React.CSSProperties;
markerLabel?: React.CSSProperties;
markerLabelHover?: React.CSSProperties;
markerLabelContent?: React.CSSProperties;

Styling

Classes to override | ClassName | Position | | --------- | -------- | | .viewer_360_marker_label | Marker's label container| | .viewer_360_marker_label_content | Marker's label content | | .viewer_360_marker_label_hover | Marker's label hover area | | .viewer_360_point_marker_label | Position's label container | | .viewer_360_point_marker_label_content | Position's label content | | .viewer_360_point_marker_label_hover | Position's label hover area |

TODO

• [x] Define sprite scales
• [x] Add js styling
• [ ] Define customized transitions