World Building: Adding Background to your VR World, and Giving Texture to your Shapes
In the last lesson, we learned how to get started with A-Frame with just a few lines of code in an HTML document:
Today, I’m interested in creating a background for my webVR world and adding texture to my shapes. This will be a quick and easy one. Let’s begin!
We already know how to set up our HTML document. Let’s go knock it out, again.
Type it out. No copy / pasting.
Now, let’s add <a-scene></a-scene>:
Alright, our blank canvas is set. We’re here to create a cool background, right? So let’s add a not-cool background first, and then make it cool. Cool?
Aaaaaaaaaaand the final result is:
We can do better than this.
Head on over to Pixabay to find a free photo to transform into your background. Or, if you already have a photo you want to use, skip right to uploading your photo to a free image hoster like this one.
Copy the link to your image, and link it to your primitive like so:
Refresh your work and we are magically immersed into a new WebVR world…
Now let’s add some things!
I’d like to add a few spheres to this magical world. And I’d like my spheres to resemble birds.
- Find image
- Load into image hoster
- Add image source as <a-asset></a-asset>. I’m calling my asset an “angry-bird”, and I’m going to add the image as a wrap for a geometric primitive: <a-sphere src=“#angry-bird”></a-sphere>. See below:
Refresh your code and we get:
Now, I’m going to add a few more image assets. Here is the code:
See if you can predict what is about to happen when I refresh my page in
If you need help positioning your elements on your page, don’t forget to inspect your webVR page with crtl + alt + i:
That’s it! We just learned how to create a background and how to give our primitive elements an image wrap. Cool.
I’ll be back in a few days to tackle some more complex stuff: like working beyond primitives with the entity-component architecture.