In React js using panelon-react how to color change image 360 view

Question

``Give me some suggestion, I have created a 360 view of an image in react using panelon-react, there are many objects inside the image, such as door, ac etc. So I have placed buttons above all these images, now if I click on that button the color picker opens, now if I select a color in the color picker the selected color should be the color of the door. So how do I do that?

My Github project link for view code https://github.com/iamshivamshukla/360-view_image

Answer 1

to change the color of the image to blue, you can use the following CSS code:

.panelon-react img {
  filter: hue-rotate(180deg);
}

This are steps to Follow:

1. First, import the Panelon-React component and your image into your React project.

2. Next, add the Panelon-React component to your JSX code and pass in the image as a prop.

3. To change the color of the image, you'll need to modify the CSS styles. You can do this by targeting the image element and adding a CSS filter property.

4. The filter property can take various values, including brightness, contrast, hue-rotate, and saturation. To change the color of the image, you can use the hue-rotate value, which rotates the hue of the image by a specified angle.