Skip to content

Latest commit

 

History

History
66 lines (46 loc) · 3.06 KB

README.md

File metadata and controls

66 lines (46 loc) · 3.06 KB
Raw

A basic A-Frame scene

The HTML page index.html contains a basic 3D scene created using the A-frame library. The whole scene is a single HTML file; HTML files are files containing webpages.

Documentation for A-Frame is available from https://aframe.io/docs/master/introduction/

Editing using a sandbox

There are many sandbox environments on the web preconfigured to edit html+javascript code. To open any github repo in codesandbox.io change the url from github.com/[...] to githubbox.com/[...]. Note that any changes you do will be stored on codesandbox.io and will not be contributed back to this repository.

Once you open this repository in codesandbox.io, your sandbox will look like this.

Sandbox view

From left to right you see:

  • a file and configuration pane
  • a file (html) editor
  • a live preview of your webpage

You can close the left pane and pop out the live preview into a separate tab if you want more screen real-estate for editing

To make and save your changes to the sandbox you have to form it.

fork button in the sandbox environment

Next, let us look at the html source code and identify the main parts.

Basic HTML

You can find a basic introduction to html mark-up in a html crash course. HTML is a document markup language not a programming language. HTML does not contain any logic. The programming language used for the web is Javascript. It is tightly integrated with HTML and allows you to execute commands in your browser that alter the html contents of the displayed website.

Tags

Content in html are organized in a heirarchically into tags. Tags to delimit meaningful parts of a website. For example, this is a valid piece of HTML:

<body>
<section> 
    <!-- This is a comment, it is ignored when rendering the webpage. 
    The tag immediately in front of this is an opening of a section. 
    Each tag has to be closed by the "closing" tag that starts with the / character
    -->
    <h1> This is the header of level 1 </h1>
    <p> This is a paragraph that is contained inside the p tags </p>
</section>
</body>

A-Frame and external libraries

The library A-Frame, used for creating immersive graphical websites is pulled in through the <script> tag in the header of this html file.

<head>
    <!-- ... -->
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> 
    <!-- ... -->
</head>

The library is not stored on your computer, it is downloaded from the internet by your browser.