3D Container Viewer

An interactive 3D container viewer built with React and Three.js. This application allows users to:

• View a 3D container model
• Upload and display custom logos on the container
• Adjust container properties (scale, rotation, color)
• Toggle visibility of container elements
• Select different container models

Live Demo

Visit the live demo at: https://coder69developer.github.io/3d_viewer

Features

• Interactive 3D container visualization
• Custom logo upload and display
• Real-time container property adjustments
• Responsive design
• Model selection
• Material customization

Technologies Used

• React
• Three.js
• @react-three/drei
• @react-three/fiber
• Vite

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/coder69developer/3d_viewer.git
cd 3d_viewer

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

4. Build for production:

npm run build
# or
yarn build

Usage

1. Open the application in your browser
2. Use the controls panel to:
   • Upload a custom logo
   • Adjust container scale and rotation
   • Change container color
   • Toggle label and logo visibility
3. Interact with the 3D model using mouse controls:
   • Left click + drag to rotate
   • Right click + drag to pan
   • Scroll to zoom

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.