jeremyheleine / photo-sphere-viewer Goto Github PK

The "choose file" viewer works in example1.html but when I try to open example.html I'm greeted "Loading..." which does not go away.

It works fine on firefox but not on chrome. I tested on two separate computers with extensions disabled.

Hi Jeremy, I am using Photo-Sphere-Viewer for another application, and the page has a list of photos and displays panorama when I click on a photo. I made the list sortable using 'Rubaxa sortable' to change the order of the list, but drag-and-drop function is disabled after opening a panorama viewer. I tried another angular sortable but they have the same issue. Angular-ui-sortable which uses jquery-ui works well with Photo-sphere-viewer. I think some functions of photo-sphere-viewer make the drag-and-drop disabled. The function is disabled until I refresh the application. Do you have any idea? Thanks.

deg, radians, px, anything?

I've so far tested it with Iphone 6 on Chrome and Safari.
On both browsers the fullscreen button isnt responding. Other buttons are working fine.

Any fix for that?

Btw, great player!

Hi! I am building a website to make a photospehre image gallery for everyone. I am fascinated about this technology and by using a google cardboard or some kind of headset you can have a wonderful experience. My problem is when I load the sphere on mobile, the image get's blurry. for ex.
http://www.panophoto.eu/Image/249

I have unzipped the files to a directory.
Tried opening example1.html in IE (and two other browsers), running in Windows 10.
The relative path to sun.jpg appears correct, but the default example does not load, just get the loading circle continuously.

The load your own file option does work for both the example images and the default sun.jpg .

Just loading sun.jp as an image in the same html file works fine, so it does not appear to be a relative reference issue, but if any of the subsequent js files could have a specific syntax requirement or perhaps they way they try to load the file is enough different than a simple html image load. The html and css files are all in the same example directory, which is where they unzip to.

I figure that since the file reader browse for file works fine, I should be able to get it to work. But I have not, yet... Probably something simple. Any suggestions appreciated...

Ross

Can I use the script with multiple images in one page ?

I try to set the shift between left and right view, but I am not able to do it !
Is there a way to do it, or not ?

In fact, left and right view in cardboard mode are too important and it provides blurs (louchage !?)

---- En francais... ce sera plus simple :)

En gros, le décalage entre l'image de gauche et celle de droite est trop grand !
Du coup en vu cardboard on a une grosse sensation de loucher !

J'ai comparé avec d'autres Viewers, le décalage est beaucoup plus petit !

Je n'ai pas trouvé de moyen de régler ceci, c'est moi ? ou... ?

Merci,
Nico.

Hi Jeremy, I opened a sphere image on my mobile device (Galaxy Note 4) and found two unknown buttons. Can you please explain what they are? I cannot see the buttons on Chrome developer tools' simulation screen, but they appear on my actual phone. Thanks!

How to autoplay photosphere viewer after page load.
currently we have to manuly play it
i tried autoload but it is nor for autoplay
which parameter should we pass to photo sphere viewer object

Hi there!

The viewer seems to not display certain photosphere images, whilst displaying some others.

I've tried to narrow down the problem, and it doesn't seem to be related to size of the image.

E.g it will work for snow.jpg (attached) but not sky.jpg.

I recently took on a few cubic panoramas and converted them to equirectangular versions.
Initially I thought something was messed up with my conversion method (cubic2erect) but after a close look it became apparent that it was Photo Sphere Viewer that was distorting the panorama.

I never noticed this in any other panorama and don't know if it is apparent because of the geometric shapes present in the panorama I tried it with but the fact remains that only PSViewer will distort the panorama, none of the other 2 viewers I tested it with gave this issue.

Here is the example:

• Original cubic panorama
• Converted equirectangular panorama
• View1- PSViewer
• View1- FPSViewer
• View2- PSViewer
• View2- Pannellum
• Live Pannellum demo using converted panorama

Pretty weird... not sure why this is the case.

Hello,

Im trying out photo-sphere-viewer solution to embed the photos produced by samsung gear 360 in my webpage.
The problem is the photomerging isnt right, for some reason the 2 pictures have some black spots in it. Please check the attachments, is it a bug? maybe im doing something wrong?

When testing this library I have noticed that gyroscope features and VR works well on Android but doesn't work on iPhone.
Would it take much to add support?

Hi Jeremy,

I create your Object like described in your documentation.
In an array, I have to display multiple PhotoSpheres. For a more fluid expirience I wanted to load only the first one, and as soon the next is viewed, load that one.
But: If i disable autoload and try to start .load() my browser(chrome) is returning undefined. If I want to access the object, it returns undefined.

And if i change the display-attribute of a div to display, nothing appears, although, if i display it while the Spheres is loading (with autoload:true), everything is looking like it should

content_right[index] = document.createElement("div");
content_right[index].style.display = 'none';
content_right[index].id = "photosphere_" + index;

spheres[index] = PhotoSphereViewer({
    container: content_right[index],
    panorama: data['link'],
    navbar: false,
    loading_msg:'Laden...',
    autoload:false

if(index == 0){
    spheres[0].load();
        content_right[0].style.display = "block";
});

Thank you in advance, and if its me, who is to dumb to understand it, please point out my mistake

Hi

Would someone please tell me how the ZoomIn or ZoomOut speed/amount can be changed?
I have tried changing the values in PhotoSphereViewer.js:

    this.zoomIn = function() {
        if (zoom_lvl < 100)
            zoom(zoom_lvl + 10);
    };

This was pointless...
I also tried the same thing in photo-sphere-viewer.min.js:

    this.zoomIn=function(){100>he&&D(he+10)}

None of those worked, it still keeps the default zoom increase/decrease speed/amount using the mouse wheel. The README doesn't seem to address this or I failed to figure that out. I appreciate the help.

Thank you.

If you look at the window sill, then you will notice that it is wavy. What setting fixes this problem?

Hi,

I've tried the VR feature (cardboard icon), it does not work with Three.js v82. However, no problem with the version provided here (v71).

When I click on the icon, nothing happens. It is hard to debug since I cannot get the icon to show in my desktop browser.

Hi,

I am really looking forward to implementing Photosphere Viewer, you guys are doing a great job in it.

But so far I can't present it with the current level of distortion caused in my renders. I generated spherical images in Maya/Vray (office.jpg).

See what I mean in the screenshot (photosphereViewer.jpg): left side, the preview from the plugin, right side preview on facebook timeline share (see in this link https://www.facebook.com/photo.php?fbid=933390820098961&set=a.109568755814509.11394.100002841548134&type=3&theater) only works on chrome.

Does anyone know how to approach this? I am new to this script, and couldn't find a clue where to try.
Photosphere viewer is not as sharp as well, but I'd put it as a secondary issue, first I'd like to see the images without any distortion, or else everyone dealing with spherical renders of archviz won't be able to use your project.

Please share your thoughts on it
Thanks!

Thanks for building this!

But I'm stuck on how to integrate the orientation controls for mobile devices (specifically iOS). Basically, I want to control the panning with the mobile device's gyros and accellerometers. I see that threejs has the capability in DeviceOrientationControls.js, but I can't figure out how to attach that to the camera object in your Photo Sphere Viewer.

Can you provide some assistance?

basically every paranoma would have links to another paranoma to which arrow would be pointing. If you give each paranoma x,y location then arrows can easily be directed in right direction. x,y could lang, long.

arrows are basically another layer of controls hover little below camera point.

Is it possible to preload an image in low quality?

I'm considering the Iris360 on behalf of a business. The web viewer (link to panorama) they use for their samples has a really nice feature that displays a transparent PNG logo on top of a reflective sphere where the tripod would be. Screenshot below:

However, I like your UI and WordPress integration better :)

Can you duplicate this feature?

Hi,

I want to add some of extra feature/style of my web page. So I need to add few extra div or section before of

Like: <section class="something"> <div class="another"> <div id="container"></div> </div> </section>

But when I was made like it then the image are not showing. Please can you tell the solution or any idea ?

Hi @JeremyHeleine! Love this plugin, nice job! One feature request would be to add an option to control the scrollwheel only like Google Maps (boolean). Very useful for a grid of photo-sphere-viewers for example :)

Great work and thank you.

Could you wrap the library in a CommonJS/AMD module? It would be easier then to use the library with popular build systems and ES6 applications.

// edit:
Never mind. I've found a fork where this feature is already implemented

Would be cool to have a default_fov, default_lat and default_long.

I tried to call the zoom method but it didn't work because the camera was not initialized yet (I didn't found an onReady callback or similar)

And the move method is not public (and would have the same problem as zoom anyway)

Thank you

How to embed a 360° image into a forum post.

Hi,
I'm using this script in an ionic application. When I tested it using device orientation on an iOS device tilting up would jump at a certain point to the very top. I do not understand all that is happening in the script but I got it to work for me changing (in v.2.6) following lines in photo-sphere-viewer.js:
2654: if (Math.abs(evt.beta) > 180) { to if (Math.abs(evt.beta) > 90) {
2660 and 2684 I added: case 'WebKit':

don't know if that breaks something else - that's why I post it as an issue.
Thanks

I had tested it on my iphone5s, the page stuck with "Loading". Tried to logging to locate the issue, the onload in texture function seems never triggered.

The MAX_TEXTURE_SIZE on my iphone says 4096 as the upper limit, however it still dose not load the texture, even when the texture is exactly in 4096 pixels.

When I open google chrome the examples/example.html and interact with the photo movements are a little crazy, it is not as smooth as this example here.

http://kennydude.github.io/photosphere/test.html

No way to improve to become more gentle movements with the mouse?

Question 1
When going to VR under landscape mode, users can only see the picture of the roof & floor.
The rest is invisible. This bug is only applicable on cellphone(Under PC this isn't any bug)

For more information, please click on the following URL: (http://121.42.146.14:8080/zuijishu_project/backend/3dshow.html?house_id=87).

Question 2: When switching from VR mode to landscape mode, the twirling is only available by gyroscope. However, using thumb and fingers to twirl the screen is failed.

Please do me a favor to fix it. Thanks a million!

Seems to only work with very small sized images on IOS.

Any way to adjust settings to enable larger images to be displayed?

The data image fails to load if > 1mb. Tested on IOS 8 and 9 . Chrome ipad 32gb and iphone 6 64gb

HI,
First of all thanks for a great work!

Could you provide a package for popular package managers like npm and bower?

Thanks

// edit:
Never mind. I've found a fork where this feature is already implemented

I want to get a update on 'position-updated' everytime a position has changed but once gyroscope is enabled, the rotation doesn't trigger the event to be fired anymore. Any other way to get realtime position update?

Hello Guys,

how do we activate the Gyroscope onload, without touching the Gyro button in the nav bar?

greetings from south Germany

Bonjour.

Super appli ! Par contre, je voudrais afficher des panoramas constitués d'une image 3D unique. ça fonctionne très bien lorsque je l'importe à partir de GOOGLE par exemple. Mais GOOGLE réduis la taille de l'image ce qui déteriore sa qualité. Si je veux importer une image panorama directement de GOOGLE, elle n'est plus au format xxxx.jpg.
Serait il possible d'importer une image comme dans le ficher "example" qui lit une adresse, et comme dans le fichier "example1" qui peut lire un fichier non taggé directement à sa racine, sans connexion, que le fichier soit directement déclaré dans le script du container ???

En résumé, afficher un panorama en local comme dans exemple 1 mais programmable camme dans example.

Je vous ai mis une page web avec un code qui fonctionne.

Merci d'avance
index.txt

a github-pages page or even a gif in the readme would be nice

Hello Jeremy.
I tried to implement the keyboard navigation in my fork and discovered that it's not simple as you implemented it.

On Firefox and some versions of Chrome, KeyboardEvent.key does not exist, instead it's "code", or "char", or "keyCode", or "charCode", or "which".
See https://developer.mozilla.org/en-US/docs/Web/Events/keydown (it's the most inconsistent event I ever encountered).

Despite the fact it is deprecated the most reliable way is evt.keyCode || evt.which with

ArrowLeft = 37
ArrowUp = 38
Arrowright = 39
ArrowDown = 40

Or if you want to be clean, try evt.key and fallback to numerical codes if it fails.

Hi.
I'm trying to make a slider of 3d panoramas with a bootstrap js plugin "Carousel". Each slide (item) has own "data-blah-blah" attribute which one contains src of a spherical image. And in "for" cycle I'm trying to initial all this panoramas. But as a result only 1st slide works correct (which has display:block), when other is not (has display:none). Other words, when I slide next or prev, there is nothing to show.
In CSS I did hard set height & width of item container, but canvas of other slides is always clear...

Issue have fixed by use follow work around: on 'slide.bs.carousel' event (changing current active slide) I'm initialing panoramas of current visible div again. But this is not good solutions I think.

What do you think?

Here (https://theta360.com/spheres/samples/532f020e-4569-11e5-a824-064087ff3472-1) is an example of the user experience I would like to achieve. When user drags the image it sort of sticks to the grab point. What settings do I change in order to achieve this?

I am having trouble disabling the zoom option triggered by the mousewheel.
<script> var div = document.getElementById('photosphere-background'); var PSV = new PhotoSphereViewer({ panorama: '{{ site.baseurl}}/js/plugins/Photo-Sphere-Viewer/examples/snow.jpg', container: div, navbar:true, anim_speed: '0rpm', loading_img: '{{site.baseurl}}/images/ring.svg', mousewheel:false, gyroscope:true }); </script>
Am I missing something? My website is at www.bigriverwebdesign.club

Console shows up this:

Error: WebGL: Error during native OpenGL init.  ...photo-sphere-viewer.min.js:1:228
Error: WebGL: Requested size 1266x150 was too large, but resize to 633x75 succeeded. ....three.min.js:9:23368

Firefox ver: 45.0

Hi,
"Load the predefined panorama" doesn't work on the test.html

Regards, Sebastian

I've recently created a script to grab and stitch together Street View panoramas into single JPGs.
I've tested a few of them and all have a slight skew, more noticeable in certain longitudes/latitudes than others.

I tried changing a few parameters in PSV but wasn't able to get any satisfactory results. I'm wondering what is so special about Street View panoramas that makes them visually skewed and if it is possible to adjust PSV settings to fix their usage in it.

I'll leave here two panoramas as examples and respective print-screens to demonstrate what I'm trying to say.

Fontevraud Abbey

• Street View URL: #loire-castles-france/fontevraud-royal-abbey
• Panorama image: http://i.imgur.com/JFxqXzN.jpg
• Street View print-screen: http://i.imgur.com/PhQX6sb.jpg
• PS Viewer print-screen: http://i.imgur.com/zL6A7sM.jpg

Milford Track

• Street View URL: #great-walks-of-new-zealand/view-of-milford-sound-milford-track
• Panorama image: http://i.imgur.com/xiOwWfW.jpg
• Street View print-screen: http://i.imgur.com/myzXn3K.jpg
• PS Viewer print-screen: http://i.imgur.com/yRvCqai.jpg

Thanks for the help!

Can you create a helper similar to what mistic100 did in his fork?

So you can simply call to setPanorama to change picture.

.setPanorama(path [, position] [, transition]) -> Promise

Loads a new panorama image, optionnally changing the camera position and activating or not the transition animation.

viewer.setPanorama(
  'panorama-2.jpg',
  {
    longitude: Math.PI,
    latitude: 0
  },
  true
);

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

is there any way to change photo without recreate PSV object ?

Hello,

Your library works very well and on my website, some pages are 11 panoramas at the same time without issues.

But, today, I would like to put 19 images on the same page. In this case, there are three warnings like this:

three.min.js:627 WARNING: Too many active WebGL contexts. Oldest context will be lost.

Three images, not always the sames, don't work and display this . The other panoramas work.

The warning is in three.min.js but in your library, can you make something to avoid this problem ? Or can I make something when you call a PhotoSphereViewer to avoid this problem ?

Thanks,
Jérémie

Hi,
if i try to load a jpg file hosted on another server, by adding the full url, it doesn't work...
If the panorama is located on the same server it works...

For example i try to load panorama:
http://www.romaimmobiliarecasa.it/public/vt/645914928201114488_c.s.nicola%20011.jpg

the file is uploaded on the server but the panorama doesn't load...

http://annunciromacasa.it/vt/vtour/panoview.php?jpg=645914928201114488_c.s.nicola%20011.jpg

How to fix?
Thanks
Bye