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

A Holiday Special and Introduction to a-frame

Objective

Step I: Set Up

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<!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>
Card after Importing A-frame

Step II: Add a Sky

<a-sky color = "#CCC6E8"></a-sky>
Card with Sky

Step III: Add a Base

<a-box height="25" width="200" depth="100" position = "0 -16 -10"></a-box>
<a-box src="YOUR_LINK_HERE" height="25" width="200" depth="100" position = "0 -16 -10"></a-box>
Card with Base

Step IV: Create a Christmas 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 = "0 2 -10" ></a-cylinder>
Cylinder Card
<a-dodecahedron radius = "1" position = "0 7 -10" color = "#86A9E1"></a-dodecahedron>
Full Christmas Pillar Center
<!--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>
Card with Both Pillars

Step V: Base of the Snowman

<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>
Base of Snowman

Step VI: Snowman Hands

<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>
Snowman with Hands

Step VII: Snowman Hat

<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>
Snowman with Hat

Step VIII: Snowman Accessories

<a-cone color = "orange" position = "0 1 -6" radius-bottom="0.1" height = "0.75" rotation = "90 0 0"></a-cone>
Snowman with Nose
<!--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>
Snowman with Accessories

Step IX: Message

<a-entity scale = "10 10 5" text="value: Happy Holidays!" position="3.35 3 -3"></a-entity>
Final Card with Words

Step X: Next Steps

Resources

Student with a fascination of CS and AI, especially in the health tech. Connect with me: https://www.linkedin.com/in/shreya-chaudhary-

Get the Medium app

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