Web-based Virtual Reality Environments

2. Intro

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.

Comments

Notice anything wrong? Have a doubt?

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