search

mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.23k stars 722 forks source link

Cannot drag to move in vue. #1149

Closed S-N-O-R-L-A-X closed 1 year ago

S-N-O-R-L-A-X commented 1 year ago

I'm using pannellum in vue. The panorama rendered well and fullScreen ran well. However, I could not use mouse to drag to move the view. The console raised this error. I used this to initialize and render <div ref="panorama"></div>

const viewer = pannellum.viewer(this.$refs.panorama,
            {
                "default": {
                    "firstScene": "first",
                    "orientationOnByDefault": false,
                    "autoLoad": true,
                    // "autoRotate": -2,
                    "friction": 0.15,
                    "showZoomCtrl": true,
                    "showFullscreenCtrl": true,
                    // "touchPanSpeedCoeffFactor": 1,
                    "yaw": 0,
                    "pitch": -60,
                    "minPitch": -60,
                    "maxPitch": 60,
                    "roll": 0,
                    "hfov": 60,
                    "draggingMouseButtons": "all",
                    "minHfov": 10,
                    "maxHfov": 60,
                    "crossOrigin": "anonymous"
                },
                "scenes": {
                    "first": {
                        "type": "equirectangular",
                        "panorama": this.src,
                        "preview": this.src,
                        "hotSpots": [

                        ]
                    }
                }
            })

image image

Any help will be appreciated, thanks.

mpetroff commented 1 year ago

Other than draggingMouseButtons, which isn't a configuration parameter (but shouldn't hurt anything), your configuration looks fine. The console messages are entirely unrelated to Pannellum.

I'm pretty sure the dragging issue has something to do with Vue, but the code snippet you provided isn't sufficient to diagnose this. I suspect there's another event handler that is preempting Pannellum's; I can't be sure, but that's the avenue I'd start with investigating. If possible, a live example to look at that displays the issue would be ideal; if not, I'd recommend using your browser's developer tools to look at the mouse event handlers.

S-N-O-R-L-A-X commented 1 year ago

Other than draggingMouseButtons, which isn't a configuration parameter (but shouldn't hurt anything), your configuration looks fine. The console messages are entirely unrelated to Pannellum.

I'm pretty sure the dragging issue has something to do with Vue, but the code snippet you provided isn't sufficient to diagnose this. I suspect there's another event handler that is preempting Pannellum's; I can't be sure, but that's the avenue I'd start with investigating. If possible, a live example to look at that displays the issue would be ideal; if not, I'd recommend using your browser's developer tools to look at the mouse event handlers.

Thanks for your answer. I have checked the event listner in developer tools and find these listeners. image I checked the index file and it read like this. image I tried removing listener in mousedown and mouseup from index but it still didn't work. Is there a way to solve this? By the way, keyboard control works fine.

S-N-O-R-L-A-X commented 1 year ago

image I have found the problem. It seems that the pnlmui css is lost so the height of pnlm-ui pnlm-grab box is 0. When I add css manually as follows, it works.

.pnlm-ui {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1
}

But I still wonder why this happens. I imported pannellum in index.html as follows 

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- this should not be deleted -->
  <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
  <title>Vite App</title>
</head>

The styles of hotspots work fine, but the css of class pnlm-ui pnlm-grab are lost.

mpetroff commented 1 year ago

You should be using:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />

You were using the CSS for v2.3.2 of Pannellum, which, not unsurprisingly, doesn't work with v2.5.6.

S-N-O-R-L-A-X commented 1 year ago

You should be using:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css" />

You were using the CSS for v2.3.2 of Pannellum, which, not unsurprisingly, doesn't work with v2.5.6.

Yeah, that's the key.