The pandemic has been very tough and straining on our lives, and thus many of us are looking to take a break from everyday life and go on vacation. There are so many places to chose from that it can be difficult to make a decision. That's where Explore With Tech comes in. Our website fully immerses you in some of the nicest vacation spots in the world so you get a better idea of where you want to go for vacation! Also, many people are not yet comfortable with traveling, so Explore With Tech provides an interactive experience to bring the vacation to you!
What it does
Explore With Tech uses THREE.js to provide 3-D models of some vacation spots around the world. You can interact with these models and zoom in to get a 360-degree view of the location.
How we built it
Explore With Tech was built from scratch using HTML, CSS, SASS, JS, and THREE.JS (for the 3-D models). The domain name was gotten from Domain.com, and the website itself was hosted onGoogle Firebase.
Challenges we ran into
Getting images that were compatible with the 3-D box was definitely hard to come across. They had to be in a skybox format with all edges seamlessly merging into their neighbors on all sides. The original plan was to find images of beaches and try to map them ourselves, but we quickly realized that this was not going to be realistic. Although there were many skybox textures online, very few of them fit our needs as they were not of vacation spots, and did not have any info as to where the image was taken. Eventually, we stumbled upon a website (https://www.humus.name/index.php?page=Textures&start=0) which had a collection of some locations in which the author had traveled and taken pictures. He also mapped them into skybox textures for us which saved us a lot of time.
Another challenge we faced was dealing with the THREE.js documentations. This was our first time using THREE.js and thus we ran into some problems. Importing the proper modules was surprisingly difficult as there were conflicting tutorials online due to an update that changed the way you are supposed to import. After we got the importation to work, there was a lot of trial and error with the THREE.js documentation to get everything to work and function the way we intended.
Accomplishments that we're proud of
We were not sure if we were going to enter this hackathon because we were all very busy this weekend and knew we did not have much time to complete a project. However, once we had the idea we knew we wanted to work on it and get something submitted. With very limited time, and using features we have never worked with before, we managed to put together a working website that we are very satisfied with. Despite all the challenges we faced along the way we always managed to adapt and work around them to get Explore With Tech done in time.
What's next for Explore With Tech
We would love to continue to add more locations from around the world. We plan on updating the website as frequently as possible.