Show HN: JavaScript plugin to build 360-degree images | Hacker News Reader

Show HN: JavaScript plugin to build 360-degree images

github.com

87 pointsitchfer28 comments

There's also the <model-viewer> custom element that displays gltf files: https://developers.google.com/web/updates/2019/02/model-view...

Demo: https://model-viewer.glitch.me

looks promising, but loading one large model takes lots of time. It is simpler and faster to load if we have asset of images.

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.

[1] https://news.ycombinator.com/item?id=19635380

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 check how cloudimage-responsive works here [1] [1] https://medium.com/cloudimage/responsive-images-in-2019-now-...

I expected a more fluid experience, especially on mobile (touch events maybe?)

It would be better to use the images and photogrammetry software and instead make a real 3D textured model and use a good OBJ web-based viewer.

The plugin is under polishing, especially for mobile. I'm sure it can be smooth for mobile devices as well.

About using real 3D textured models, I think it depends on use case.

The plugin has better experience on mobile from version 2.0.4. Demo is updated.

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.

check a quick example for outdoor and indoor view: https://cdn.scaleflex.it/demo/home.html

(photo credits: Bush-Jaeger)

we need to do some work on it (nice arrows, forbid to go from last to first image, and a few more things) but it’s already usable

There seems to be a bug on the demo page: the Mercedes spins the wrong way when you drag.

added a new param spin-reverse, demo updated.

yes, you are right. The images were saved in reverse order. We will add a configurable param to change spin direction

I wonder how can one take 36 pictures or 72 pictures, how does this camera process works?

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.

[1]: https://zoetrope.io/client-story/3d-imaging/

The camera is probably on some carriage that will roll only in a circle and latching in a pre-defined interval.

There are devices that rotate the camera while it takes photos at intervals.

yeah, something like https://images-na.ssl-images-amazon.com/images/I/61xosUOD7bL...

I feel like I would have used a video file and basically make the dragging move the time scrubber.

I'm pretty sure the video file would be smaller than all the individual images, and only required 1 network request.

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.

Can this work with images taken using Insta360 ? I hate the sharing option in the app which uploads the image to their ad-ridden website.

sure, any images are fine

I wonder if it's possible to catch horizontal touch events only. As it stands, the demo page is nearly impossible to scroll.

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).

https://picturepan2.github.io/spectre/experimentals/viewer-3...

should be good in version 2.0.1 (demo page is updated)

Can confirm, works like a charm!

I don't have such problems. Which browser/device did you use?

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.

Very cool! Might want to add a section / link on what kind of images we should use to give the maximum wow factor

Reply on news.ycombinator.com