Web-based Virtual Reality Environments

2. Intro to Glitch

This course is structured to use the Glitch platform. Glitch is a web platform that provides you with a free JavaScript-based web server for your projects.

You should get acquainted with Glitch as soon as possible and create an account and a project where you will code all the exercises and final project.

Sign up

  1. Start by signing up on Glitch.com so that you can save your work. Go to glitch.com and click "Sign up" (Figure 1). You have various options for creating an account from existing social networks and I recommend you use the one you are most used to (Figure 2).
Figure 1 – Sign up button on Glitch
Figure 2 – Sign up options on Glitch
  1. Create a new project (Figure 3). After you sign up and login into Glitch, you should create a project (Figure 3): make sure you choose the hellp-webpage template.
Figure 3 – Create a new project
  1. Creating a new project will take you to the editor of Glitch (Figure 4).

Figure 4 – Project editor
  1. Rename your project. Glitch assigns a random name to your project. To make it easier to locate, you should change it by clicking the name in the top left, and then entering a new one (Figure 5). Use your name to make it easy to identify who the project belongs to.

Figure 5 – Rename your project

Learn to get back to your project after you sign out

You should also learn how to get back to your project after you log out. Imagine you have finished for the day and log out; on the following day you should be able to get back to the project easily:

  1. Log out (Figure 6). You will be taken to Glitch's main page.
Figure 6 – Log out
  1. Log in again (Figure 7).
Figure 7 – Log in
  1. Locate your project (Figure 8).
Figure 8 – Locate your project
  1. Click on the project's name to edit. You are now back at the editor.

Glitch editor

The Glitch editor is a simple file editor.

  1. You can see a list of files on the left
  2. Clicking a file will open it in the file editor to the right
  3. There is also an "Assets" folder for putting media files
Figure 9 – Glitch Editor

Learn the structure of the course website

The chapters and examples about A-Frame are also hosted on Glitch.com and it's important that you understand how things are structured.

The address of course website is, of course, https://aframe-course.glitch.me/index.html. The course is structured into various chapters that you can browser on the left side (Figure 10).

Figure 10 – A-Frame course website

Modify an example

Each chapter has a number of examples that you can copy and modify. To do that, you need to create a new file in your own project and then copy and paste the contents of the example. The following example is similar to the ones that appear throught the various chapters. Notice the source link at the top. If you click there, you will open a new tab with the source code for that example.

Let's copy the source code of the following example and edit that so that is displays the cube with an image you will upload:

Example 0010-intro-01 [new tab ] [source ]
Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.
  1. Go to your project and create a new file (Figure 11). To keep your project organized, you should name your files so that they will end up inside folders. In Figure 11, I named the file examples/0010-intro-01.html – this will create a new file inside the folder examples. It is important also to add the file extension to the file name (.html).
Name the file, putting it into a folder
The file is created empty
Figure 11 – Create a new empty file
  1. Go to the example you wish to copy, and click on the Source link to open a new tab with the source code (Figure 12)
Figure 12 – Copy the source code
  1. Go back to the empty file you just created and paste the source code.

View the results

  1. Click on the "Show -> In a New Window" button at the top of the Glitch Editor (Figure 13).
Figure 13 – Show in New Window
  1. This will open the default page index.html (Figure 14):
Figure 14 – Default page
  1. You will need to edit the address in the address bar of your browser and write the full address (Figure 15).
Figure 15 – Write full address
  1. After you enter the address you will see the results (Figure 16).

Figure 16 – Results

Change the image on the cube

Look for an image in your computer and upload to the Assets in Glitch by following these steps:

  1. In your Glitch project, go to the Assets folder and drag and drop an image file from your computer (Figure 17).

Figure 17 – Assets area
  1. After you have uploaded the image click on it (Figure 18).
Figure 18 – Locate and click on uploaded image
  1. Copy the URL of the image (Figure 19).
Figure 19 – Get image URL
  1. In your Glitch project, locate the file you have just added and paste the URL you have just copied into the src attribute (Figure 20).
Figure 20 – Paste URL into src
  1. Reload the preview tab and you should see the cube with a new texture.


Notice anything wrong? Have a doubt?

Copyright © 2022 Jorge C. S. Cardoso jorgecardoso@ieee.org