• View
• Edit
• History
• Attach
• Print
• Backlinks

VRView360

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.

Description

Display a 360 photo using Google VR View.

Installation

1. download and unzip Google VR view (zip) in your pub path getting /pub/vrview/ accessible
2. add at the end of your config.php the 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>'))"
   );   

Configuration

• change the width and height according to your needs
• use the vrview360 CSS class to change them later on if need be

Usage

• (:vrview360:)/path/to/my360image.jpg(:vrview360end:)
• 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

Notes

• 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 /pub content

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".

See also

• Google VR view documentation
• an earlier Aframe embedding demo [(approve links) edit diff] also by Utopiah

Contributors

• Utopiah

Comments

See discussion at VRView360-Talk?