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?

We’ll use the primitive <a-sky></a-sky> to create the background. Use a hex color picker like this one to find the color of your sky. I’ll make mine blue.

Aaaaaaaaaaand the final result is:

“Yawn”

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:

<a-sky src=“https://i.imgur.com/CQEF0P2.jpg”></a-sky>

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.

I’m going to head on over to pixabay to find some more images, and then load them into an image hoster.

  1. Find image
  2. Load into image hoster
  3. 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

3…

2…

1…

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.

Cheers.

Documentation and tutorials on Python, Programming, and Data Analysis.