VR Storytelling Remix Steps

Already familiar with Remixing VR Stories?

Dive in with these VR Starter Projects (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.

E4 Youth’s starter projects are hosted on Glitch.com. These are made by E4 Youth staff, Creative College Mentors, Get Creative Enrichment Club students and our ecosystem of partners across creative and technology sectors. By going through the steps below, you’ll be introduced to some fundamental coding principals. It will also help you brainstorm about doing similar projects with your students, fellow teachers and friends.

Tools

There are few free online tools that you’ll want to use. Go ahead and join these sites in advance.

Glitch – Remix platform.
Github – Allows you to log in to Glitch.com and save your remixes.

Remix Steps

  1. Go to Glitch (https://glitch.com/e4youth). 
  2. Pinned near the top of the page, you’ll see several projects. .
  3. Select a project and you’ll load a preview (No audio. Try Firefox browser. 
  4. Choose to Remix This (lower right hand corner).
  5. 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.
  6. 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.
  7. Go to index.html file (upper left side of the screen).
  8. 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.
  9. Go back to Assets directory and repeat the previous 3 steps for each image that you’d like to reload.
  10. 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.
  11. To see what your remix looks like, click the Show Live button. Your project will open in a new tab of the browser.
  12. The content will load in a new tab on the browser. View Live

You may also like