The <a-entity> tag is the basic building block of Aframe, therefore it is important to understand how it works. The <a-entity> tag (can I just say entity?) is what you are going to use to put anything into your scene, from the basic cube all the way to a cursor. The first thing we want to worry about, even before thinking about potion or rotation, is the geomety property.
Geometry:
This is how you change what your entity looks like. You can leave this blank if you are using it to group other entity tags together or as a cursor, but for the most part you want a physical object. The way you set this is with the geometry=”” property. There are a lot of ways you can choose what geometry you want.
Primitives:
The easiest method is rather, primitive (sorry, couldn’t help it) fist you set the primitive property as shown below
geometry="primitive:insertnamehere"
The primitives you can choose from are:
box circle cone cylinder dodecahedron octahedron plane ring sphere tetrahedron torus torusKnot triangle
Then you set the attributes of the primitives like this:
geometry="primitive:box; width: 1; height: 1; depth: 1"
I’m using the box as an example because it is the simplest and all of the other primitives have their own unique properties like in the case of a sphere, it has a radius property not used in a box, but it is used in a cylinder, and don’t ever get me started on torus knots. I don’t have space here to explain every single primitive’s properties so you are going to have to refer the the documentation here till I come up with my own article.
<a-entity geometry="primitive:box; width:1; height:1; depth: 1" ></a-entity
Custom Geometry
The second way we can set geometry is by making our own, we can do this by using some java script to set the position of every single vertex you wan’t I can’t recommend this method though. It’s over complicated, hard to understand, and is tedious to program, so I’m once again going to refer you to the docs. But If you still want custom geometry there is a much better way and that is by importing 3D models.
Importing .obj or .gltf files.
For game designers this is going to be your go-to format since it allows complex shapes and good graphics. The only downside is that since Aframe is web based, every time someone goes to your web page they have to re download all of your 3d files and textures. So use them as little as possible since any web page that takes more then 7 seconds to load isn’t going to be that popular. And for that reason I am going to only show the way to import .gltf files because they load faster and have support for cool features like included animations, and don’t worry there are plenty of free obj to gltf file converters on the internet (just be careful).
The first thing you are going to need is an <a-assets> tag to put all your, you guessed it, assets, and iside that we put an <a-asset-item> to hold our model.
<a-assets>
<a-asset-item id="model" src="/path/to/model.gltf"></a-asset-item>
</a-assets>
We could do all this inline but using an assets tag we make sure they are all loaded at the same time so your program isn’t lagging every time you add an entity. We then create the actual entity:
<a-entity gltf-model="#model">
And that’s all there is to it, I wont go over animations here, that’s a topic for another article.
Position and Rotation:
Alright, you made your entity look like something, but whats the point if it isn’t looking like something in the right place? We do this by setting the position and rotation properties like this:
<a-entity position="x y z" rotation="x y z"></a-entity>
It just something to keep in mind is that in Aframe y is up and down, z is closer and farther, and x is the same, for most things I have programmed including 3D printers z is up and down, and it really threw me off at first.
It may look like all there is to it and you could stop here but there is another property of entity’s that could be very useful when programming movement, and that is grouping. Lets imagine you are programming a game and in this game you have a person, this person is fully articulated and has fully poseable joints, now the moment would be hard to program because when the body moves everything else moves, when an arm moves the hand and fingers also moves and rotate. This is very time consuming to program and takes a lot of trig. lucky because of the nature of HTML we don’t have to, all we have to do is this:
<a-entity> //body
<a-entity></a-entity> //head
<a-entity> //upper arm
<a-entity> //lower arm
//hand here, you get the idea
</a-entity>
</a-entity>
</a-entity>
The beauty of this is HTML wasn’t made for 3D but it works so well. When one entity is inside another entity it copies the rotation and position changes of the first but still can move on its own. the problem with this is that to find the actual position of one of theses entities within an entity within an entity we would still need to do a bunch of trig since the position property of that entity wouldn’t be its actual position within the scene. But we can use a workaround using the under the scenes three.js to find its true location just like this:
document.querySelector('#entityId').sceneEl.object3D.getWorldPosition();
Or to get rotation:
document.querySelector('#entityId').sceneEl.object3D.getWorldRotation();
And there you go all you need to start using a-entity’s effectively, if you found this useful maybe check out the other articles in this series, that’s all folks!
