Thanks to the A-Frame library, it's super easy to add 3D experiences to your browser using just HTML tags!
If you're already familiar with HTML, check out our guide on creating custom maps with A-Frame. Or, if you'd like to learn HTML, explore our short guide on how to code with HTML.
Before we explain how to code with HTML it's important to explain that this page is not going to go into high detail on the many tags, attributes, and CSS styles. This is why there are so many other reference pages and other resources out there. If you don't know how to do something, just look it up. Some good places to look are, W3 Schools or MDN Webdocs. If it's not a matter of forgetting the name of something, look or ask a question on a forum like Stack Overflow. Some of my personal favorites are AI tools Chat GPT or Gemini
HTML is the foundational markup language used by 96.7% of all websites, with 94.4% specifically utilizing HTML5. It's easy to learn and use. HTML is written using tags, where each set of tags represents an element on the page. Some elements are visible, while others alter the page’s structure or behavior. Attributes specify little details that change what elements do.
Elements have an opening tag: <tagname> and most have a closing tag: </tagname>. Opening tags have a <, the element name, then a >. Closing tags are the same except they have a / after the <.
The stuff inside the two tags is the elements's content. For example: <p>This is a paragraph of text.</p> Result:
There are many different tags like the h1 tag that creates a big heading:
<h1>This is a heading</h1>
Result:
Or the button tag that creates a button:
<button>This is a button</button>
Result:
Those (and many more tags) are the building blocks of a website and they work on their own. If you were to open an index.html file with
<button>This is a button</button><h1>This is a heading</h1>, it would look like this:
However, websites should have a structure. First you need the thing at the top like this: <!DOCTYPE html>
(It doesn't have a closing tag.)
Then right after it there is the html tag that looks like this <html lang="en"> </html>.
Inside the html tag is where we put the head tag and body tag. The head tag is the head of the page, it will hold some
of our scripts, the title, favicon, CSS, meta tags, and all the stuff we don't see directly.
The other tag inside the html tag is the body tag. This holds all the stuff we get to see like button and h1 tags.
You can put some scripts that directly modify the page in there too. Here's an example of a page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<h1>This is an example</h1>
<p>Cool right?</p>
<button>You can click me, but without JavaScript, nothing happens.</button>
</body>
</html>
Result:
You could do this, but we can't do that much. This is why we have attributes.
Attributes help us specify the details on elements.
Attributes can set the id, class, style, alignment, source, width, height, and many more details of a element.
Attributes are added in the opening tag of an element after the name of it. You put the name of the tag, an = sign, and inside quotes the value of the attribute.
For example, we can set the id of the heading tag to coolHeading like this: <h1 id="coolHeading">A Cool Heading/h1>
I know you're probably wondering though, why would you want to set the id attribute of an element? It's not like it changes how it looks.
Elements have id and class attributes to identify them from other tags. This way you can use them in javascript and CSS.
These can change how the element looks.
There are some attributes that change an element on their own though, like the src attribute on an img tag.
It sets the source of the image. The image tag is self-closing, so it doesn't need a closing tag. The link is the source to the image: <img src="https://cdn.glitch.global/756a4aaf-b43f-4a95-998c-1c3ac912e721/tagIcon.png?v=1734742942629">
Result:
One thing to remember though is not all attributes work on all tags. For example, the src attribute will also work on a script tag to set the source of a script, but not on an h1 tag.
There are also other attributes like the align attribute that aligns an element on a page: <h1 align="center">Center Heading</h1> Result:
Or the href attribute that works on a tags. It sets the link that the a tag takes you to: <a href="https://mmspicyio.xyz">mm spicy io</a> Result:
Or the style attribute that adds CSS quickly to an element: <h1 style="color: yellow">Mm Spicy io</h1> Result
There are many other ways to add CSS but we won't go into them since we're just teaching HTML right now.
There are many other HTML elements and attributes. Once again, for more lessons and detail on this check out resources like W3 Schools or MDN Webdocs. This was just an introductory course to HTML, I know that you really came to make 3d games.
Mm Spicy io is made with the A-Frame library. It makes 3d development on the web super easy to do for people that aren't familiar with javascript and the Three.js library.
To add the A-Frame library to our page we insert the CDN into the head tag. <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
A CDN helps us add code to our page that's hosted somewhere else.
Then we add an a-scene tag. <a-scene></a-scene>
Inside this tag is where we add the shapes that go in our 3d scene.
A-Frame has a lot of primitives. We'll go over a lot of the basic and most used ones.
To find a full list of A-Frame primitives, components, and more, check the A-Frame documentation.
There are a bunch of 3d shapes like the box, sphere, cylinder, plane, and torus. You can also add 3d models (gltf/glb)
with the a-gltf-model element. <a-scene> <a-sphere></a-sphere> <a-box></a-box> </a-scene>
If we add our a-scene with those elements inside to our full html template, it'll look like this: <html>
<head>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box></a-box>
<a-sphere></a-sphere>
</a-scene>
</body>
</html>
And the result will look like this: (back up a bit using the back arrow key to see something)
This is super cool, you can even move around to see the objects! But everthing has no color, and they're on top of eachother. Just like with regualar HTML, you can add attributes to change things about the objects. In A-Frame, these are called components. Here are some of the important ones. The position component changes the 3d position. Y being up and down, Z being foward and backward, and X being left and right. The material changes the material of an object. With these components and more listed in the documentation, you can create super cool A-Frame maps!