VR Storytelling Remix Steps

Already familiar with Remixing VR Stories?

Dive in with this VR Starter Project (Note: recommended browser: Firefox. Audio does not work in Chrome)

New to Remixing VR Stories?

VR Remix Steps are the result of E4 Youth’s development of Virtual Storytelling Curriculum via a grant from the Mozilla Foundation. You can view a detailed run down of the project here.

This starter project is hosted on Glitch.com. It was made by E4 Youth Creative College Mentors and Get Creative Enrichment Club students at Pflugerville High School in Central Texas. You may use it as starter to remix your own virtual story. By going through the steps below, you’ll be introduced to some fundamental coding principals. It should help you form some ideas about how you can do similar projects with your students, fellow teachers and friends.

Remix Steps

  1. Go to Glitch (https://glitch.com/~e4remix-weteachcs). 
  2. You’ll see a view of the project.
  3. Choose to Remix This (lower right hand corner).
  4. Go to Assets over on the left-hand side of the screen. If you have assets you’d like add (images or audio), you can drag and drop them here.
  5. Once you’ve uploaded files, mouse over them and click. You’ll see a thumbnail of the image/file. Click Copy Url button. This is the Url of the asset that you’ll be pasting into the index.html file.
  6. Go to index.html file (upper left side of the screen).
  7. Find <a-assets> tag. You’ll see a series of <img> tags and one <audio> tag. The ones with the id’s city, cubes and sechelt represent the 360 images that are currently being used in the project. The others with the suffix thumb represent buttons seen in the project. The Urls within the src tagsare the ones you’ll want to replace with your own. Select the Url for the image you’d like to replace and paste your own into it.
  8. Go back to Assets directory and repeat the previous 3 steps for each image that you’d like to reload.
  9. If you have an audio file, copy the Url from within the assets folder and locate the <audio> tag within the index.html file. Replace its Url with that of yours.
  10. To see what your remix looks like, click the Show Live button. Your project will open in a new tab of the browser.
  11. The content will load in a new tab on the browser. View Live

You may also like