Creating a Virtual Reality Holiday Card: An Introduction to a-frame

A Holiday Special and Introduction to a-frame

Shreya Chaudhary
Jan 4 · 8 min read

Objective

We are in the midst of the holidays and yet we are forced in our houses due to the pandemic. However, this year, I decided to start a new tradition: I created a VR card. While it’s far from being a place for interaction, like the Oasis or your choice of science-fiction universe, it’s been a nice way to create something small to share with my friends and family.

In this lesson, I’ll introduce the basics of a-frame to create a simple, in-browser holiday “winter wonderland” card using only primitive types (and text). Here, you’ll learn how to create a sky, how to create basic 3-D shapes, how to make images from online the background of the shapes, and, finally, how to add text.

Step I: Set Up

First, we’re going to need to add aframe to our HTML to begin. I created the project on Repl.it to easily send to my friends and family. Next, I imported aframe to the HTML by adding the following script tag:

Next, add the tag <a-scene> in the body. This is where I will add all the VR-related code. I deleted style.css and index.js; the card was fully created with HTML. Now, in index.html, the full code should be:

When run, our result should be an empty screen with a “VR” button on the bottom right corner. If you can see the button, congratulations: you have successfully imported aframe!

Card after Importing A-frame

Step II: Add a Sky

First, we need to add a background colour. After much searching and adjusting, I ended up selecting a light blue background, #CCC6E8. Between the <a-frame> tag, add the sky tag:

When you run the code, the result should be the following:

Card with Sky

Step III: Add a Base

Next, I created the base of the winter wonderland scene. I started with an <a-box> and experimented with the xyz coordinates and dimensions till it was perfect. For the position, the x, y, and z coordinates are separated by spaces. My final result was the following:

Next, I wanted to add a snow texture. To do that, I searched the web and found an image of snow I liked, then I added the attribute as the src. The link was incredibly long, therefore I’m not adding it to the blog. You can look at the Repl in the resources to find the link I used.

If you added the same image as I did, the card would look like the following:

Card with Base

Step IV: Create a Christmas Pillar

I ended up starting fairly simple: a Christmas-themed pillar. This required two shapes: a cylinder and a light on the top, which I made a dodecahedron.

First, I adjusted the cylinder’s dimensions till I was satisfied. Since this is a cylinder, the dimensions to worry about will be the radius and height (along with the position). Note that the user starts at a position of 0, 0, 0, therefore the z direction should be negative to make the component visible. Next, I searched the web to find this photo to be the wrapper for the candy cane base. This is the result of the cylinder:

Cylinder Card

Next, I wanted to add a light to the top of the cylinder. To do this, I used the dodecahedron. I decided to make it a light blue, then I moved it to the top of the cylinder.

Full Christmas Pillar Center

Finally, I decided that I wanted two of the pillars, one on the left and one on the right so I could create a different centerpiece. To do this, I changed the x position to 8 and -8, resulting in the following:

Card with Both Pillars

Step V: Base of the Snowman

For the centerpiece of the card, I decided on a snowman. To start off, I needed to create the base. My base consisted of three white spheres increasing in radius and placed on top of each other as shown below.

Base of Snowman

Step VI: Snowman Hands

Next, I added the branch hands for my snowman. To do this, I created a brown cylinder. However, since snowman hands aren’t up and down, I had to add rotation. Rotation consists of the x, y, and z rotation in degrees. I created two hands: both had a -90° rotation in the y-direction, but the left hand had a -135° x-direction rotation and the right had a -45° x-direction rotation. I adjusted the position and decreased the radius and increased the height.

Snowman with Hands

Step VII: Snowman Hat

Next, I added a hat to my snowman. This consisted of a cylinder like the past examples plus a torus (a donut-shaped object) for the rim. Both of these were black. For the torus, I had to adjust both the radius of the entire torus and the radius-tublar of the tube section of the torus. After adjusting the position, I resulted with the following:

Snowman with Hat

Step VIII: Snowman Accessories

Finally, after getting the major components of the snowman, I added a face and buttons. First, I added a carrot nose with a cone. For the cone, I had to adjust the radius-bottom to make a narrow nose. I made it orange and adjusted the height, position, and rotation to fit it on the snowman:

Snowman with Nose

Finally, I added eyes, a face, and buttons with small, 0.1-radius black spheres.

Snowman with Accessories

Step IX: Message

Finally, I added a message using a-entity. For this, the size is determined by the scale and the message is added through text="value: ENTER_MESSAGE_HERE". I adjusted the scale and position accordingly, and resulted with the following:

Final Card with Words

Step X: Next Steps

If you reached this point, congratulations! You just created a Christmas card to share with your family and friends! Now, I challenge you to add more to this, including presents and a Christmas tree. Since this is VR, if you have VR glasses, look at your card in VR-mode and make adjustments accordingly. Try to make this card your own and add what’s important for the holidays to you, and share it with your friends and family!

Resources

Note: All images are by the author unless otherwise noted.

General Resources

Check out more tutorials like this live or feel free to discuss

From Confusion to Clarification

Shreya Chaudhary

Written by

Nerd For Tech
Shreya Chaudhary

Written by

Follow for projects and lessons on graph technology (with TigerGraph), VR, AI, and more! Connect with me: https://www.linkedin.com/in/shreya-chaudhary-

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store