helloworld
Running
# Requires Node and npm
git clone git@github.com:Lucifersan/helloworld.git
cd helloworld/src
(npm install & yarn install)
(npm run dev & yarn run dev)
# Click link in terminal window
Inspiration
We've seen tons of amazing and beautiful websites (usually portfolios or graphical side projects) made with three.js and wanted to see if we could likewise experiment with it. We also like making informative and interactive hackathon projects rather than tried-but-tired ideas like the millionth to-do app or chatbot. We chose a vaporware/cyberpunk aesthetic because we liked the vibes, and that's about it.
Function
The current website doesn't have all the functionality we were hoping for. The idea was to have a globe you could spin by scrolling or clicking and dragging, with icons of landmarks for certain large cities. We wanted to make it so you could click on any landmark icon and have it zoom into that model, displaying a more detailed model as well as information about it, the city it is located in, and some resources for planning a trip to that monument or city. The goal was to make it as pretty, but keep it functional. Some websites are nice to see but unusable because of animations, and we didn't want ours to be like that.
Process
We used the three.js library and blender for all the models and for the website overall. We made the entire thing in Node with JavaScript since the team was familiar with that. Half of the team worked mostly with the blender models and visual design and the other half did much of the initial web dev work.
Challenges
We tried using GitHub to collaborate, and it turns out that with JavaScript, having different development environments set up means many instances of "why does it work for you and not me" which slowed us down significantly. Most of us spent at least a few hours trying to make code that ran on someone else's laptop run on our own, and then sometimes it wouldn't run on theirs anymore so they'd have to spend a couple hours fixing it (or fail). This is something we hope to fix in the future. Possible Docker usecase?
Accomplishment
None of us knew how to use three.js or blender going into this, and we were very inexperienced with Node. Getting a (mostly) working website together with JavaScript was really cool, and hopefully, as we do more similar projects in the future, we will get more and more familiar with frontend development.
Learning
GitHub is difficult to use if you've never used it before, especially for collaboration. three.js was painful to learn and use, but helped elevate our website ui. We tried using react because we had experimented with it in a previous project, but were unable to integrate it with Vite. More importantly, we learned not to start a JavaScript project without checking with everyone about setup and dependencies. The lock files for our project weren't enough, especially when some team members weren't clear on what to push to GitHub. More learning and planning between hackathons next time could help with our collaboration.
Next Steps
The website is still very unfinished compared to the latest evolution of our original concept. After fixing it up to work like how we described in the "Function" section above, we want to also add in more and more cities/attractions and possibly add more features relating to trip planning and cultural education. Our goal is not only to have a cool website with pretty models of famous places, it is to have a website that can teach people cultural context they may not have known before. Whether it's a lesser-known monument in a less tourist-marketed part of the world or just something about a destination that they may not have known before, it is our goal to increase cultural awareness when traveling abroad with fun.
Log in or sign up for Devpost to join the conversation.