EcoEchoes

Inspiration

Climate change is a major issue impacting everyone. Extreme weather events have been occurring at higher frequency. In the past month, our team members experienced two heat waves. We wanted to inform people of the causes and effects of climate change through an interactive website and provide ways to reduce one’s carbon footprint .

What it does

The website informs the user of some of the major issues contributing to climate change and when scanning a marker in different sections of the website, a 3D object will appear with a text bubble with additional information on impact. For example, if the polar bear icon is scanned, facts on how climate change impacts the polar bear appears.

How we built it

We created a website with Wix and created an AR web app. The web AR app was created by leveraging existing libraries such as AR.js and a-frame.The libraries allowed us to generate markers, and when recognized, will make the corresponding 3D model appear. Custom interactions with the 3D models were implemented using javascript, html, and CSS. To generate the 3D model, we leveraged objects generated by echo3D, an EcoHacks sponsor.We downloaded the object files from echo3D and included it in our source code, and then mapped the object to the corresponding marker image.

Challenges we ran into

In the beginning, one challenge we faced was that there was a lot of climate change information out there and we weren't sure what direction to take with all the information. Another challenge that we encountered was during the implementation of the AR animals with Echo3D where there were issues displaying short informative paragraphs along with the model when scanned.

Accomplishments that we're proud of

This was the first hackathon for half the team. We are proud of being able to work together successfully to build a project within the designated time frame. We are also proud of learning how to use Velo by Wix to add small APIs that we believe contribute to the interactiveness of the website.

What we learned

We learned how to collaborate together as a new team and gain technical knowledge through workshops and other resources and apply the knowledge learned to build a project.

What's next for EcoEchoes

The next step would be to add more information with regards to the effects of climate change, ways someone can help make a change, and improve the AR web app. There are a couple improvements that we can make for our AR web application, currently we are storing all the object files within our source code. In the future we can look into the API provided by echo3D, and can reduce our app size since the object files will be pulled in through the API. Currently we have 4 markers that are recognized by the AR web app, and in the future we can increase the number and add additional markers as well as additional 3D models.

Built With

• ar
• css
• echo3d
• github
• html
• javascript
• wix