I recently built a similar plugin [1] inspired by a bug report I had to resolve at work. Back then I had hard time trying to find a good open source solution and this one here is nearly perfect. It's a little bit sad I didn't see it coming earlier.
Thanks for sharing Tridi! I found it very easy to use and I liked the fact I could dump my images into a local folder and be done. With js-cloudimage-360-view, I first had to create an account on cloudimage.io to get a token (for CDN delivery) and then put my images on S3, Google Cloud or Azure Blob which require credit card information for the free trial.
no at all. It's possible to use images from local folder, I'll add an example. You may not need to use Cloudimage token if you don't need responsive features (or you can make it yourself or use any other service). Only responsive features require Cloudimage token. However, it's great to use Cloudimage service as you can forget about resizing and compressing images for all devices or different screen width.
You can use the plugin not only for 360 product view. As idea for renting homes, you can make the camera to be set at the focal point instead of the object and you can spin around and view the room that you are in.
Storytime. Back in 2013, I designed a "robotic" system to take 108 photos of products (from all different angles in a hemisphere) some years ago [1]. My co-founder and I also made a rotating image widget like this one, but that seems to have rotted too much to show.
The interesting thing is that taking photos is only the first part of the problem - the second and larger problem is that you have 36-108 photos which need editing. Outsourced, you can have an agency remove the backgrounds from photos, but long term this is unsustainable.
I'm speaking about this from having spent nearly 2 years having tried to get a startup off the ground which was intending to offer this kind of photography as a service.
Another massive part of the Challenge was that nobody cared! It's interesting tech and all the stats say that 360/3D photos convert better, but they're a lot more expensive and not possible to have an intern shoot as easily. In the end, I spoke to about 1/3rd of the available market, often reaching out with custom mockup and products in their market - we had 2 clients from this.
That was 2013 though. I can think that 2 things might have changed:
1. It seems quite possible that an RNN/CNN could help remove backgrounds more reliably? I'm no expert in this, perhaps someone else could comment. The particularly hard case is separating nearly identical colors - e.g. black&white trainer on white background. That would certainly allow for a higher quality finish.
2. Customer interest may have changed? Anecdotally, I've not really seen a huge increase in 360/3D photography in ecommerce. In 2013, I thought Amazon was going to introduce it because of some patents filed relating to an automatic photography pipeline.
We are planning to add the feature which takes a video (even from your mobile phone) and creates an asset of images of the product. In this case, using high-quality images helps for product detailing as you can also zoom in.
Not to take wind out from the sails of OP, but there are [edit: not CSS only, a couple bytes of inline JS] alternatives that remove some of that issue, and usage ambiguity by using an explicit slider (at the cost of some other features like zoom).
The ask is that swipe up/down on elements that only want left/right bubble those up/down events to the page so it scrolls. I believe it's not specific to any one device.
Though it is more pronounced with a screen where the picture fills most of the screen. You currently have to find a border or space between the pictures to swipe on to scroll up or down.
Demo: https://model-viewer.glitch.me