<html> <head> <script src="vr_view_101-master/website/vrview/build/vrview.js"></script> <!-- Replaces element with id "vrview2" with iframe element--> <!-- Utilize CORS API with url https://cors-anywhere.herokuapp.com/ along with other asset urls to prevent browser security hangups... Research Cross Origin Resource Sharing for other methods --> <script> window.addEventListener('load', onVrViewLoad) function onVrViewLoad() { var vrView2 = new VRView.Player('#vrview2', { image: 'https://cors-anywhere.herokuapp.com/http://www.jaredkengla.com/assets/kitchen.jpg', is_stereo: true, width: '100%', height: 300, is_autopan_off: true }); // Here I add a hotspot with a defined location over the 'cereal' // Requires the on 'ready' state and then handler function vrView2.on('ready',function(){ vrView2.addHotspot('cereal-bowl', { pitch: -35, // In degrees. Up is positive. yaw: 222, // In degrees. To the right is positive. radius: 0.08, // Radius of the circular target in meters. distance: 1 // Distance of target from camera in meters. }); }); // Event Handler function for clicking hotspot on 'click' state vrView2.on('click', function(event) { if (event.id == 'cereal-bowl') { vrView2.setContent({ video: 'https://cors-anywhere.herokuapp.com/http://www.jaredkengla.com/assets/congo_2048.mp4', is_stereo: true }); } }); } </script> <!--This works straight from Google's simple example: <iframe class="framebox inherit-locale" style="width: calc(100% + 40px); height: 347px;" src="https://developers.google.com/vr/develop/web/vrview-web_931e7672f6bb4cdc9b6b700c77ac08fb.frame?hl=en" id="autoSize-0"><p>[This section requires a browser that supports JavaScript and iframes.]</p></iframe> --> </head> <body> <div id="vrview2"></div> </body> </html>
<html> <head> <!-- AFRAME version, because vrview was not happy with Firefox...--> <!-- Here I source version 0.5.0 although 0.8.0 was available, the updated version was not working for me --> <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> </head> <body> <!-- Utilize CORS API with url https://cors-anywhere.herokuapp.com/ to sidestep browser security hangups--> <!-- AFRAME does not like stereo 360 content, stick to monoscopic unless they add it to documentation --> <a-scene> <a-assets> <video id="room_vid" src="https://cors-anywhere.herokuapp.com/http://www.jaredkengla.com/assets/room_mono.mp4"> </video> </a-assets> <a-entity id="camera" camera="userHeight: 1.6" look-controls="" cursor="rayOrigin: mouse" position="" rotation="" scale="" visible="" raycaster=""></a-entity> <a-box id="tv" position="1.5 0.45 -1.3" rotation="0 20 0" width="0.8" depth="0.9" height="0.9"></a-box> <a-videosphere src="#room_vid"></a-videosphere> </a-scene> <script> window.addEventListener('load', onAframeLoad) function onAframeLoad() { var videoEl = document.getElementById('room_vid'); var button = document.getElementById('tv'); videoEl.pause(); AFRAME.registerComponent('cursor-listener', { init: function () { this.el.addEventListener('click', function (evt) { videoEl.play(); }); } }); } </script> </body> </html>
