A-Frame

From Unreal Club
Jump to navigation Jump to search

Basics

Examples


What is A-Frame?

A-Frame is a free, open-source web framework for building VR experiences. It is accessible on desktop, VR headset, and mobile without any extra coding. It was originally conceived by Mozilla and is now an independent community-supported project.

A-Frame is based on top of HTML, but is a distinct tool. You don’t need to know HTML to use A-Frame.


Getting Started

If you are familiar with web development, set up your directories as you would any HTML project.

If you are not familiar with HTML, I recommend using Glitch. Glitch is a community-oriented online tool for creating and hosting web applications. A key feature of Glitch is the ability to “remix” other apps, copying code and letting you make it your own.

Get started quickly with A-Frame on Glitch by remixing the A-Frame demo: https://glitch.com/~aframe

The Skeleton

Since A-Frame is based in HTML, it shares many structural similarities with an HTML page. A basic HTML page looks like this:

<!DOCTYPE html>
<html>
<head>

</head>

<body>

</body>
</html>

I won’t go in to too much detail about HTML; all you need to know is that key code snippets will be placed inside the <head> , and your VR content will be placed inside the <body>.

To “activate” your page as an A-Frame project, copy and paste this code snippet inside your page’s <head>

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

This is also how you will add any other add-ons or features. More details can be found here: https://aframe.io/docs/1.0.0/introduction/installation.html

It should look like this:

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

And finally we’ll add a new HTML section to the body of our page. Inside <body> place <a-scene></a-scene>

It should look like this:

<body>
    <a-scene>
    </a-scene>
</body>

View your scene by running the .html file or clicking Show in Glitch. There you go! You now have a working VR web page. Now let’s add some content.

Adding Stuff

A-Frame includes a collection of “primitives”, pre-made 3D objects with attributes that you can adjust. You can find the complete list of primitives and their attributes at https://aframe.io/docs/1.0.0/introduction/html-and-primitives.html

Let’s add a couple primitives. First let’s put a sky in our scene.

Inside <a-scene>, place a component <a-sky>.

<a-body>
<a-scene>
        <a-sky color=”blue”></a-sky>
</a-scene>
</a-body>
Complete documentation on the <a-sky> primitive can be found at https://aframe.io/docs/1.0.0/primitives/a-sky.html 

Now let’s add a box (make sure it’s inside <a-scene>:

<a-scene>
    <a-sky color=”blue”></a-sky>
    <a-box color=”red”></a-box>
</a-scene>

Moving Stuff

A cool feature of A-Frame is that you can press Ctrl+Alt+i to view the page in Inspector mode, which lets you peer under the hood of any A-Frame project, see what components are available, and move stuff around. This feature is particularly useful for figuring out where to position your objects.


Open the Inspector and click on the <a-box>. Use the widget to drag it around until you find a place you like for it. Make a note of the three numbers listed on the right under position, then plug those in to your <a-box>

<a-box color=”red” position=”-1 0.5 -3”></a-box>

Complete documentation on the <a-box> primitive can be found at https://aframe.io/docs/1.0.0/primitives/a-box.html

Adding Your Own Stuff A-Frame works with .obj files but it prefers .gltf format. .gltf is a relatively new format for displaying 3D objects on web browsers. It converts the 3D information to JSON data and removes editing capabilities. Think of it like a .jpeg for 3D objects.

Add all the relevant files to your directory. On Glitch, this means dragging your files into the assets page.

Set up a space inside <a-scene> for your assets. It should look like this:

<a-scene>
    <a-assets>
</a-assets>
<!-- scene content -->
</a-scene>

Link your files by listing them as <a-asset-item>. Make sure to give them a unique id. Then use the associated A-Frame object to place them in your scene. More information on gltf and obj can be found here: https://aframe.io/docs/1.0.0/components/gltf-model.html https://aframe.io/docs/1.0.0/primitives/a-gltf-model.html https://aframe.io/docs/1.0.0/primitives/a-obj-model.html

.gltf files should have texture files embedded in them. .obj files need to also have an associated .mtl file. The demo below includes the syntax for obj as well as gltf.

<a-scene>
<a-assets>
        <a-asset-item id=unique identifier such as ”gltf-model” src="URL of your file goes here"></a-asset item>
        <a-asset-item id=”obj-model” src="URL of your file goes here"></a-asset item>
<a-asset-item id=”obj-mtl” src="URL of your file goes here"></a-asset item>
</a-assets>


    <a-gltf-model src=use # and your unique identifier as a shorthand for the file you instantiated above: ”#gltf-model” position=”-1 0.5 -3”></a-gltf-model>
    <a-obj-model src=”#obj-model” mtl=”obj-mtl” position=”0 1.2 -5”></a-obj-model>

And More!

Those are the basics! The documentation is very robust; if there’s something you need to do that you’re not sure of, check there first. There is also a bustling community of A-Frame developers - if you’re having a problem or need to add functionality, try a web search.