Own project
Javascript object for viewing 360° images with timelapse functionality. Script uses THREE.js, jQuery, and FontAwesome libraries.
Premise
Bought myself a Ricoh Theta V 360 degree camera recently. Pretty much after taking the first pictures with it I started to look for a Javascript 360 viewer. Couldn’t find suitable for my purposes so wrote one myself. Well, kind of. I found this. The whole thing is based on it.
Mr. Doob, Emanuele Feronato and Cedric Pinson are top three Javascript heroes out there. Only my humble (and official) 15 year professional career opinion.
Work
Pretty soon after I started I realised that having a timelapse functionality would be very useful. IMHO, Ricoh Theta V’s, or any other 360 camera I’ve seen, video quality is not really quite up there yet where it needs to be. So, why not try timelapse…
4K images are pretty heavy so I knew that memory and processor usage will become an issue. First needed to restrict the image dimensions to 2048×1024 pixels and limit images to 60 per timelapse, preferably less than that, say 30 images. Also the interval between images can’t be too small. Maybe one second, maybe 750 milliseconds. The longer the better clearly in this case. I added a method to nullify already viewed images’ data from the main object. Temporary variables are also cleared throughout the script. There is a preloader with user definable amount to preload files in chunks in advance while playing timelapse or clicking through images. I am thinking about making this automated by checking total amount of images divided by average file size. That might need a way to detect the average connection speed too and might not turn out not to be that accurate. We’ll see.
I ended up ditching timelapse functionality completely, duh. Instead, I focused on interactivity and creating scenes and tours. MapBox shows the path between images, or it can be disabled depending on settings. In-view navigation is created from EXIF-data within the images’ meta data.
Result
I am quite satisfied how it turned out. I spent a ton of time creating this and especially testing with images. It’s been a while since I have coded PHP so I really didn’t enjoy too much those bits. But figuring out things, possible or not, was fun!
Have a look, what do you think?
