Implementation Phases vol. 1
As for the implementation of the interactive prototype, we’ve been looking into different kinds of options of putting it together.
We were considering Figma, or other similar (free) UI/UX-design oriented online service. However, it turned out that we’d grow out of them pretty quickly.
Thus, we decided to get our hands dirty with some coding.
There’s a bunch of frameworks and libraries out there to use; thus, we took our time to look into the options and choose our tool(s).
First iteration: Three.js
We got our “Hello World!” to appear on the screen fast.
However, the distance between having a cute little floating cube, and a globe-like animation with interaction, is quite big. As we would have had to start from scratch, due to no previous experience, we didn’t go for this library.
Second iteration: WebGL + React.js
We found a really nice open source “lightweight version of Google Maps“, which we were about to use as a starting point for our project, embedding it to a website. Though, we considered using this globe API quite difficult; and, also, a little outdated.
Third iteration: React.js + Node feat. Three.js
So far it seems promising to stick to tools that we’re already familiar with – which, in this case, are React and Node. Also, React fits the nature of the project, as it’s made for building interactive web-applications. Moreover, it’s backed up by many convenient UI/UX libraries.