Cannot drag to move in vue.
S-N-O-R-L-A-X opened this issue · comments
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": [
]
}
}
})
Any help will be appreciated, thanks.
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.
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.
I checked the index file and it read like this.
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.
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.
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.
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.