Creating scenes and stories

Documentation home | Using vrEmbed | Quickstart | Placing images and text | Creating stories
 

Using the create tool

By far the easiest way to create a vrEmbed scene or story is to use the create tool. However, if you wish to tweak the result by hand or create it from scratch, examples are provided below.

Creating scenes

Multiple images

Multiple images can be arranged into a scene, but require a more complex embed code. A vrEmbed story is made up of a top level, single <story> tag which has one or more <scene> tags within it. Each scene can contain as many <photo> tags as you like; each photo contains a code of where to find the image as well as where it goes in the scene. See the result here.
<div>
 <story>
  <scene>
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/src/assets/byobw_2014_a.jpg" isStereo="false" sphereParams="100,66,60,0"/>
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/src/assets/byobw_2014_b.jpg" isStereo="false" sphereParams="100,66,-60,-20"/>
  </scene>
 </story><script async src="//lisa-wolfgang.github.io/vrEmbed/vrEmbed.min.js" charset="utf-8"></script>
</div>

Adding captions

In the scene tag, add a text tag; specify it's location using sphereParams and encose your text within the tag. At this stage the text box sizes to fit the horizontal field-of-view specified in sphereParams. You can see more options to style your text boxes here. Take a look at the result here.
<div>
 <story>
  <scene>
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/src/assets/byobw_2014_a.jpg" isStereo="false" sphereParams="100,66,-20,0"/>
   <text sphereParams="45,30,25,10"/>BRING YOUR OWN BIG WHEEL: every year on Easter Sunday San Francisco locals turn out in droves at the actual, most crooked street in the city for the annual BYOBW races. On a variety of pre-made, home-made and soon-to-be-unmade contraptions they race down in costume. There's no winner but no losers either; you won't find a single face that isn't smiling and having an incredibly good time.</text>
  </scene>
 </story><script async src="//lisa-wolfgang.github.io/vrEmbed/vrEmbed.min.js" charset="utf-8"></script>
</div>

Adding decals

Decals are image-based objects that can act as GUI elements in a scene. Like the text object above, they can be used to further annotate a photo in the scene. Take a look at the result here.
<div>
 <story>
  <scene>
   <photo src="../src/assets/byobw_2014_a.jpg" isStereo="false" sphereParams="100,66,0,0" plane="true"/>
   <decal sphereParams="60,60,0,0" plane="true" planeOffset="-50,33" src="../src/assets/vrEmbedLogo.png"/></decal>
  </scene>
 </story><script async src="../vrEmbed.min.js" charset="utf-8"></script>
</div>

Multiple scenes

Multiple sets of images can be arranged into multiple scenes to build a story (note: currently, vrEmbed will always start with the first scene listed in the embed).

You can name these scenes by adding a name="scene name" qualifier to the <scene> tag. You can then create a visual hyperlink to these scenes by adding a jumpTo attribute on text or decal objects. See the result here.
<div>
 <story>
  <scene name="Corner Crashes">
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/../src/assets/byobw_2013_a.jpg" isStereo="false" sphereParams="100,66,60,-10"/>
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/../src/assets/byobw_2013_b.jpg" isStereo="false" sphereParams="100,66,-60,0"/>
   <text sphereParams="35,30,30,-30" jumpTo="Finish line">Finish line</text>
  </scene>
  <scene name="Finish line">
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/../src/assets/byobw_2014_a.jpg" isStereo="false" sphereParams="100,66,60,0"/>
   <photo src="https://lisa-wolfgang.github.io/vrEmbed/../src/assets/byobw_2014_b.jpg" isStereo="false" sphereParams="100,66,-60,-20"/>
   <text sphereParams="40,30,-20,-20" jumpTo="Corner crashes">Corner crashes</text>
  </scene>
 </story><script async src="//lisa-wolfgang.github.io/vrEmbed/vrEmbed.min.js" charset="utf-8"></script>
</div>
vrEmbed is (c) Bhautik Joshi 2015-16 and available under the Apache 2.0 Open Source license.