vrEmbed Quickstart

 

Using the create tool

Single images

Easily the fastest way to create a vrEmbed is to use the create tool located here: https://lisa-wolfgang.github.io/vrEmbed/create. Simply paste a full path to an image - such as https://lisa-wolfgang.github.io/vrEmbed/src/assets/vrEmbedLogo.png (shown right) into the 'Paste URL' box and hit the 'single image'.

On the next screen, press the 'Load Image' button to see the VR preview of the image. Set up the image as desired in the 'Setup Scene Objects' section of the page; once you are ready, open up the 'Export/Share' section and you'll have many options to create an embed, post to various social media sites or generate a shareable link.

https://lisa-wolfgang.github.io/vrEmbed/src/assets/vrEmbedLogo.png

360 images

360 images can easily be turned into a vrEmbed. Paste your 360 image link - for example: https://lisa-wolfgang.github.io/vrEmbed/src/assets/mission_creek_2.jpg into the 'Paste URL' box on https://lisa-wolfgang.github.io/vrEmbed/create and hit the '360' button. Following the steps in Single Image above, you can create an embed code, send it to social media sites or create a vrEmbed link.

https://lisa-wolfgang.github.io/vrEmbed/src/assets/mission_creek_2.jpg

3D images

Left-right 3D images can also be used to create a vrEmbed. Right now it requires that both the left and right images are in the same source picture; usually this means they are arranged next to each other horizontally or vertically. For the example here we'll use a left-right stereo pair: https://lisa-wolfgang.github.io/vrEmbed/src/assets/anchor_stereo.jpg. As above, paste the link to this into the 'Paste URL' box on https://lisa-wolfgang.github.io/vrEmbed/create and now hit the 'Stereo 3D' button. You can tweak the 3D parameters in the interface to line up where the left and right images actually are in the source image, and from the 'Export/Share' section you can create a vrEmbed link.

https://lisa-wolfgang.github.io/vrEmbed/src/assets/anchor_stereo.jpg

Manually creating links and embed codes

More confident users can manually create vrEmbed links and embed codes. Refer to placement for a guide to what parameters can be adjusted. Below are a couple of simple examples.

vrEmbed link

You can take your image URL and pass it directly to vrEmbed to load via a specially formatted link URL:
https://lisa-wolfgang.github.io/vrEmbed/?src=//lisa-wolfgang.github.io/vrEmbed/src/assets/ferry_building.jpg&isStereo=false&sphereParams=360,180,0,0

Creating an embed code

You can also create an embed code to do the same, and use this fragment of HTML code wherever you like to embed the html (barring pages that don't support HTML snippets, such as facebook or twitter). See the result here.
<a class="vrEmbedPhoto" src="https://lisa-wolfgang.github.io/vrEmbed/src/assets/ferry_building.jpg" isStereo="false" sphereParams="360,180,0,0"></a><script async src="//lisa-wolfgang.github.io/vrEmbed/vrEmbed.min.js" charset="utf-8"></script>
vrEmbed is (c) Bhautik Joshi 2015-16 and available under the Apache 2.0 Open Source license.