Learning A-Frame: Adding Image Textures
Tutorial featuring heart-pumping Earth and TweenJS.
Textures are the way we dress the objects in our scene, their skin layer.
Applying an image texture is very simple. We can apply it to every entity, no matter their form.
Getting Started
Let’s say we have <a-box> entity inside our scene.
We can apply the texture to our box by copying the url of the image we want to use, and then pasting it as a value of the src (source) attribute. Just like below:
Also, I suggest that you remove the color of your entity before pasting the image texture — that way the texture is not modified by the red of the box. Remember that the default color for an entity is white.
After applying the image texture, you get this result:
If you don’t like that particular texture, there are much more assets that you can try. You can explore a great collection of them here.
Some examples of other image textures on our box:
That’s pretty cool if you ask me!
Creating Earth
If you want to recreate planet Earth, you will need the texture above, (also part of the collection of a-frame sample assets.)
Then you create <a-sphere> entity and paste the url of the image texture in the src attribute just like before. Easy right?
As you see, we’ve also added a segments-height attribute to our sphere. This is used to smooth out the edges of our Earth, to make the geometry rounder and less “pointy”. We can play around with the value until it’s perfect (the lower the value, the “pointier” the sphere)
That’s it! You now have a full, round, beautiful planet Earth that you can add to your scene, animate and even get in VR! And when combined with animations and a skybox background, it has a pretty cool effect:
If you guys liked this post, you can also check out my full video tutorial.
Thanks for reading :)
