Show HN: JavaScript plugin to build 360-degree images


87 points | by itchfer 4 days ago


  • dmitry_sfx 51 minutes ago

    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:

    (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

    • spankalee 3 days ago

      There's also the <model-viewer> custom element that displays gltf files:


      • dmitry_sfx 3 days ago

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

      • lwoo 4 days ago

        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.


        • max_likelihood 3 days ago

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

          • dmitry_sfx 3 days ago

            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]

        • iamleppert 3 days ago

          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.

          • 2 days ago
            • dmitry_sfx 3 days ago

              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.

              • dmitry_sfx 2 days ago

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

              • cookingrobot 3 days ago

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

                • dmitry_sfx 3 days ago

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

                  • dmitry_sfx 3 days ago

                    added a new param spin-reverse, demo updated.

                  • ramon 4 days ago

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

                    • bizzleDawg 3 days ago

                      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.


                      • k__ 4 days ago

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

                        • yeahitslikethat 4 days ago

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

                      • w-ll 3 days ago

                        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.

                        • itchfer 3 days ago

                          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.

                          • 3 days ago
                        • dRaBoQ 3 days ago

                          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.

                        • disillusion 4 days ago

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

                          • 52-6F-62 4 days ago

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


                            • dmitry_sfx 3 days ago

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

                              • disillusion 3 days ago

                                Can confirm, works like a charm!

                              • dmitry_sfx 4 days ago

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

                                • tyingq 4 days ago

                                  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.

                              • lawrencegs 4 days ago

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