[Feature] 3D product in an environment

[ShwetKhatri2001]

Description

Instead of showing the 3D product / model in the plain gray area, Why not show it in an environment where it's actually going to be placed after the purchase !

Take a look at the small changes made in this model-viewer example and the screenshot below to add a background and lighting using skybox ,environment-image and exposure.

Similarly, create a dropdown having at least three backgrounds suitable for the product.
( For example, if it's a gym product then provide different gym environments.

Keep the one background by default in which the product looks the best.
Also, provide an option None to see the product without any background in that plain-gray area.

Screenshots

It's just going to be a dropdown for now between the viewer-gray-area and QR-Code.
When a background from the dropdown is selected it should be applied immediately.

Don't hardcode the background-image sources and keep the list of backgrounds separate in an object.
Because there will be different list of background depending on the product and the changes you make shoould be adaptable to it.

Checklist

• I have checked the existing issues
• I have read the [Contributing Guidelines]
• I am willing to work on this issue (optional)
• I am a GSSoC'23 contributor

[mandliyarajendra11]

assign me plz

[ShwetKhatri2001]

Go ahead. This might be a good starting point for you to learn about model-viewer since you've also shown interest to work on other related issues. So, implement this and explore.

By assigning you this issue, I'm extending the limit of assigned issues for a contributor to 2 ( from 1 ).
Since the last month of GSSoC'23 contribution period has started and I want to encourage the contributors to contribute more.

[mandliyarajendra11]

@ShwetKhatri2001 not done , skybox is not good option in chair product , not looking good and making background blur

[ShwetKhatri2001]

Yes, it might look blur if the image size is bigger than the container, but for full-screen view it should work.
You can find some hdr background images online which might fit for such case.

As I said, It's just about providing an option to view the product in three different backgrounds and if none of the backgrounds look good then the current plain-gray background it has will be shown by default.

[ShwetKhatri2001]

Any updates or issues @mandliyarajendra11 ?

[ShwetKhatri2001]

Any updates or issues @mandliyarajendra11 ?
Please try to make your changes and raise your PR within the next 2 days.
After that, This issue will be open to other interested contributors.