To add a 360-degree image view in a React website, where the product image rotates on mouse hover and scroll, you can implement the following steps:

Steps to Create a 360-Degree Image View:

  1. Prepare the 360-Degree Images:

    • Obtain a sequence of images that represent the product from different angles (e.g., 36 images for every 10 degrees of rotation).
    • Name the images in a sequential order (e.g., product_1.jpg, product_2.jpg, ..., product_36.jpg).

  2. Install Required Library (Optional):
    If you don’t want to create the logic from scratch, you can use a library like react-360-view for an easy implementation.

npm install react-360-view
  1. Implementation Using react-360-view:

``` javascript name=Product360View.jsx
import React from "react";
import { ThreeSixty } from "react-360-view";

const Product360View = () => {
return (









#### **Explanation:**
- `amount`: Total number of images for the 360-degree view.
- `imagePath`: The folder path where the images are stored.
- `fileName`: The naming pattern of the images (e.g., `product_1.jpg`, `product_2.jpg`, etc.). `{index}` is replaced by the image number dynamically.

---
### Implementation Without a Library:

If you want to implement it manually, here’s how:

1. **React Component for 360-Degree View:**




   ``` javascript name=Product360Manual.jsx
   import React, { useState } from "react";

   const Product360View = () => {
     const [currentImage, setCurrentImage] = useState(1); // Starting image
     const totalImages = 36; // Total number of images

     const handleMouseScroll = (event) => {
       const delta = event.deltaY; // Scroll direction
       if (delta > 0) {
         setCurrentImage((prev) => (prev === totalImages ? 1 : prev + 1));
       } else {
         setCurrentImage((prev) => (prev === 1 ? totalImages : prev - 1));
       }
     };

     return (
       
         
       
     );
   };

   export default Product360View;

  1. Setup Your Images:

    • Place the images in the public/images/ folder of your React app.
    • Ensure the images are named sequentially (e.g., product_1.jpg, product_2.jpg, ..., product_36.jpg).

  2. Explanation for Manual Implementation:

    • The currentImage state tracks the currently visible image.
    • The onWheel event listener updates the currentImage based on the scroll direction (deltaY).
    • Images loop around when reaching the first or last image.

Optional: Add Mouse Hover Rotation

To rotate the image on hover:

  • Replace the onWheel with onMouseMove to detect horizontal mouse movement instead of scrolling. 
const handleMouseMove = (event) => {
  const { movementX } = event; // Horizontal mouse movement
  if (movementX > 0) {
    setCurrentImage((prev) => (prev === totalImages ? 1 : prev + 1));
  } else {
    setCurrentImage((prev) => (prev === 1 ? totalImages : prev - 1));
  }
};

Styling with TailwindCSS (Optional): 

className="w-full h-auto border border-gray-200 rounded-md shadow-md overflow-hidden">
   />

Key Notes:

  • The images should be lightweight (optimized for web) to ensure smooth transitions.
  • You can combine onWheel and onMouseMove for both mouse scroll and hover-based rotation.
  • Use a library if you want advanced features (like touch support for mobile devices).

Let me know if you need further assistance!