Cross 3D

This project is a 3D model viewer built with React and Vite. It allows users to view, customize, and upload 3D models using the Three.js library and React Three Fiber.

Tech Stack

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web projects.
• Three.js: A JavaScript library for creating 3D graphics.
• React Three Fiber: A React renderer for Three.js.
• React Router: A library for routing in React applications.
• Framer Motion: A library for animations in React.
• Lil-GUI: A lightweight GUI for adjusting parameters in real-time.

Code Flow

1. App.jsx: The main entry point of the application. It sets up the routes for different pages using React Router.
2. Home.jsx: The home page that showcases various 3D components like buttons, cards, and particle systems.
3. UploadModel.jsx: A page where users can upload their 3D models in .glb or .gltf format.
4. Shape3D.jsx: A gallery of predefined 3D shapes that users can customize.
5. Models3D.jsx: A gallery of 3D models that users can view, download, and customize.
6. GetCode.jsx: A component that provides code snippets for integrating 3D models into different frameworks (React, Next.js, Vanilla JS).
7. Docs.jsx: A documentation page that provides installation guides and tips for using the application.
8. CustomizesShape.jsx: A page for customizing predefined 3D shapes.
9. CustomizeModel.jsx: A page for customizing uploaded 3D models.

Installation

To get started with the project, follow these steps:

1. Clone the repository:

   git clone https://github.com/ParthJoshi19/Three_BB.git
   cd Three_BB

2. Install dependencies:

   npm install --legacy-peer-deps

3. Start the development server:

   npm run dev

4. Open your browser and navigate to developmentg url.

Usage

• Home Page: Explore various 3D components.
• Upload Model: Upload your 3D models and customize them.
• 3D Shapes Gallery: View and customize predefined 3D shapes.
• 3D Models Gallery: View, download, and customize 3D models.
• Get Code: Copy code snippets for integrating 3D models into different frameworks.
• Documentation: Follow the installation guides and tips for using the application.