🌐 Live Demo: https://3d-viewer-eight.vercel.app
📂 Repository: https://github.com/Omkarkumbhar47/3D-Viewer
👨‍💻 Author: Omkar Kumbhar

A powerful browser-based 3D Model Viewer built using React, Three.js, and React Three Fiber that allows users to load, explore, and interact with 3D models in real time.

This application focuses on performance, usability, and intuitive model interaction, making it suitable for engineering previews, product visualization, and design inspection workflows.

Traditional 3D model inspection tools often require heavy desktop software and complex installations. This project solves that by providing a lightweight, responsive, and interactive web-based 3D viewer that runs directly in the browser.

• Drag & drop 3D model upload
• Real-time rendering using WebGL
• Click-to-select model parts
• Highlight selected meshes with visual feedback
• Seamless canvas ↔ sidebar synchronization

• Traverse model hierarchy
• Toggle mesh visibility
• Select and highlight individual parts
• Bi-directional sync between UI & canvas

• Adjustable lighting for better visualization
• Background color customization
• Environment presets

Capture high-quality screenshots of the 3D canvas:

• Small → 1280×720
• Medium → 1920×1080
• Large → 2560×1440
• Custom resolution support
• Optional transparent background

• Dynamic header & footer sizing
• Fully responsive canvas
• Adaptive sidebar behavior
• Clean and modern UI

Frontend

• React.js
• React Three Fiber
• Three.js
• Drei
• Bootstrap

Rendering

• WebGL-based real-time 3D rendering

UI

• Custom typography (ForumRegular)
• Responsive component architecture

3D-Viewer/
│
├── public/                  # Static assets
│
├── src/
│   ├── components/          # Reusable UI + 3D viewer components
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── Sidebar/
│   │   └── ModelViewer/
│   │
│   ├── utils/               # Helper functions (lighting, canvas logic, etc.)
│   │   └── lightingHelper.js
│   │
│   ├── fonts/               # Custom fonts
│   │   └── Forum-Regular.ttf
│   │
│   ├── assets/              # Images & static resources
│   │   └── 3dLogo.jpg
│   │
│   ├── App.js               # Root component
│   ├── App.css              # Global styles
│   ├── index.js             # Entry point
│   ├── index.css            # Base styling
│   └── reportWebVitals.js   # Performance monitoring
│
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

git clone https://github.com/Omkarkumbhar47/3D-Viewer.git
cd 3D-Viewer

npm install

npm start

1. Upload a 3D model via drag & drop or file input
2. Explore model parts from the sidebar
3. Toggle visibility of meshes
4. Adjust lighting & environment
5. Capture high-resolution snapshots

• Implemented real-time 3D rendering in React
• Managed complex state syncing between UI and WebGL canvas
• Optimized performance for large models
• Built scalable component architecture
• Improved UX for technical visualization tools

• Animation controls for models
• Support for additional file formats
• Camera preset saving
• Dark/light theme toggle
• Export model metadata

Contributions are welcome!

If you're interested in:

• WebGL & 3D rendering
• UI/UX improvements
• Performance optimization

Feel free to fork the repo and submit a PR 🚀

• Portfolio: https://v2-portfolio-navy.vercel.app/
• LinkedIn: https://linkedin.com/in/omkar-kumbhar-291168259/
• Email: kumbharomkar747@gmail.com

This project is licensed under the MIT License.