Creating a Virtual Reality Holiday Card: An Introduction to a-frame
A Holiday Special and Introduction to a-frame
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:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Holiday Card</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!--All the code will be here-->
</a-scene>
</body>
</html>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!
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:
<a-sky color = "#CCC6E8"></a-sky>When you run the code, the result should be the following:
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:
<a-box height="25" width="200" depth="100" position = "0 -16 -10"></a-box>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.
<a-box src="YOUR_LINK_HERE" height="25" width="200" depth="100" position = "0 -16 -10"></a-box>If you added the same image as I did, the card would look like the following:
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:
<a-cylinder src="https://thumbs.dreamstime.com/b/red-white-stripe-pattern-seamless-line-background-christmas-gift-wrap-fabric-textile-tile-wallpaper-163538152.jpg" radius = "0.5" height="10" position = "0 2 -10" ></a-cylinder>
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.
<a-dodecahedron radius = "1" position = "0 7 -10" color = "#86A9E1"></a-dodecahedron>
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:
<!--Christmas Left Pillar-->
<a-cylinder src="https://thumbs.dreamstime.com/b/red-white-stripe-pattern-seamless-line-background-christmas-gift-wrap-fabric-textile-tile-wallpaper-163538152.jpg" radius = "0.5" height="10" position = "-8 2 -10" ></a-cylinder>
<a-dodecahedron radius = "1" position = "-8 7 -10" color = "#86A9E1"></a-dodecahedron><!--Christmas Right Pillar-->
<a-cylinder src="https://thumbs.dreamstime.com/b/red-white-stripe-pattern-seamless-line-background-christmas-gift-wrap-fabric-textile-tile-wallpaper-163538152.jpg" radius = "0.5" height="10" position = "8 2 -10" ></a-cylinder>
<a-dodecahedron radius = "1" position = "8 7 -10" color = "#86A9E1"></a-dodecahedron>
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.
<a-sphere radius = "2" color = "white" position="0 -3 -8"></a-sphere>
<a-sphere radius = "1.5" color = "white" position="0 -1 -8"></a-sphere>
<a-sphere radius = "1" color = "white" position="0 1 -8"></a-sphere>
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.
<a-cylinder color = "#804004" position = "-2 0 -8" rotation="-135 -90 0" radius="0.15" height = "2"></a-cylinder><a-cylinder color = "#804004" position = "2 0 -8" rotation="-45 -90 0" radius="0.15" height = "2"></a-cylinder>
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:
<a-torus color = "black" radius-tubular="0.1" position = "0 1.7 -6" rotation="-90 0 0" radius="0.6"></a-torus>
<a-cylinder color = "black" position = "0 2.2 -6" radius="0.6"></a-cylinder>
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:
<a-cone color = "orange" position = "0 1 -6" radius-bottom="0.1" height = "0.75" rotation = "90 0 0"></a-cone>
Finally, I added eyes, a face, and buttons with small, 0.1-radius black spheres.
<!--Snowman Eyes-->
<a-sphere radius = "0.1" position = "-0.25 1.25 -6" color = "black"></a-sphere>
<a-sphere radius = "0.1" position = "0.25 1.25 -6" color = "black"></a-sphere><!--Snowman Smile-->
<a-sphere radius = "0.1" position = "-0.25 0.85 -6" color = "black"></a-sphere>
<a-sphere radius = "0.1" position = "0 0.8 -6" color = "black"></a-sphere>
<a-sphere radius = "0.1" position = "0.25 0.85 -6" color = "black"></a-sphere><!--Snowman Buttons-->
<a-sphere radius = "0.1" position = "0 -0.5 -6" color = "black"></a-sphere>
<a-sphere radius = "0.1" position = "0 -1 -6" color = "black"></a-sphere>
<a-sphere radius = "0.1" position = "0 0 -6" color = "black"></a-sphere>
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:
<a-entity scale = "10 10 5" text="value: Happy Holidays!" position="3.35 3 -3"></a-entity>
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
- Repl: https://merrysquarecharacter.genericp3rson.repl.co/
- A-frame Documentation: https://aframe.io/docs/1.1.0/introduction/
Check out more tutorials like this live or feel free to discuss
- LinkedIn: https://www.linkedin.com/in/shreya-chaudhary-/
- Twitch: https://www.twitch.tv/wisempowerment
- Discord: https://discord.gg/TMtnP8J
