jeremyheleine / photo-sphere-viewer Goto Github PK
View Code? Open in Web Editor NEWA JavaScript library to display Photo Sphere panoramas.
A JavaScript library to display Photo Sphere panoramas.
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?
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!
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!
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.
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.
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:
Pretty weird... not sure why this is the case.
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
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
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
);
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
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!
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
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.
Hi,
"Load the predefined panorama" doesn't work on the test.html
Regards, Sebastian
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.
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
Milford Track
Thanks for the help!
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,
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
Is it possible to preload an image in low quality?
is there any way to change photo without recreate PSV object ?
Hello Guys,
how do we activate the Gyroscope onload, without touching the Gyro button in the nav bar?
greetings from south Germany
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.
deg, radians, px, anything?
Can I use the script with multiple images in one page ?
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
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
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?
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
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
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?
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?
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.
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! 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
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 ?
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?
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
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.
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.
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
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?
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
a github-pages page or even a gif in the readme would be nice
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.