DEV Community

Cover image for How to build a WebVR game with A-Frame

How to build a WebVR game with A-Frame

Adi Polak on April 11, 2019

🐦 Follow me on Twitter, happy to take your suggestions on topics. 🕹️ Play the game 💻 Git repository ➡️ A few months ago, I received my first MR h...
Read full post
Collapse
 
rchovatiya88 profile image
Ronak Chovatiya •

Thanks so much! this is awesome - I've been working on this project http://ganeshvr.glitch.me/ but still learning on how to addEventListeners and being able to add javascript - this helps clear up so much! 🙏

Collapse
 
adipolak profile image
Adi Polak • • Edited

Hi Ronak, thank you so much for your kind words. I am happy I was able to help you.
As I am highly impressed with your website, I have some questions for you. The first one, what is Ganesh Festival? it seems very happy and cheerful ( I hope I am not mistaken here). the second one is how did you make the beautiful motions of those purple stars? will you be sharing it on github?

Collapse
 
rchovatiya88 profile image
Ronak Chovatiya •

Hi Adi! 🤗

   Every year thousands of ppl in india gather together to celebrate the birth of Lord Ganesh. Typically it last 9 days and usually some one from the neighborhood would get a statue and they will decorate the statue have sweets and  there will be evening prayers and celebrations.
  • The whole idea was sort of bring that festival experience in VR.

p.s - it is networked so if two or more ppl visit the link at the same time - you can see each other's avatar :)

I don't have GitHub yet - I just put it together on glitch.com

  • The stars are particle component from a-frame .
    • https://www.npmjs.com/package/aframe-particle-system-component The official docs are here
    • https://aframe.io/docs/0.9.0/introduction/entity-component-system.html#including-the-component-js-file The Networked so its multiplayer experience
    • https://www.npmjs.com/package/networked-aframe

Hope it helps :)

Collapse
 
adipolak profile image
Adi Polak •

Update
Apparently aframe 0.9.0 was broken early on Dec 2019.

To fix it, use 0.9.2 or 1.0.0 version insted:

Old:

 <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>

New:

 <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
Collapse
 
emlautarom1 profile image
Martín Emanuel •

Looks intresting. Thanks for sharing!

Collapse
 
adipolak profile image
Adi Polak •

Thank you, Martín! Will you give it a try ? :)