In one of my previous posts I’ve wrote about ‘metaverse’ and its hidden costs, and if you have read and there is still sense to build your own new digital world — then let’s start from your first scene.
Let’s start with the basics: First you need some level of understanding of HTML and even better understanding of JavaScript and graphic vectors in general — so you can make your life easier when building the world.
We will use A-Frame library which is a wrapper over Three.js and for most basic stuff it makes easier to add objects within the world, while when you get to the more complex part, using Three.js would do the job.
You can get more familiar with the library and what is A-Frame at the link below
Now if you are a graphic web designer or someone who had worked with pixel/points as measurements, let’s get clear there are no pixels here, everything is x,y,z within a x,y,z position/location.
So within your favorite code editor, create a new file called index.html where you will put the following code:
save the code and then open the file in browser. You instantly will be able to see couple of elements displayed on the screen, such as: box, ball, cylinder a flat green surface and grayish color around them.
probably it should be good to use some server for hosting static content, just to avoid any browser limitations related to https, or content policy etc.
Now lets explain — what is what.
<a-scene> tag or known as Scene is part of the core features and it is actually the main content block in which everything is rendered related to the VR scene. If you put things outside this tag, then those items won’t be visible on the screen, but sometimes that is what we need.
<a-plane> tag is the flat green layout (floor) that you see on the screen and often used as ground point for the screen, so we can give to the user perspective of what is up or down etc. It is part of the primitive types of the A-Frame library.
<a-sky> tag is the grayish color around the scene which as its name says serves as sky for our world, and it is a 360 sphere (or simply put a ball) round this digital world that we are creating.
Then we get to the geometry figures such as <a-box>, <a-sphere>, <a-cylinder> and there are others not mentioned, which are different type of shapes displayed within the scene and they play important role of what we will build further. Each of these elements accept different attributes that can be assigned to them, but the most important ones are the position, rotation and color (at least for now), where the position specifies at which X, Y, Z coordinates the element should be placed (0,0,0 is the center of the scene), then rotation specifies the actual rotation of the element where same X,Y,Z values are provided with values between 0–360 for degrees, and the color attribute, which accept hex color value or color name e.g ‘red’ to fill the element. The width (X) and height (Y) attributes are used with this primitive shapes to define their size, plus additional attribute called “depth” which uses the Z axis.
If you did everything right, you should get a result as per the image below.
Play around by adding new elements to the scene, change their properties and see how they are aligned on the screen.
At the following URL you can find more details about all primitive elements and their properties:
Follow me and stay tuned for the next posts related to a-frame and building of your digital world.
