VRVIEW React

Demo

Requirements

Installation

Application Programming Interface

<Vrview {...scene} />

exportinterfaceIScene{scene:{// Scene idid:number|string,// Scene titletitle?:string,// Scene descriptiondescription?: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 directoryimage?: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 videoloop?:boolean,// Mutes/unmutes the sound of the videomuted?: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 scenehotspots?:Array<IHotspot>}

exportinterfaceIHotspot{// Hotspot identifier. Used on click eventname: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 eventidNewScene?:number|string;// Arbitrary function to run on hotspot click event. (Function call must be string to be valid JSON)clickFn?:string;}

Use

scene:IScene={scene:{width:'90%',height:400,image:'../images/coral.jpg',is_stereo:true,is_debug:true}}

[{"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"}}]

{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