Team 28: Fraser Street

Inspiration

We created Fraser Street in response to the rapid growth of online shopping in recent years. Our goal is to make the online shopping experience more immersive and closer to what customers enjoy in person. By doing so, we offer users a unique, engaging, and enjoyable way to shop online.

What it does

You can join Fraser Street as either a seller or a buyer. Sellers can list items by uploading an image or taking a photo, which is then transformed into a 3D model that they can place anywhere in their virtual shop. Buyers can explore different shops, browse items on display, and add their favourite products to their cart.

How we built it

We used TripoSR to convert images into 3D models that are integrated into our scenes. All 3D rendering and scene creation are done using Three.js. The application’s backend is built with Flask, while the frontend is developed with Next.js and styled using TailwindCSS.

Challenges we ran into

Working with 3D comes with its own set of challenges. Creating numerous models and arranging them accurately within scenes is time-consuming. Achieving the right lighting and camera angles can also be difficult and often leads to complications. Additionally, we focused on optimizing the process to reduce the time it takes to convert an image into a 3D mesh.

Accomplishments that we're proud of

We’re especially proud of the Fraser Street design, as well as the detailed layout of the Sports Direct store. The interactive feature that lets users click on items to view them on a podium before adding them to their basket provides a complete and engaging shopping experience. We’re also proud of our ability to convert images into 3D meshes, a technically challenging achievement that adds significant depth to the platform.

What we learned

We learned how to build a machine learning pipeline that takes a raw image, processes it, and passes it through a model to generate a 3D mesh. We also gained valuable experience in 3D design techniques, particularly in refining lighting effects to create realistic shadows and adjusting camera angles to highlight specific aspects of a scene.

What's next for Fraser Street

An equivalent virtual street can be created for any brand or company looking to sell products in a 3D environment. Developers can design and map out store layouts, while sellers list their items within these spaces. Multiple buyers can then explore, interact, and purchase products from various stores. Once the initial setup is complete, the system operates as a self-sustaining marketplace. The long-term vision is to expand this concept across a wide range of the retail market.