2. Your First Aframe Scene
This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.
Let me directly show you how to make your first VR project using Aframe. And then we can look through the technical details.
Head over to Glitch and create an account.
Next go to New Project → hello-webpage. This creates your very first project on Glitch.
You can see some files on the left side of your project. Let me briefly explain what they do:
- index.html: This is where most of the development takes place. The code you write is what gets rendered on your web page/smartphone.
- style.css: A simple CSS file to add styling to your content.
- script.js: To add interactivity and make your content dynamic by adding some Javascript.
- assets: This is a folder where you can add all your images, audios, videos, 3D objects and many more which you want to display in your AR/VR scenarios. Glitch creates a CDN for these assets and improves the speed of delivery.
When you click on the project name on the top-left corner of the page, you get a dropdown with the option Remix Project. This allows us to take an existing project and create its clone for our account. So, no need to copy/paste each and every file again.
Inside your index.html file add the following lines:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- import Aframe inside the project -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"> </script>
<title>Hello World!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<a-scene>
<a-box color="blue" depth="0.5" height="0.5" width="0.5">
</a-box>
</a-scene>
<!-- include the Glitch button to show what the webpage is about and to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js" defer></script>
</body>
</html>Add this line to include Aframe inside your project:
<script src=”https://aframe.io/releases/1.0.4/aframe.min.js"></script>Note: At the time of writing 1.0.4 is the latest stable version of Aframe.
You will see a blank screen for now. This is because we need to set the position of our box to a position where it shows up in front of the camera in the scene. To do that, add a position component to <a-box> primitive.
<a-scene>
<a-box color="blue" depth="1" height="1" width="1" position="0 0 -4">
</a-box>
</a-scene><a-scene> is a placeholder for an Aframe scene. All entities are contained within a scene. You can read more about it here.
Primitives are <a-entity>’s under the hood that:
- Have a semantic name (e.g., <a-box>)
- Have a preset bundle of components with default values
- Map or proxy HTML attributes to component data
Now click on Show →In a New Window.
You can see a blue box now. Also, there is a VR button on the bottom-right corner. Press that and kaboom you have your first VR scenario ready !!
Basics of Position:
To move your asset left/right and top/down change your x and y coordinates respectively.
The camera is positioned at (0,0,0) by default so to view your asset, your z coordinate must be negative (i.e away from the camera).
Task #1: Just play around with the options available in Glitch and try making other primitives like <a-circle>, <a-cone> and so on. Also try setting rotation and scale for your shapes.
Next, we’ll learn about Entity-Component Architecture in Aframe.
See you in the next one.
YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.
