Try expanding to full-screen, and setting the resolution to the maximum 4K resolution (2160s). To give you more time before the video ends, the video can be paused while you take your time browsing the scene.
Here’s the source code.Īnyway, this is a very first version of the 360-photosphere viewer, but I am quite pleased with it.Īll photos are licensed under Creative Commons 2.0 Generic Attribution.įlickr is a good source of equirectangular photos, or you can create your own by using Android Camera app (using the photosphere option).
It contains the code for the photo thumbnail menu animation, the sky tag, the camera, the cursor, and their settings. The main index.html file is straightforward. Additionally, I decided to only show the cursor when the menu is visible. I guess people nowadays either have a Cardboard 2.0 (which supports a button) or an Oculus Rift and a mouse and keyboard. After many tests I decided that I did not like the fuse cursor for selecting photos. I disabled the fuse cursors which would normally emit this click event. I handles the selection of the photo via the mouse click event. The second component is associated to each photo thumbnail within the menu container. So I turned to Stack Overflow which helped me out on that one (again). I have to admit that I was not able to write the code for positioning the menu in space. This component acts as a container for the photo thumbnails.
The first component handles the VR photo menu (showing the menu, hiding the menu, position it in space). As it turned out, I needed actually two components: Which lead me to implement my first component for A-Frame. (b) implementing a decent VR menu could not be done by just using A-Frame tags. (a) yes it is easy to implement a photosphere BUT Since I knew that A-Frame had been released I thought of implementing this app in A-Frame, as I thought it might be quite easy to do, AND I would learn coding in A-Frame.Īfter a few hours of playing around I realised that The photosphere is showing photos with a so-called equirectangular projection (did not hear about that term before, as I am not a photo nerd -) ). It is a 360-degree photosphere VR app for Google Cardboard including a nice menu in VR which allows one to easily select photos from a list. Recently I installed the Cardboard Camera app on my phone. Space bar toggles a menu system, and a gaze-based cursor selects photos.
WebVR Tour of Public Projects in Charleston, SCĬhris from IdeaSpaceVR has built an interactive 360-degree photosphere viewer. Popmotion Physics & Animation with A-Frame
The Washington Post Presents "Mars: An Interactive Journey" Halloween Feature! Building Ghost Train BuilderĪmnesty International UK Presents "Fear of the Sky" Rapid Motion-Capture-Powered VR Development Managing Application and Game State in A-Frame
Image Tracking and Location-Based AR with A-Frame and AR.js 3Ī-Frame v0.8.0 - Performance and ProductionĪ-Frame v0.7.0 - Windows Mixed Reality Headsets and glTF 2.0Ĭreating Augmented Reality with AR.js and A-Frame A-Frame 1.1.0 - AR, Quest 2 Support, hand tracking, compositor layers, immersive navigation