3D Store

• 

  this is the seller mode, so the seller can upload this 2d and 3d imgs of a products and publish it

• 

  when the mouse hover to a specific product

• 

  this is the main page that will open , aand it should be for both seller and buyer

• 

  when clicking on the produc it sill shows it's 3d img ( I'll make my own model to do this to be exactly like the 2d img )

\section*{Inspiration}

This project originated from a personal and practical challenge. My mother runs a small handmade clothing and toys business. Although her products are carefully crafted and high in quality, traditional photographs fail to capture their texture, depth, and overall feel. In reality, the items look far better in person than they appear in flat images.

This raised a simple question: how can online shoppers experience handcrafted products more realistically before making a purchase?

From this idea, \textbf{3D Store} was created under the concept of \textit{``feel before you buy''}, aiming to make online shopping more interactive, transparent, and trustworthy for both sellers and buyers.

\section*{What it does}

3D Store is a web-based marketplace that replaces static product photos with interactive 3D previews.

Buyers can:

\begin{itemize} \item Rotate products $360^\circ$ \item Zoom in to inspect details \item View textures and materials more closely \item Interact with items directly inside the browser \end{itemize}

In addition, the platform supports sellers through AI-assisted tools. After uploading product images and basic information, the system automatically generates:

\begin{itemize} \item Product titles \item Descriptions \item Material insights \item Listing recommendations \end{itemize}

This significantly reduces the time and effort required to publish professional product listings while improving consistency and quality.

\section*{How we built it}

The core intelligence of the platform is powered by \textbf{Google Gemini 3}'s multimodal API. Gemini processes both images and text to understand products semantically and visually.

\subsection*{Gemini Integration}

We use Gemini 3 to:

\begin{itemize} \item Analyze uploaded product images \item Detect materials and textures \item Generate natural-language descriptions \item Enable semantic search \item Provide intelligent seller assistance \end{itemize}

This multimodal reasoning allows sellers to publish faster and helps buyers discover products more accurately.

\subsection*{Workflow}

\begin{enumerate} \item Sellers upload product images and metadata \item Gemini analyzes the content using AI \item Descriptions and recommendations are generated automatically \item Products are displayed using an interactive Three.js 3D viewer \end{enumerate}

During early prototyping, some 3D meshes were generated using external tools. The system is now transitioning toward native in-app generation to enable a fully automated pipeline.

\section*{Challenges}

The most challenging aspect was converting 2D images into convincing 3D experiences while maintaining high performance in the browser.

Key challenges included:

\begin{itemize} \item Preserving accurate colors and materials \item Creating believable depth from flat images \item Keeping models lightweight for web rendering \item Ensuring smooth performance on mobile devices \end{itemize}

Several iterations were required to balance visual quality with speed and responsiveness.

\section*{Accomplishments}

\begin{itemize} \item Built a complete end-to-end working prototype \item Integrated Gemini 3 for multimodal AI analysis \item Automated content generation workflows \item Implemented semantic search capabilities \item Developed a responsive real-time 3D viewer \item Deployed a publicly accessible live web application \end{itemize}

\section*{What we learned}

This project provided both technical and design insights. We learned that realistic rendering must be balanced with performance. Techniques such as simplified geometry, optimized shaders, and streamed AI responses significantly improve user experience.

Most importantly, we discovered that usability, speed, and accessibility often matter more than extreme visual detail.

\section*{What’s next for 3D Store}

The next objective is to develop a fully integrated image-to-3D generation pipeline directly inside the platform.

Future improvements include:

\begin{itemize} \item Native in-app 3D model generation \item Automatic background removal \item Faster real-time reconstruction \item Augmented reality previews \item Reduced operational costs \item AI-based pricing suggestions using: [ Price = f(time, complexity, materials) ] \end{itemize}

Our long-term goal is to make professional 3D commerce tools accessible to small businesses and independent creators worldwide.

Built With

• ai
• api
• backend
• express.js
• frameworks
• gemini
• google
• infrastructure
• javascript
• node.js
• react
• react-three/fiber
• three.js
• typescript
• vite