Aframe is a javascript library which dependent on threejs and also supports animejs. All these three javascript libraries are useful for you to develop 3D/AR/VR experiences. Aframe js is useful for beginner who wants to quickly develop something in 3D VR or AR.
How do all these things work?
It’s very easy to answer and explained to you. You have browsers such as google chrome, firefox, etc. This browser gives you web XR Device API which is deal with your device driver and renders the 3d environment for you.
Now we have the choice to directly interact with web XR API or we can use libraries such as Babylon js or threejs. The obvious thing is we will go with the library rather too deal with API.
Now again we have aframe js which deals with threejs and allow us to make 3D worlds with HTML and its magical component system. And that’s it, you can get more details from their official sites from the links given below.
Let’s Create something first
It is always a great thing to test your learning to learn faster. Just copy and paste the example code and run it. After the code is successful, you need to implement some changes. I also give some basic challenges just below the examples. Complete your challenge and comment solution in the comments section.
Aframe Example 1 – Basic aframe shape example
Using aframe entity you can easily create, scale and rotate the 3D object. You can also apply the material to the object. You can load 3D models, and play their animation or you can make some basic animation with aframe component. It’s a long way to get there but don’t worry I’m with you to get you there.
Just copy the below code create an HTML file and run the HTML file in the browser that’s it. you are all set.
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
<a-box position="1.13146 0.5 -3" rotation="0 45 0" color="#4CC3D9" material="color: #d94a4a" geometry=""></a-box>
<a-sphere position="-0.85371 1.25 -5" radius="1.25" color="#EF2D5E" material="color: #90479a" geometry=""></a-sphere>
<a-cylinder position="-2.75436 0.48975 -3" radius="0.5" height="1.5" color="#FFC65D" material="color: #ad99ff" geometry="height: 5"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff" geometry=""></a-plane>
<a-sky color="#ECECEC" material="color: #000000" geometry=""></a-sky>
<div class="a-loader-title" style="display: none;"></div></a-scene>
</body>
</html>
Let’s Learn Something from Example
if you are unable to run code plese comment below I will guide you. For a more advanced aframe example we need to create a live server to run code. But for this example, you do not need to install a live server.
What is Aframe entity?
Aframe entity is like div element we use in HTML. The entity provides houses to 3d objects. Similar to HTML attributes entity has an attribute that will be useful for aframe component system.
Syntex : <a-entity></a-entity>
What are aframe primitives?
Primitives are similar to an entity or we can say primitives are also an entity.<a-box></a-box>, <a-cylinder></a-cylinder>, <a-sphere></a-sphere>etc are the primitives.
What is aframe componant system?
To offer look and functionality, components can be added to entities as reusable modules. Some core component is available in aframe and also we can develop our custom component. During custom component building we need to learn some basics of threejs.
Aframe Challange 1 – Basic aframe shape example
- Comment below who made the aframe and where they are from.
- List out all primitives available in aframe. ( Think how can we make our custom primitives )
- Add all entities to the scene. Position each primitive such that it will not collide with each other.
- Make box by plane primitive.
First day Pro Tip
You can use aframe js inspector tool to quickly create and debug your scene. To run the inspector tool just press ctrl+Alt+I.
Thank you see you soon.
1 thought on “Threejs Aframe Js Basic Scene Example – 1 Basic aframe shape”