Skip to content
⭐️ Virtual Reality React Component for 360º photos, videos and virtual tour visualization
JavaScript Other
Branch: master
Clone or download
Latest commit 35f0a6e Feb 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Build Nov 2, 2017
build Refactors Feb 14, 2018
config Refactors Feb 11, 2018
deps Refactors Feb 3, 2018
public Refactors Feb 13, 2018
src Refactors Feb 13, 2018
tmp Refactors Feb 13, 2018
uml Refactors Dec 29, 2017
.gitignore Refactors Feb 3, 2018
.travis.yml Refactors Feb 13, 2018
360.jpg Refactors Sep 22, 2017
LICENSE Create LICENSE Jan 4, 2018
README.md Refactors Feb 14, 2018
index.d.ts Fix compilation error prop-types. Add index.d.ts Dec 29, 2017
package-lock.json Refactors Jan 4, 2018
package.json Refactors Feb 14, 2018
tsconfig.json Refactors Feb 3, 2018
tsconfig.test.json Refactors Jan 3, 2018
tslint.json Refactors in tsconfig.json, App.tsx, tslint.json Dec 29, 2017
yarn.lock Refactors Feb 11, 2018

README.md

VRVIEW React

React Component for virtual tour creation

  • It encapsulates Google's Vrview Library
  • It is posible to define points (aka hotspots) to navigate between images/videos
  • It is posible to assign an arbitrary function to a hotspot click event
  • Using a smartphone and Google's Cardboard or other specialized hardware it is posible to have a full and inmersive virtual reality expereince

Demo

Requirements

  • Node/npm/yarn
  • A project created with Create-React-App for Typescript. If you don't want to use Typescript you must erase all type information manually.

Installation

  • To install in a existing Create-React-App project, run nmp install --save YagoLopez/vrview-react
  • To copy and run this project:
    • Clone or fork this repository
    • Install dependencies: npm install inside your local directory project
    • Run the application: npm run start

Application Programming Interface

<Vrview {...scene} />

Vrview is a prure component. It receives scene data as props from a parent component and asign those props to its state which implements the following interface:

export interface IScene {
  scene: {

    // Scene id
    id: number | string,

    // Scene title
    title?: string,

    // Scene description
    description?: string,

    // URL pointing to a 360° video file or an adaptive streaming manifest file (.mpd or .m3u8).
    video?: string,

    // URL pointing to a 360° image file. Exactly one video or image is required.
    // Images and videos must be in /public directory
    image?: string,

    // Iframe's width attribute.
    width?: 	string | number,

    // Iframe's height attribute.
    height?: string | number,

    // URL to a preview image for a 360º scene (video/image).
    preview?: string,

    // Indicates whether the content has stereo format or not.
    is_stereo?: boolean,

    // Turns on/off debug canvas features (like showing the FPS meter).
    is_debug?: boolean,

    // Enables/disables the VR mode button.
    is_vr_off?: boolean,

    // Enables/disables the autopan introduction on desktop.
    is_autopan_off?: boolean,

    // When true, prevents roll and pitch. This is intended for stereo panoramas.
    is_yaw_only?: boolean,

    // The initial volume of the media; it ranges between 0 and 1; zero equals muted.
    volume?: number,

    // Enable/disable the loop in the video
    loop?: boolean,

    // Mutes/unmutes the sound of the video
    muted?: boolean,

    // Numeric angle in degrees of the initial heading for scene.
    default_yaw?: number,

    // By default, the camera points at the center of the image.
    // When true, the fullscreen button contained inside the VR View iframe will
    // be hidden. This parameter is useful if the user wants to use VR View's fullscreen
    // workflow (via vrView.setFullscreen() callback) with an element outside the iframe.
    hide_fullscreen_button?: boolean
  },

  // Array of clickable points on scene
  hotspots?: Array<IHotspot>
}

A scene can have zero or more hotspots of type IHotspot:

export interface IHotspot {

  // Hotspot identifier. Used on click event
  name: string;

  // The latitude of center, specified in degrees, between -90 and 90, with 0 at the horizon.
  pitch: number;

  // The longitude of center, specified in degrees, between -180 and 180, with 0 at the image center.
  yaw: number;

  // The radius of the hotspot, specified in meters.
  radius: number;

  // The distance of the hotspot from camera, specified in meters.
  distance: number;

  // Destination scene for on click event
  idNewScene?: number | string;

  // Arbitrary function to run on hotspot click event. (Function call must be string to be valid JSON)
  clickFn?: string;

}

Use

  • Static assets like images and videos must go in public directory
  • Copy public/vrview folder to your project public folder
  • Import Vrview component from node_modules/vrview-react/src/vrview
  • Define a scene in json format and pass it to VrviewCmp component as props. Each scene follows the interface IScene. For example, for a simple scene:
scene: IScene = {
  scene: {width: '90%', height: 400, image: '../images/coral.jpg', is_stereo: true, is_debug: true}
}
  • To create a virtual tour with several scenes you can define an array of scenes. To navigate from one scene to another define a hotspot and a relation with other scene using "idNewScene" as external key (like in a relational database). In this demo it has been used the Repository Pattern and a SceneCollection Class that loads and manages the scenes from a scenes.json file but this data could be loaded from an external API.
[{
  "scene":
  {
    "id": 1,
    "width": "100%",
    "height": 400,
    "image": "../images/coral.jpg",
    "is_stereo": true,
    "is_debug": true,
    "title": "Title Scene 1",
    "description": "Initial scene with three hotspots. One hotspot has a new scene associated, other has no new scene and the third executes a function"
  },
  "hotspots": [
    {"name": "scene1-hotspot1", "pitch": 0, "yaw": 0, "radius": 0.05, "distance": 2, "idNewScene": 2},
    {"name": "scene1-hotspot2", "pitch": 0, "yaw": -35, "radius": 0.05, "distance": 2},
    {"name": "scene1-hotspot3", "pitch": -20, "yaw": -25, "radius": 0.05, "distance": 2,
      "clickFn": "alert('Function executed');"}
  ]
},
 {
   "scene":
   {
     "id": 2,
     "image": "../images/landscape1.jpg",
     "is_stereo": false,
     "title": "Title Scene 2",
     "description": "Scene 2 has two hotspots with respectives scenes associated"
   }
 }]
  • Each time the user clicks a hotspot a new scene is loaded from ScenesCollection and passed from App component to VrviewCmp as props and VrviewCmp set its state from the incoming props with the new scene data.

  • Hotspots are optional and you can also define an arbitrary function for a hotspot click event. For example, in the following case instead of defining a idNewScene object just define the clickFn property:

{
  scene: {image: '../images/walrus.jpg', is_stereo: true},
  hotspots: [
    {name: 'hotspot5', pitch: -20, yaw: -25, radius: 0.05, distance: 2, clickFn: '() => alert("Function executed")'}
  ]
}

UML Demo Diagram

Disclaimer

At the moment it seems IE < 11 and some IOS can experiment malfunction with three.js library. Feel free to open an issue

License MIT

Back to top ↑

You can’t perform that action at this time.