search

murdockfpv / murdockfpv.github.io

Build a Jekyll blog in minutes, without touching the command line.
Other
0 stars 1 forks source link

360 Photosphere viewer #30

Open juliusakula opened 3 years ago

juliusakula commented 3 years ago

Requires some javascript so here

https://photo-sphere-viewer.js.org/

works super good on mobile.

juliusakula commented 3 years ago

other options

https://ourcodeworld.com/articles/read/843/top-7-best-360-degrees-equirectangular-image-viewer-javascript-plugins

Three.js is Wow

juliusakula commented 3 years ago

1/3 - 1/2 of viewers are on mobile so:

https://photo-sphere-viewer.js.org/

juliusakula commented 3 years ago

best drag and drop previewer

https://threejs.org/examples/webgl_panorama_equirectangular.html

juliusakula commented 3 years ago 

Started digging into the fact that my drone can take VR photos, and added a 360 degree VR Photo-Sphere page to my blog (had to dig into like 3 different javascript libraries to find the right one that works on mobile)..

More to come, this was just a test of my photosphere capabilities.. I'm really impressed with how well it stitches together the image at the bottom. Directly below you in the first picture, you can very clearly see that bird's nest. Awesome.

Check it out, POV: you are a bird above a bridge on a shitty day in Clark Fork.
juliusakula commented 3 years ago

photo-sphere-viewer implemented: https://murdockfpv.github.io/vrphotos/

juliusakula commented 3 years ago

CODE JAVASCRIPT -- https://github.com/murdockfpv/murdockfpv.github.io/blob/master/_includes/PHOTOSPHERE.html

CODE, VR PAGE (post, usage example) -- https://github.com/murdockfpv/murdockfpv.github.io/blob/master/_posts/2021-01-11-photosphere_vr.md

KEYPOINTS (documentation) -- https://photo-sphere-viewer.js.org/plugins/plugin-autorotate-keypoints.html#example

juliusakula commented 3 years ago

https://photo-sphere-viewer.js.org/guide/config.html#advanced-options

photosphere viewer has a capture keyboard event listener method which could potentially be used to flip between one VR photo and the next. Big Goal.

instead of 

    'ArrowRight': 'rotateLongitudeRight',
    'ArrowLeft': 'rotateLongitudeLeft',

have something like:

    'ArrowRight': 'nextImage',
    'ArrowLeft': 'previousImage',

and define those functions to swap the image source with the next or previous item in the array of photos. would pass in an array of photos like:

{% include PHOTOSPHERE.html caption="Above a Bridge © Justin Murdock" img_urls="'/images/DJI_0358.JPG', '/images/DJI_0354.JPG'" id="viewer2" default_lat="-0.6" default_long="3" default_zoom="30" %}

img_urls vs img_url is a big difference

juliusakula commented 3 years ago

create PHOTOSPHERE_FLIPBOOK.html ?

juliusakula commented 2 years ago

More info, Traveling from place to place https://codingjames.ca/making-360-panoramas-to-embed-in-a-webpage/