Coder Social home page Coder Social logo

panolens.js's People

Contributors

dependabot[bot] avatar ellukesmith avatar emibap avatar flyandi avatar giordanocardillo avatar leonexcc avatar naranjamecanica avatar pchen66 avatar xuanvan229 avatar zcherries avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

panolens.js's Issues

Multiple hotsposts

Hello.

How to add multiple hotspot links in each panorama to create "stories" ?

Thanks.
Pierre

Display errors on load on iOS

On my iPhone 6S and 7 i noticed some weird display errors when i open my site where i embedded the panolens iframe. I need to reload the page several times until the error is gone. It looks like it is zoomed in very far:
pano_error
any idea how to fix this issue?

How to use Key control?

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.

Cardboard mode broken with newer three.js

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.

How can you make a resize of the container or canvas?

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.

IE11 bug

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.

panorama.dispose() on video gallery

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 ?

garbage collection/destroy method

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?

Stereoscopic panoramas support

Hey, great piece of software!

Quick question: do you plan to add support for stereoscopic panoramas (VR mode?)

Best!
MBZ

Framerate and head-tracking lag

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!

window resize event is't work when container with classname 'panolens-container'

is't work:

<div class="AAAA"></div>
viewer = new PANOLENS.Viewer({ container: document.getElementsByClassName("AAAA")[0], });

work:

<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({});

Linking panoramas

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

Changing Infospot icon to image

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

Draggable infospot?

Very nice library and thanks a lot for that.

However, I have a question. Is there an easy way to make infospot draggable?

Infospot debugging not working

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.

Infospot onClick to another pano?

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.

Does panolens have a "dwelling" animation script?

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?

Any Example using VRCJS.SpriteText ??

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 ?

Add autoplay to VideoPanorama constructor

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 ?

Remove white dot

How can i remove the white dot in the center of the screen in stereoscopic and cardboard mode?

High CPU usage, even when idle

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?

No Sound on IOS

There's no sound playing in IOS-Devices. Tested on Iphone 6Plus 9.3.4

How to auto rotate?

How to auto rotate, and stop it by user operate and restore after a few seconds?

Prev/Next Buttons?

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?

Some infospots sometimes fail to display in Safari

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.

Incorrect aspect ratio

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?)

Large Panorama Not Loading Properly...

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?

Progress Bar in Video Panorama

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?

Zoom

Hi,

  1. How can initialize panorama with a maximum zoom out? Or how to set zoom in panorama?
  2. It is possible draped cursor opposite directions?

Black screen in-between panoramas

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?

Object Loader in infospot

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?

Set initial rotation angle/yaw?

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.