mpetroff / pannellum Goto Github PK
View Code? Open in Web Editor NEWPannellum is a lightweight, free, and open source panorama viewer for the web.
Home Page: https://pannellum.org/
License: MIT License
Pannellum is a lightweight, free, and open source panorama viewer for the web.
Home Page: https://pannellum.org/
License: MIT License
Hello,
For this issue I cannot give you a hint where in the code it may be, or if is only due to the code (or to the Browser) but the performance - and as a result the user experience - is a bit low in some devices or even in desktop when the load is high. I know that it does happen in most of the 360 players in more or less degree that the CPU goes to almost 100% when dealing with big images and effects on them.
But in this case I can say that it happens specially on mobile devices. After a while loading the page, the drag and drop around gets quite slow. And in cases like iPhone 4 or even iPhone 5, it crashes the browser (I guess cause it does not have more memory anymore and it stops). It happens often when changing the device orientation.
I'm not sure if that can be solved easily, since is not a precise bug report.
Thanks anyway!
I've been exploring using Pannellum in order to display real estate house tours. Unfortunately I've consistently encountered an issue with it displaying in Safari.
I don't use Mac's myself and have never had any issues with Pannellum on either Chrome, Firefox, Opera, or Internet Explore on Windows.
Thanks.
Edit: I'm using the 2.1.0 release.
Zooming out with the mouse wheel is jerky with Chrome. It looks like it zooms out and then in again a bit. The problem is this code in pannellum.js
I think:
if (event.detail) {
if (event.detail > 0) {
zoomSpeed = 1;
} else {
zoomSpeed = -1;
}
} else {
if (event.detail < 0) {
zoomSpeed = 1;
} else {
zoomSpeed = -1;
}
}
Just as with the code that comes before this code in pannellum.js
, I think the else part needs to check for event.wheelDelta
. That improves zooming with Chrome for me (no pull request as not tested with IE).
Hello,
Changing too fast from panoramas is causing the the player to crash. I fixed some small undefined errors in the setTimeout: #72
but it wasn't only that.
I know IE9 isn't supported, but it would be great if it displayed an error message plus fallback link (e.g. the IE10 I tried says that WebGL support is missing). Instead it's just stuck on the "Loading" screen. If you need a browser to test it, Open Source projects get free access to SauceLabs where you can select any browser/OS (https://saucelabs.com/opensauce).
It would be really useful to customize the hotspot image (the arrow) to some other jpg, gif... in the json. And even provide some hover event (increase/decrease size)
Right now I can override the default image taken for the hotspots but the hover is still hardcoded
The current implementation allows us to set the pitch and yaw of the initial camera upon entering the scene only, thus providing a jarring experience if we wish to back out of a dead-end (Turning the camera all the way around, clicking transitioning scene, repeat).
I propose we store the current pitch and yaw in the scene and attempt to maintain it into the next scene, mimicking google street view. Inheriting orientation such as this should be optional, as not all scenes will maintain direction in this way.
i tested this in firefox + chrome, for example.htm, i get below error after click 'click to load parano.."
Error: something went wrong with WebGL!
Error: WebGL: texImage2D: the maximum width for level 0 is 4096
A script that creates the tour JSON might be called like tour?id=1¶m=2
. The complete embedding URL would then be pannellum.htm?tour.php?id=1¶m=2
, but this confuses the parseURLParameters
function. Changing the script URL to use slashes (tour/1/2
) doesn’t help, because then you’ll end up with a wrong tourConfig.basePath
that’s prepended to the panorama images. I'm not sure how to fix this in a clean way.
Hello there,
I'd like to add some more capabilities, such as displaying a video when clicking a hotspot. I've forked your repository, and have started to play around...
I am adding some behaviour in the createHotSpots() from panellum.js. My plan is to add (for the video case) a
Do you have any recommendation before I start ?
Thanks :)
Guillaume
Does this support partial panoramas such as 270 degree panos that also don't extend completely to the top or bottom?
I just tried the current master version again. None of the examples works correctly. E.g. in chrome I end up with the following JavaScript / WebGL errors:
WebGL: INVALID_VALUE: texImage2D: width or height out of range pannellum.htm?panorama=../examples/examplepano.jpg&title=Jordan%20Pond&author=Matthew%20Petroff&pre…:1
43
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' pannellum.htm?panorama=../examples/examplepano.jpg&title=Jordan%20Pond&author=Matthew%20Petroff&pre…:1
I'd like to be notified when a scene is loaded. What about adding very simple events like this? I guess there's a better approach...
https://github.com/danielnaber/pannellum/commit/dec4ab95a171cc51ca3f1bdd1e34f349cbbfb73d
As a user, I can then do:
$(document).ready(function() {
document.getElementById('pannellumFrame').contentWindow.sceneLoaded = function(sceneId) {
alert(sceneId);
}
});
Is it possible for this superb implementation to use a video instead of a stil image ?
The video would be pretransformed such as:
http://sphericam.com/portfolio/octocopter-in-la-720p-equirect-crop/
on mobile screen, is it possible to add up, left, right ,down button (like google map) and disable dragging using touch ? Currently, when embedded on a page, the page unable to scroll.
It would be nice if it was possible to display an image in the panorama at a given position. I guess it's somehow already possible by creating your own sprite
CSS class and then set the type
but an easier approach would be great. A common use case would be to hide the tripod that's still visible in the image.
The player at pannellum.org works well with iOS, but when I placed the player at my website it didn't work, as it use differents scripts/techs. If you need I can post more details (only tell me what you need).
First of all, I'm not a techhead by any stretch but I absolutely love Pannellum. I'm done with using flash and this is perfect. So I've been working with a few spheres on my website... turning into tours and having fun. I grabbed my ipad to view the images and they seem to be loading fine but rendering them skewed. At first I thot it was just my own panos and started looking into resolution and size limitations as well as resizing issues etc but then i came upon this thread (#25). On that thread, the example has a pano here: http://www.vraccess.co.uk/?p=29 which works perfectly on computer but on ipad the image has grainy lines - the same that's happening with my spheres. So I decided to take a screenshot (http://pianopricepoint.com/pannellum-ipad-screen.png). As mentioned, everything seems to be loading properly, it's just that the view is skewed and the image has only a narrow rotation of what appear to be the top of the image. Any thoughts around this? Cheers
Really nice VR viewer, thanks for developing it.
I've tried to put it together on my site but finding that my own work will not show in Chrome Version 39.0.2171.71 (64-bit) Mac or on my Android phone Version 39.0.2171.93. Does show in Safari.
I have embedded an example from a fellow user to try and troubleshoot, and find that this other persons example does work, even alongside my non-working example. Cannot see anything different in code used. Image is hosted on my same server as holding the pannellum.htm
The page I've been working on is here: http://www.vraccess.co.uk/?p=29
The code is:
<iframe style="border-style: none;" title="pannellum panorama viewer" src="http://www.vraccess.co.uk/vr_files/pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes" width="640" height="360" allowfullscreen="allowfullscreen"></iframe>And the Javascript console reports problems:
pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes:8 WebGL: INVALID_VALUE: texImage2D: width or height out of range
pannellum.htm?panorama=http://www.vraccess.co.uk/vr_files/images/bees_nest_vr.jpg&autoload=yes:10 Error: something went wrong with WebGL!
Any ideas? thanks very much, Will (Liverpool UK)
This is not so much an issue as a request. I'm in the process of making a tour of a factory. And so I made a quick diagram to show something that could possibly be implemented.
Let's say you had a hallway with 4 rooms. And each room was linked via hotspot so that the next door you open, the default view of the pano would open facing the next door. As shown in the picture, the default view or orientation of the pano would open facing the door of the next room (shown in red). But once you reach the end of the hall and start returning to previous rooms, the pano would open with the view that would be facing the wrong direction. Instead, you would want the next room to open with the yellow perspective or default view.
I'm not a programmer or tech guy at all but would it be possible to have the perspective elements for the next room load with the hotspot? Then the perceived tour would be more natural... as if you were 'walking' into the next room with the correct orientation already in place. Cheers
Distro: ArchLinux
Hugin: extra/hugin 2014.0.0-2
Version: pannellum-2.0.1_full and trunk (rev: 3d1f934)
When I call nona command it generates: 0, 1, 4, 5 faces files only (we are missing: 2 and 3). The current nona version accepts a different scripting syntax: '+p90' instead of 'p90' or '-p90' instead of 'p-90'.
diff --git a/generate.py b/generate.py
index faf086a..babee1d 100755
--- a/generate.py
+++ b/generate.py
@@ -72,8 +72,8 @@ text.append('p E0 R0 f0 h' + str(cubeSize) + ' n"TIFF_m" u0 v90 w' + str(cubeSiz
text.append('m g1 i0 m2 p0.00784314')
text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y0')
text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y180')
-text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p-90 r0 v360 w' + origWidth + ' y0')
-text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p90 r0 v360 w' + origWidth + ' y0')
+text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" -p90 r0 v360 w' + origWidth + ' y0')
+text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" +p90 r0 v360 w' + origWidth + ' y0')
text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y90')
text.append('i a0 b0 c0 d0 e0 f4 h' + origHeight + ' n"' + origFilename + '" p0 r0 v360 w' + origWidth + ' y-90')
text.append('v')
Please add parameters to support panoramas that weren't shot with with a full 360 degree rotation.
If I specify yaw and pitch at some scene in the config.json it doesn't start on this pre-configuration. I tried to change somethings on pannellum.js but it didn't worked out. Example:
"banheiro8": {
"title": "Banheiro",
"type": "multires",
"multiRes": {
"basePath": "./banheiro8",
"path": "/%l/%s%y_%x",
"fallbackPath": "./fallback/%s",
"extension": "jpg",
"tileResolution": 512,
"maxLevel": 3,
"cubeResolution": 1792
},
"yaw": 90,
"pitch": 0,
"hotSpots": [
{
"yaw": -176,
"pitch": -10,
"type": "scene",
"text": "Ir para Quarto",
"sceneId": "quarto8"
}
]
}
I'm really noob on this topic so sorry in advance for the nonsense I can say.
I still don't know very well which are the differences between: equirectangular, cubemap and multires images.
I don't know either if it is related with the differences between those pictures for example:
http://rauljimenez.info/dev/nerja-tour/examples/nerja-tour/R0010004.jpg (taken using Ricoh Theta camera)
http://rauljimenez.info/dev/nerja-tour/examples/examplepano.jpg
Is it possible to transform a panorama like the first one (taken with Ricoh = ¿fish eye?) to a rectilinear panorama?, something like this?
http://photo.net/learn/fisheye/
Using ?config= no longer seems to be able to load the pano image.
Very simple ex:
<iframe title="pannellum panorama viewer" width="400" height="350" allowfullscreen style="border-style:none;" src="/lib/pannellum/pannellum.htm?config=/panorama/test.json"></iframe>
test.json:
{
"autoload": true,
"panorama": "/images/panorama.jpg",
"showFullscreenCtrl" : false
}
The config file is located, because the showFullscreenCtrl
parameter is interpreted (false and the control does hide, true and it shows) but the actual image never loads, and watching the console shows the error
"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."
at line 72 of pannellum.htm
Using URL parameters
<iframe title="pannellum panorama viewer" width="400" height="350" allowfullscreen style="border-style:none;" src="/lib/pannellum/pannellum.htm?panorama=/images/panorama.jpg&amp;autoLoad=true"></iframe>
works just fine. Image auto loads. But of course I don't have control over the appearance of the Full Screen control (which, btw, does not seem to work in Chrome v.40) or the h/vaov that I need. The console does report "Resource interpreted as Image but transferred with MIME type text/html", though the image is correctly loaded.
Would it be possible to incorporate a stereographic projection mode to the viewer? It would add great "WOW" -effect to the viewing, when zooming out so much that a "little planet" effect would be seen. I'm not that great with maths, so better leave it to someone who can. For example Ricoh Theta viewer has this function: https://theta360.com/en/gallery/
under linux you get several errors using generate.py.
first error is a cast problem from float to int
Traceback (most recent call last):
File "./generate.py", line 84, in
for level in range(levels, 0, -1):
TypeError: range() integer start argument expected, got float.
you can fix this by cast var levels to int in line 84.
some thing like
second error is
Generating tiles...
Traceback (most recent call last):
File "./generate.py", line 85, in
os.makedirs(os.path.join(args.output, str(level)), exist_ok=True)
TypeError: makedirs() got an unexpected keyword argument 'exist_ok'
"exist_ok" is not a valid argument for makedirs() under linux python2.7.5+
you can fix this using "try catch"
for example
try:
os.makedirs(os.path.join(args.output, str(level)))
except OSError as e:
if e.errno != errno.EEXIST:
error 3&4 are also casting float to int problems
Traceback (most recent call last):
File "./generate.py", line 99, in
for i in range(0, tiles):
TypeError: range() integer end argument expected, got float.
cast it like this
for i in range(0, int(tiles)):
for j in range(0, int(tiles)):
the last error was a tile size problem if using -s option.
there was size 512 hard coded in the script.
Traceback (most recent call last):
File "./generate.py", line 108, in
tile.save(os.path.join(args.output, str(level), faceLetters[f] + str(i) + '_' + str(j) + extension))
File "/usr/lib/python2.7/dist-packages/PIL/Image.py", line 1439, in save
save_handler(self, fp, filename)
File "/usr/lib/python2.7/dist-packages/PIL/JpegImagePlugin.py", line 471, in _save
ImageFile._save(im, fp, [("jpeg", (0,0)+im.size, 0, rawmode)])
File "/usr/lib/python2.7/dist-packages/PIL/ImageFile.py", line 498, in _save
e.setimage(im.im, b)
SystemError: tile cannot extend outside image
i fix this in this way
for j in range(0, int(tiles)):
left = j * args.tileSize
upper = i * args.tileSize
right = min(j * args.tileSize + args.tileSize, size)
lower = min(i * args.tileSize + args.tileSize, size)
tile = face.crop([left, upper, right, lower])
after this modifications the script run fine here. tiles will generated in most modulo 8 formats. (64,128,256,512,1024 and so on)
thx
wolke
How to reproduce:
yawSpeed
gets assigned an invalid value in onDocumentMouseMove
because config.yaw
is compared to yaw
but only config.yaw
might be normalized to the range of -180...180. Also, I think, the code (yaw - config.yaw) * 0.2
doesn't take into account that you cannot simply find the diff between two values like this if diff(-180, 180) == 0.Hi,
I have tested your multi-resolution example and noticed that there are artifacts on tiles edges as you can see on the attached screenshot.
You can find it here : http://experiments.benvii.com/pannellum-master/examples/example-multires.htm
If you want to download tiles : http://experiments.benvii.com/pannellum-master/examples/multires_pic.tar.gz
I'm not good in webGL, I found on the web that this problem could be solved using a 'margin' factor, here : http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html?showComment=1344343442346#c7247639294688682721
Hope you will find a solution.
I can use webGL with google's examples and i'm running mac chrome version 39. I'm thinking something's broken.
Equirectangular images are rendering incorretly on mobile devices - including in the provided examples. Specifically iOS 8.2. It almost looks as if they're being rendered as shearicle images instead.
Cube images work ok everywhere. Equirectangular images work ok on desktop.
Any quick fix for this?
Hello Matt,
Really an amazing html5 player for panorama.
Was wondering if we can change the image of the arrow to any other image as a config change?
Also the same for the info image.
Cheers,
Adam
IE 11 (version 11.0.9600.17501) runs into the WebGL error ("Your browser does not support WebGL"), even though WebGL seems to be enabled (e.g. when visiting get.webgl.org - it says support is experimental). The console log says:
WEBGL11003: INVALID_VALUE: texImage2D
in pannellum.html line 626, Column 17 (...one of these per image...), and then
WEBGL11122: drawArrays: Texture is not cubemap complete. Alle cubemaps faces must be defined and be the same size.
in pannellum.html, line 730, column 13 (probably caused by the errors above)
Debugging show that the error code from gl.getError() is 1281 (GL_INVALID_VALUE).
Each cube is 1142x1142 pixels and it works with Firefox and Chrome. Maximum size is not the problem (maximum size is about 16,000).
Test URL: http://danielnaber.de/tmp/pannellum/ (yes, it's the same image for all six surfaces)
You can probably reproduce this with browserstack.com (saucelabs browsers don't seem to have WebGL enabled).
The documentation at https://msdn.microsoft.com/en-us/library/ie/dn302435%28v=vs.85%29.aspx has different parameters (e.g. width and height), but I have no clue about WebGL so I'm not sure if this is relevant.
Hello again,
The drag and drop and post-drop inertia for the tours on mobile devices is not really smooth. Actually almost as soon as you drop the finger, the image stops rotating.
I increased the friction
value in pannellum.js
(0.85 by default) and that works for Desktop (it keeps rotating for a bit longer) but for phones I don't appreciate any difference on the behavior. I was rising the value until 0.98 and still not visible changes.
Is it somewhere else another value which is responsible for this "intertia" effect ?
Thanks!
When moving slowly, hot spot movement is "jumpy" without subpixel rendering. Subpixel rendering works in Chrome, but not in Firefox. Applying a very small rotation fixes this for the actual hot spot but causes rendering issues for the tooltip. A workaround needs to be devised, since it doesn't seem like Firefox's behavior is going to change.
Something seems to have been broken(?) by this commit: e90d65b. I cannot get a simple equirectangular panorama to display anymore after that change. My test tour is this:
{
"default": {
"firstScene": "library"
},
"scenes": {
"library": {
"panorama": "R0010216-stacked.JPG"
}
}
}
Instead of the image (which is loaded correctly according to Firebug), I only see a grey area. Setting ignoreGPanoXMP
to true makes everything work again - so maybe the default should be set to true
? I can send you the affected image by email if needed.
Is it possible to use generate.py in such a way that it can create multiview images from a series of 6 cubic images. This would enable the tripod to be photoshopped out, for example in just one place.
Ta, Steve C
Hello Matt,
the full screen button disappear on iPhone for Safari and Chrome. On normal Safari on my iMac works fine.
Is this normal?
Cheers,
adam
Hello.
As far as I can see, fallback for non-WebGL is only working for multiRes type (libpannellum.js line 65).
There is a reason why this check is done !gl && this.imageType == 'multires'
? Would not work the CSS 3D transform renderer for cubemap
?
I've been creating some real estate tours and have had spheres that aren't displaying properly. It seems that when using a JSON tour Pannellum is ignoring the "vaov" and "vOffset" parameters within a scene. I've tried both using an integer as well as a string and in both cases the value is ignored with the image being displayed in the centre of the scene with identical black spots appearing above and beneath the image.
Example can be seen here: www.evolutionsmc.com/real-estate/204Alton/pannellum.htm?tour=assets/tour.json
Thanks.
Edit: I'm using the 2.1.0 release.
The multires viewer uses suboptimal zoom levels, particularly when the viewer is in a portrait aspect ratio. The checkZoom
function of libpannellum.js
needs to be improved and should probably use the diagonal field of view.
The problem
When creating panoramas, sometimes we do not have (have not shot) the full sequence of needed images (the nadir and zenith ones for example). So the stitching software (like Hugin for example) leave black fields. The new Partial panorama option of pannellum is very convenient, but still even it leaves black fields in place of missing images (it is normal of course). I've been using pan0 for a long time and it had options of limiting the FOV, pitch etc, so adding these to pannellum would be very convenient.
Solution
Since I need this functionality, I fiddled a bit with the code of pannellum.js and implemented this feature. I use it and it works with partial panoramas and equirectangular ones. I haven't tested it with cube and multires, but they should also work I think...
The changes to the code
The Changelog shortly is:
Limitations
If you want and if you like my changes you can merge them in the code.
Thanks
P.S. Great job with pannellum btw. I love it and it is my new favorite for panoramas :)
Here is the code of the patch
I am sorry I use this way of proposing a patch instead of Forking and Pull Request, but it is faster for me this way...
--- pannellum.js.orig 2014-08-31 08:22:44.000000000 +0300
+++ pannellum.js 2014-08-31 08:28:28.635404021 +0300
@@ -48,8 +48,14 @@
var defaultConfig = {
hfov: 100,
+ minhfov: 50,
+ maxhfov: 120,
pitch: 0,
+ minpitch: -90,
+ maxpitch: 90,
yaw: 0,
+ minyaw: -36000,
+ maxyaw: 36000,
haov: 360,
vaov: 180,
voffset: 0,
@@ -196,9 +202,15 @@
function onDocumentMouseMove(event) {
if (isUserInteracting) {
//TODO: This still isn't quite right
- config.yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(event.clientX / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
- var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
- config.pitch = ((Math.atan(event.clientY / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
+ var yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(event.clientX / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
+ // Ensure the yaw is within min and max allowed
+ config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
+
+ var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
+
+ var pitch = ((Math.atan(event.clientY / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
+ // Ensure the calculated pitch is within min and max allowed
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
}
}
@@ -218,10 +230,16 @@
function onDocumentTouchMove(event) {
// Override default action
event.preventDefault();
-
- config.yaw = (onPointerDownPointerX - event.targetTouches[0].clientX) * 0.1 + onPointerDownYaw;
- config.pitch = (event.targetTouches[0].clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch;
- animate();
+
+ var yaw = (onPointerDownPointerX - event.targetTouches[0].clientX) * 0.1 + onPointerDownYaw;
+ // Ensure the yaw is within min and max allowed
+ config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
+
+ var pitch = (event.targetTouches[0].clientY - onPointerDownPointerY) * 0.1 + onPointerDownPitch;
+ // Ensure the calculated pitch is within min and max allowed
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
+
+ animate();
}
function onDocumentTouchEnd() {
@@ -362,7 +380,10 @@
newTime = Date.now();
}
var diff = (newTime - prevTime) * config.hfov / 1700;
-
+
+ var pitch = config.pitch;
+ var yaw = config.yaw;
+
// If minus key is down
if (keysDown[0]) {
zoomOut(diff);
@@ -376,25 +397,37 @@
// If up arrow or "w" is down
if (keysDown[2] || keysDown[6]) {
// Pan up
- config.pitch += diff;
+ pitch += diff;
+
+ // Ensure the calculated pitch is within min and max allowed
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
}
// If down arrow or "s" is down
if (keysDown[3] || keysDown[7]) {
// Pan down
- config.pitch -= diff;
+ pitch -= diff;
+
+ // Ensure the calculated pitch is within min and max allowed
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, pitch));
}
// If left arrow or "a" is down
if (keysDown[4] || keysDown[8]) {
// Pan left
- config.yaw -= diff;
+ yaw -= diff;
+
+ // Ensure the yaw is within min and max allowed
+ config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
}
// If right arrow or "d" is down
if (keysDown[5] || keysDown[9]) {
// Pan right
- config.yaw += diff;
+ yaw += diff;
+
+ // Ensure the yaw is within min and max allowed
+ config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, yaw));
}
// If auto-rotate
@@ -437,8 +470,13 @@
} else if (config.yaw < -180) {
config.yaw += 360;
}
-
- config.pitch = Math.max(-85, Math.min(85, config.pitch));
+
+ // Ensure the yaw is within min and max allowed
+ config.yaw = Math.max(config.minyaw, Math.min(config.maxyaw, config.yaw));
+
+ // Ensure the calculated pitch is within min and max allowed
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, config.pitch));
+
renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180);
renderHotSpots();
@@ -589,8 +627,10 @@
var value = URL[i].split('=')[1];
json += '"' + option + '":';
switch(option) {
- case 'hfov': case 'pitch': case 'yaw': case 'haov': case 'vaov':
- case 'voffset':
+ case 'hfov': case 'minhfov': case 'maxhfov':
+ case 'pitch': case 'minpitch': case 'maxpitch':
+ case 'yaw': case 'minyaw': case 'maxyaw':
+ case 'haov': case 'vaov': case 'voffset':
json += value;
break;
default:
@@ -715,11 +755,7 @@
case 'pitch':
// Keep pitch within bounds
- if (config.pitch < -85) {
- config.pitch = -85;
- } else if (config.pitch > 85) {
- config.pitch = 85;
- }
+ config.pitch = Math.max(config.minpitch, Math.min(config.maxpitch, config.pitch));
break;
case 'autoload':
@@ -818,13 +854,13 @@
function setHfov(i) {
// Keep field of view within bounds
- if (i < 50 && config.type != 'multires') {
- config.hfov = 50;
+ if (i < config.minhfov && config.type != 'multires') {
+ config.hfov = config.minhfov;
} else if (config.type == 'multires' && i < canvas.width
/ (config.multiRes.cubeResolution / 90 * 0.9)) {
config.hfov = canvas.width / (config.multiRes.cubeResolution / 90 * 0.9);
- } else if (i > 120) {
- config.hfov = 120;
+ } else if (i > config.maxhfov) {
+ config.hfov = config.maxhfov;
} else {
config.hfov = i;
}
Hi Matthew,
I'm experimenting with pannellum, and, despite the multiresolution example worked
as it should, I can't manage to have my own multiresolution pano going OK.
I modified generate.py in order to work with Python 2.7.9 (Debian testing "jessie"),
but the issues here were about errors when trying to save files in directories already
existing and math.ceil returning a float instead of int.
The problem with the panorama is: the cube faces do not join - sometimes some faces
do join, but - I can see that the faces are not properly aligned.
I have pannellum 2.0.1.
Also I noticed that the config.json is always created with "extension": "jpg" ;)
thanks!
PS: Attached file shows the left (right side in picture), back (left in pic), top and bottom faces
I'm using a JSON configuration as follows:
default: {
minHfov: 50,
maxHfov: 145,
hfov: 122,
autoRotateInactivityDelay: 5000,
autorotate: 5,
firstScene: "R0010178-_-JPG",
autoLoad: true,
},
....
And using scenes with type cubemap
And it actually does not autorotate. Did I understand something wrong?
Currently, positioning hot spots is rather inconvenient, often devolving to trial and error. To make this process easier, a configuration option should be added that logs the mouse's pitch and yaw position values when the mouse button is clicked. Obviously, this option shouldn't be used in production.
I am currently developing a simple wordpress plugin for pannellum to embed it into my own site (https://github.com/languitar/pannellumpress). The current logic is quite simple and assumes, that each panorama is fully specified by a config.json file. So it would be quite nice if the generator utility could optionally also output such a file or its contents instead of the iframe link.
This is a style issue. It would be quite nice to have an animation effect when an image is loaded. Just the regular fadeIn (like Jquery) would be fair enough. There is an example with canvas here.
I was trying to implement it myself but I found out that this actually happens in libpannellum.js and is quite complex.
Hi there !
At first, I want to thank you for this awesome viewer !
I try to customize it, and I have an issue with the "load_button" : when my mouse is hover, sometimes it's working background color change one time and stay freeze even if my mouse is out, and a lot of times nothing happens.
Do you have a solution for this ?
NB : This issue is with Chrome browser, Firefox is okay
Thank you for reading,
Peter (sorry for my bad english)
From the example in the website, the zoon is not working in Android devices. Not double finger zoom or even double click zoom.
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.