Inspiration
Many coral reserves provide a real life interactive experience with coral. As many people are unable to experience this or are unable to live near these locations, we thought we would replicate this experience virtually. Allowing people to interact with coral with this website will foster a greater connection and greater action.
What it does
We created a blog section in which people can join a community that encourages friendly practices to save coral. This tight knit community will not only allow people to share their coral friendly actions, but also allow the communities who are most affected by coral, i.e. people who rely on coral's natural seawall and fishing, to share how the state of coral affects them. Along with that we made VR "game" for people to explore and clean up the ocean!
How we built it
We built the VR section using A-frame plus JavaScript and HTML. With this we were able to build interactive 3D models and also image structures to create the VR experience. While in the website spectrum, we worked with JavaScript and HTML/CSS.
Challenges we ran into
A-frame posed a lot of challenges. Figuring out how to manipulate the A-frame HTML with JavaScript was difficult but eventually we figured it out using inner HTML. Learning the vast library and objects of A-frame was also difficult as there aren’t many resources on the web to learn from. However, after many tutorials and stack overflow we were able to pull it altogether. Trying out parallax scrolling for the first time on a website seemed like a daunting task and it was at first. We couldn’t understand how to get the text to scroll over the image. Luckily with the help of a YouTube video- it all just clicked and from there it was smooth sailing
Accomplishments that we're proud of
After finishing our project, we are proud to get Qoom (A-Frame specifically) working as it was our group's first time touching these tools. Getting the parallax scrolling to work, was a great success as it doesn't look weird compared how we first started it!
What we learned
We never learned A-Frame before nor was parallax scrolling. We had to Google up Stack Overflow and YouTube videos to help us. We are glad we pull through as also learned that taking breaks and coming back gives us the best ideas!
What's next for Salvare Oceanum
Salvare Oceanum will try to host this website in its own domain (No Qoom nor Glitch)! We will also try making it more public! Expand our VR world!! And also using Tableau Public to convince people to save the world!
Built With
- aframe
- canva
- css3
- glitch
- html5
- javascript
- qoom
Log in or sign up for Devpost to join the conversation.