Summary: Display a 360 photo using Google VR View
Questions answered by this recipe
How can I embed 360 photos (equirectangular images) on my wiki?
All sections are optional, you can remove those that do not apply to your recipe, and add new ones.
Display a 360 photo using Google VR View.
- download and unzip Google VR view (zip) in your pub path getting
- add at the end of your
config.phpthe following code
Markup( 'VRView360', 'fulltext', '/\\(:vrview360:\\)(.*?)\\(:vrview360end:\\)/mesi', "Keep(PSS('<iframe class=vrview360 width=100% height=300px allowfullscreen frameborder=0 src=\"$PubDirUrl/vrview/index.html?image=$1\"></iframe>'))" );
- change the width and height according to your needs
- use the
vrview360CSS class to change them later on if need be
- live example http://fabien.benetou.fr/Tools/VirtualReality#VRView360
- preview Δ
- note that your wiki should work well on mobile also so that people can experience the image properly with a Cardboard
- first draft, optional parameters would be nice
- could also use directly three.js or Aframe but seems overkill when only to display 360 photos
- pretty resizeable, you can easily use the content inside a table to display multiple 360 photos
- if you decide to attach the images make sure the upload limitation limit is high enough, 360 photos tend to be quite large
Change log / Release notes
- including the path in order to better support attachment rather than solely
If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".
- Google VR view documentation
- an earlier Aframe embedding demo [(approve links) edit diff] also by Utopiah
See discussion at VRView360-Talk?
User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.