React-viewer360 NPM

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 |