pchen66 / panolens.js Goto Github PK
View Code? Open in Web Editor NEWJavascript panorama viewer based on Three.js
Home Page: https://pchen66.github.io/Panolens/
License: MIT License
Javascript panorama viewer based on Three.js
Home Page: https://pchen66.github.io/Panolens/
License: MIT License
Hi, I need to lock the zoom so I do not lose the scroll of the page. Would anyone know how to do this?
Thank you so much
Hello.
How to add multiple hotspot links in each panorama to create "stories" ?
Thanks.
Pierre
At the moment, the reticle icon is visible underneath the text. Should be on top i guess.
Hello,
I want to use Key control but it is not working;
N.B: I have checked onKeydown event of Orbitcontrol but it is not working.If there is any example then it is much appreciated.
Using three.js revision 84, only the left eye for cardboard mode renders, the right eye area is completely black. If I use revision 78, same as the one in the examples, then both eyes work.
Hi
I could make the canvas rewrite again to fit the screen. I've tried this.
window.addEventListener('resize', function() { console.log(viewer); viewer.HANDLER_WINDOW_RESIZE(); });
But I did not work, somebody could help me. Thank you so much.
When I touch an infospot on a touch device, the infospots don't function properly.
For example: in one of your examples http://pchen66.github.io/Panolens/examples/panorama_infospot.html when i touch the infospot on an iPhone (iPhone6+ & iOS10.3.1), it just fadesOut rather than showing the container with the corresponding content.
Hi I am trying to add linked panorama but it seems like it is not working.
http://codepen.io/smitshah/pen/QEyrez
please check line number 44 to 49 you will get idea...
or
if you have any working example then it is much appreciated. ;)
Panolens fails to load images in IE11.
Steps to reproduce: open any example in IE11. An InvalidateStateError is thrown.
Cause: IE11 incorrectly throws this error when an XMLHttpRequest object has the responseType set before the request is opened.
Fix: ImageLoader.js
Swap lines 86 & 87 so that the request is opened before the responseType is set.
I guess there is issue with height and width in cardboard (Mobile).I have also tested in mobile full screen mode.
Is there a way to remove the black stroke?
Hi,
I tried the video panorama demo (http://pchen66.github.io/Panolens/examples/panorama_video.html) on iOS devices and got a black background with the video controls. Nothing happens when I press the play button.
I saw this both on iOS 9.3.1 and 10.2.1
Is this a known issue that was unaware of?
Thanks
Hello ,
When we connect two panorama i.e. image and video panorama using infospot focus demo somehow it is not working , any hint?
Is it possible to switch panorama's by calling:
panorama.dispose();
viewer.remove( panorama );
panorama = new PANOLENS.VideoPanorama( this.url, { autoplay: true, loop:true, muted:false } );
viewer.add( panorama );
viewer.setPanorama( panorama );
I am using your gallery example as a base, but cannot seem to delete the video object and switch to a new panorama. The current one continues to run in the background. Anyone experienced this ?
hi there
great plugin! works pretty well and is one of the most high performance pano plugins out there!
i am using it in conjunction with the magnific popup plugin and encountered some problems.
in order to have multiple pano views and only load three.js and panolens.js when needed i create new pano instances when the user opens a popup. i encountered pretty significant performance issues when creating multiple instances of the panolens plugin. i somehow doubt that the plugin was intended to be used this way.
is there a destroy method which detaches all the listeners and does all the carbage collection? or is this maybe an issue with three.js?
Closed
Hey, great piece of software!
Quick question: do you plan to add support for stereoscopic panoramas (VR mode?)
Best!
MBZ
Hi!
You script is best! I have one question: How to integrate to website with size: width:700px?
Look: http://www.panoo.eu/image/panorama-4/
Thank you :-)
Is there a param to start with Sensor Control by default?
Hey guys, loving this library. I just have one comment/concern:
When I load up a fairly large panoramic video and try to view it in cardboard mode, I often see framerates and thus head-tracking responsiveness lag considerably more than if I just build the experience myself. When I implement a simple Three.js sphere with Stereo Effect and Device Orientation Controls, then load up a
I'm not sure what's causing the slowdown, but it's preventing me from using this library in a very high-profile project I'm working on, which is a drag. Let me know if there's something I can do to speed up these framerates!
I use panorama.position.set(x,y,z), but it doesn't work...
I just want to set the initial visual angle of the panorama, and which attr should I set ?
<div class="AAAA"></div>
viewer = new PANOLENS.Viewer({ container: document.getElementsByClassName("AAAA")[0], });
<div class="AAAA panolens-container"></div>
viewer = new PANOLENS.Viewer({ container: document.getElementsByClassName("AAAA")[0], });
or
<div class="panolens-container"></div>
viewer = new PANOLENS.Viewer({});
I'm trying to link a few panoramas. The link supposed to be in certain position on the screen. I was trying to use panorama_linking as an example but in firefox I get completely different mouse coordinates from the coordinates in example's html. In example's html the coordinates of infospot is ( -74.56, -58.83, 31.10 ), but firefox for the same infospot gives me these coordinates - { 3690.64, -2912.02, 1539.42 }. What I'm doing wrong? How to get right coordinates?
Thanks,
Alex
Hi,
I am loving this but was curious if it were possible to replace the infospot with a custom image? Also would it be possible to have a container replace the infospot instead of it appearing on hover.
Thanks,
~ Lou
Very nice library and thanks a lot for that.
However, I have a question. Is there an easy way to make infospot draggable?
It looks like using Ctrl
and clicking/hovering to place Infospots is no longer outputting correct coordinates. Using the Infospot example, you can see that it's correct when you are over the Infospot itself:
panolens.min.js:3 { -4668.16, -1612.16, -724.72 }
panolens.min.js:3 { -4671.96, -1604.87, -717.87 }
panolens.min.js:3 { -4674.45, -1604.54, -702.96 }
panolens.min.js:3 { -4678.18, -1604.03, -680.59 }
panolens.min.js:3 { -4683.22, -1596.58, -666.30 }
panolens.min.js:3 { -4688.25, -1589.14, -652.02 }
panolens.min.js:3 { -4691.98, -1588.64, -629.69 }
panolens.min.js:3 { -4695.70, -1588.14, -607.38 }
panolens.min.js:3 { -4699.42, -1587.64, -585.07 }
panolens.min.js:3 { 94.37, -32.29, -4.19 }
panolens.min.js:3 { -4729.79, -1580.54, 236.81 }
panolens.min.js:3 { -4729.50, -1579.32, 250.91 }
panolens.min.js:3 { -4731.77, -1571.26, 264.37 }
panolens.min.js:3 { -4731.63, -1570.65, 271.40 }
panolens.min.js:3 { -4734.04, -1563.21, 277.81 }
panolens.min.js:3 { -4736.30, -1555.18, 291.23 }
panolens.min.js:3 { -4738.70, -1547.75, 297.62 }
panolens.min.js:3 { -4740.73, -1540.21, 303.98 }
panolens.min.js:3 { -4744.35, -1525.01, 316.66 }
That different set in the middle seems to be the intended coordinates.
Hi,
I am having difficulty with setting the onClick event on a infoSpot. What I am looking for is a way to link a infoSpot to another pano.
I wanted to have more control on the positioning of the infospot than using the pano linking.
Is this something you can help with? I appreciate you assistance yesterday.
The "dwelling time " is the time the center cursor/crosshairs is hovering over a hotspot. After a predefined number of seconds the system will "see" the hovering as a touch/mouseclick and proceeds to follow the action belonging to that touch/mouseclick.
I would like to have this dwelling made visible. Ray talks about an option three.js already addresses this thing. But how can this be used within panolens? And would there be several presets to choose from?
Hello,
I have tried using PANOLENS.SpriteText but got an error "panolens-player.js:9160 Uncaught TypeError: this.addText is not a function", can you please give me example which uses PANOLENS.SpriteText ?
Hello,
How to do Multiresolution Panoramas like krpano , Can I request add this feature in panolens?
Hi there,
Fantastic library.
Would it be possible to add autoplay as an option to VideoPanorama(src, options, radius) ? Is there a reason it's not built in, other than bandwidth consumption ?
How can i remove the white dot in the center of the screen in stereoscopic and cardboard mode?
Are you open to publishing this as an npm package?
Panolens seems to max out CPU even when there's no activity or interaction, both for photos and videos. Other web-based viewers drop to 0% when idle which is important for real-world use on web pages.
I'm guessing there's a tight render/input loop somewhere in the code which needs to be made event-driven.
Confirmed on desktop Chrome and I suspect it's the case on mobile too. I haven't tried profiling yet - any pointers on where to look?
Hi! I have a 8192x4096 pano image. When I load the image I get this :
https://digitalblend.io/echange/pano-bug.png
Any idea? Thanks!
EDIT: This issue happens with node webkit.
There's no sound playing in IOS-Devices. Tested on Iphone 6Plus 9.3.4
How to auto rotate, and stop it by user operate and restore after a few seconds?
Hi there,
I'm using code based off your "Simple Gallery" code that you've provided. I've got everything running smoothly.
However, I'd like to be able to add a next and previous button that would navigate through the image in the gallery. I've tried using previousElementSibling and nextElementSibling but this won't get all of the image in my gallery. Could you help with this?
Hello @pchen66. Thanks for addressing #16 earlier!
After noticing it in my own project, I'm seeing one or the other of the infospots on the example infospot panorama fail to display in Safari (I'm on 9.1.1). It seems to be random which loads, or if both load; I suspect there is a race condition involved because it appears having some items cached mitigates the issue (thus, it's easiest to replicate in private browsing or with the cache off).
Any hope? My stab in the dark would be that perhaps Safari doesn't handle the image load event the same way as others (Chrome works well) and it's racing to display before the infospot image is available.
When I use the imageloader and load an image, the image is badly skewed (super tall). Changing the camera's FOV doesn't change things. Is there any way to get Panolens to preserve aspect ratio?
(Side note: how do you turn off mousewheel zoom?)
Hi,
I have tried to load Image but seems like camera position is set far up then regular position or something else... not sure about this... May I now How can I load this type of large panorama image?
panorama image ,does not support auto rotate?
Hi,
I had tried with Adding Progress Bar in Video Panorama,but it seems like progress bar working only in Image panorama not in video panorama.
Any hint?
Hi,
When using setPanorama
, by default, a black screen is visible while the new panorama is loading. I've already implemented a custom loading screen that displays a loading animation while this is happening. To enhance the experience I'd like to get rid of the black screen in-between panorama's. Is there an easy way to do it?
Steps to reproduce:
Open the infospot_focus example in Safari and select the VR icon.
Reticle displays as an infospot icon.
Reticle appears normally if there are no infospots in the scene.
Tested under: Safari 9.1.1 (OSX 10.10.5), Safari 9.0.1 (iOS 9.0.1)
I want to load Object in infospot.
for example load object when user hover on infospot and display object in popup
so I have tried below code
`
var time = new Date().getMilliseconds();
var aid = "a" + time;
var iid = new PANOLENS.Infospot(350, PANOLENS.DataImage[type]);
iid.playerid = aid;
infospoteventlistner.push(aid);
var elementId = this.randerContainer(counter);
document.getElementById(elementId).innerHTML = player.getObjectHtml( useruploadbasepath + screenData.typevalue,screenData.position);
iid.addHoverElement(document.getElementById(elementId));
iid.position.set(screenData.position.x, screenData.position.y, screenData.position.z);
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
var loader = new THREE.OBJLoader( manager );
loader.load( url, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
child.material.transparent = true;
var object = new THREE.Mesh( child.geometry, child.material);
}
} );
viewer.addUpdateCallback( function () {
object.rotation.y += 0.01;
} );
object.position =position;
return object;
}, onProgress, onError );
`
I am not able to see any Object
Can Anyone Help me regarding this?
Hi,
Is it possible to set the initial rotation angle / yaw as it is possible with google VR View and its "start_yaw" parameter (https://developers.google.com/vr/concepts/vrview-web)?
I tried to rotate via the control but this didn't work the way I tried it:
viewer.getControl().rotateLeft(-90 * Math.PI / 180);
viewer.getControl().update();
(This worked when putting an alert("hello") before it so it seems I'm struggling with timing problems there)
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.