Are you tired of the traditional Christmas card? Or, do you have friends who you would like to wish a Merry Christmas, but you don't know where you would send a Christmas card to?
Have no fear! This year, how about you wish your friends and family a Merry Christmas in a new, out of this world way...
How about you send them a VR scene (which you can view in the browser, even if you don't have a VR headset!)?!
Last year, I made a Christmas VR scene as part of a competition at work (see the Christmas 2020 repos in my profile for that and its variations). I found that I liked making VR scenes a lot, so I decided to do it again this year, this time with a Christmas space theme (I'd just done the Codecademy course which had the solar system project, so why not build up on that).
This year, I wanted to up my game a little, so I've made most of the 3D models in the scene, and I've decided to get a bit more animation in.
This project uses a framework called A-Frame, which you can use to create web VR scenes. This is imported via CDN in the HTML file to get access to the framework's bits and bobs. This project also uses Vanilla JavaScript to generate the planets, rings, asteroids, strings, as well as handling the directions for the asteroids to go and any customisation that the user employs.
This project is really easy to install if you wish to do so:
- Clone this repository https://github.com/cBridges851/christmas-2021.git
- No additional setup needed, just navigate to the files you wish to look at :).
-
If you don't wish to clone this repository, you can simply view the scene here https://cbridges851.github.io/christmas-2021/
-
If you have cloned this repository, you can double click on index.html in the file explorer, or open index.html via a live server/
-
To change the name on the scene, add or change the query string parameter for
name. E.g. https://cbridges851.github.io/christmas-2021/?name=GitHub -
To toggle whether sound is played in the scene, add or change the query string parameter for
sound. E.g. https://cbridges851.github.io/christmas-2021/?sound=false or https://cbridges851.github.io/christmas-2021/?sound=true. It's true by default, so sound will play. -
This is what the scene looks like:
These are the following models I made myself:
The TARDIS was remixed from https://www.tinkercad.com/things/e4CxJPCXva5-tardis, thank you Manone MelonHead if you see this!
The textures of the planets are from Codecademy.
The source of the background music is: https://www.nasa.gov/wav/123163main_cas-skr1-112203.wav.
This will play, unless you've set it not to in the URL, when you click on the scene or press a key.
This project uses the MIT License