
Show HN: JavaScript plugin to build 360-degree images - itchfer
https://github.com/scaleflex/js-cloudimage-360-view
======
spankalee
There's also the <model-viewer> custom element that displays gltf files:
[https://developers.google.com/web/updates/2019/02/model-
view...](https://developers.google.com/web/updates/2019/02/model-viewer)

Demo: [https://model-viewer.glitch.me](https://model-viewer.glitch.me)

~~~
dmitry_sfx
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
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](https://news.ycombinator.com/item?id=19635380)

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

~~~
dmitry_sfx
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-...](https://medium.com/cloudimage/responsive-images-in-2019-now-
easier-than-ever-b76e5a43c074)

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

~~~
dmitry_sfx
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
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](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

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

~~~
dmitry_sfx
added a new param spin-reverse, demo updated.

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

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

~~~
dmitry_sfx
yeah, something like [https://images-na.ssl-images-
amazon.com/images/I/61xosUOD7bL...](https://images-na.ssl-images-
amazon.com/images/I/61xosUOD7bL._SX425_.jpg)

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

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

~~~
dmitry_sfx
sure, any images are fine

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

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

~~~
disillusion
Can confirm, works like a charm!

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

