Pannellum lesson2

{%hackmd uPan7DkRQeaRZyTbmKU7Hw %} # Pannellum lesson2 ![IMG_1060](https://hackmd.io/_uploads/rkiIYzg7Je.png) ## 300.html 原範例換圖 ```htmlembedded= <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hot spots</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script> <style> #panorama { width: 600px; height: 400px; } </style> </head> <body> <div id="panorama"></div> <script> pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "/pics/scu1.jpg", /* * Uncomment the next line to print the coordinates of mouse clicks * to the browser's developer console, which makes it much easier * to figure out where to place hot spots. Always remove it when * finished, though. */ //"hotSpotDebug": true, "hotSpots": [ { "pitch": 14.1, "yaw": 1.5, "type": "info", "text": "Baltimore Museum of Art", "URL": "https://artbma.org/" }, { "pitch": -9.4, "yaw": 222.6, "type": "info", "text": "Art Museum Drive" }, { "pitch": -0.9, "yaw": 144.4, "type": "info", "text": "North Charles Street" } ] }); </script> </body> </html> ``` ### 熱點格式說明 ```htmlembedded=30 "hotSpots": [ { "pitch": 14.1, "yaw": 1.5, "type": "info", "text": "Baltimore Museum of Art", "URL": "https://artbma.org/" }, ] ``` ![image](https://hackmd.io/_uploads/B17uTe7fJg.png) ### online tool momento360 ![image](https://hackmd.io/_uploads/rJNOoZXz1g.png =300x) * 範例中有三個熱點設定 * 熱點符號i，滑鼠懸停時，出現提示文字 * pitch 上下(逆時針為正，右手定則)角度 * yaw 左右(逆時針為正，右手定則)角度 * type 熱點符號 * text 提示文字 * URL 外連網址(這個可以運用，連結到自訂網址) --- :::spoiler ChatGPT 美化熱點 >貼上300.html >美化熱點 ::: ## 301.html 全螢幕+美化熱點 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全螢幕+美化熱點</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #panorama { width: 100%; height: 100%; } /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */ .custom-hotspot { height: 30px; width: 30px; background: #ff6347; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot:hover { transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */ } div.custom-tooltip span { visibility: hidden; position: absolute; border-radius: 5px; background-color: rgba(255, 255, 255, 0.8); /* 添加透明度 */ color: #000; text-align: center; max-width: 200px; padding: 8px 12px; cursor: default; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } div.custom-tooltip:hover span { visibility: visible; } div.custom-tooltip:hover span:after { content: ''; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */ bottom: -20px; left: 50%; /* 箭頭在工具提示的正中央 */ transform: translateX(-50%); } </style> </head> <body> <div id="panorama"></div> <script> // 創建視圖 viewer = pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "pics/street1.jpg", "hotSpots": [ { "pitch": 14.1, "yaw": 1.5, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": "Baltimore Museum of Art" }, { "pitch": -9.4, "yaw": 222.6, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": "Art Museum Drive" }, { "pitch": -0.9, "yaw": 144.4, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": "North Charles Street" } ] }); // 熱點生成函數 function hotspot(hotSpotDiv, args) { hotSpotDiv.classList.add('custom-tooltip'); var span = document.createElement('span'); span.innerHTML = args; hotSpotDiv.appendChild(span); span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px'; span.style.marginTop = -span.scrollHeight - 12 + 'px'; } </script> </body> </html> ``` :::spoiler ChatGPT 熱點加上縮圖 >貼上301.html >熱點加上圖片 ::: ## 302.html 加上縮圖 + 改變文字 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加上縮圖+改變文字</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #panorama { width: 100%; height: 100%; } /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */ .custom-hotspot { height: 30px; width: 30px; background: #ff6347; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot2 { height: 30px; width: 30px; background: #63ff47; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot:hover { transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */ } /* 提示氣泡樣式 */ div.custom-tooltip span { visibility: hidden; position: absolute; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */ color: #000; text-align: center; max-width: 300px; padding: 10px; cursor: default; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* 當滑鼠懸停時，顯示提示內容 */ div.custom-tooltip:hover span { visibility: visible; } /* 提示內的圖片樣式 */ div.custom-tooltip img { width: 100%; height: auto; border-radius: 3px; margin-bottom: 10px; } /* 提示箭頭 */ div.custom-tooltip:hover span:after { content: ''; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */ bottom: -20px; left: 50%; /* 箭頭在工具提示的正中央 */ transform: translateX(-50%); } </style> </head> <body> <div id="panorama"></div> <script> // 創建視圖 viewer = pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "pics/street1.jpg", "hotSpots": [ { "pitch": -1, "yaw": 110, "cssClass": "custom-hotspot2", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "餅乾店", "imgSrc": "pics/icon.png" } }, { "pitch": -9.4, "yaw": 222.6, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "Art Museum Drive", "imgSrc": "pics/icon.png" } }, { "pitch": -0.9, "yaw": 144.4, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "網紅咖啡廳", "imgSrc": "pics/icon.png" } } ] }); // 熱點生成函數，當滑鼠懸停時顯示圖片與文字 function hotspot(hotSpotDiv, args) { hotSpotDiv.classList.add('custom-tooltip'); var span = document.createElement('span'); // 添加圖片與文字 var img = document.createElement('img'); img.src = args.imgSrc; span.appendChild(img); var text = document.createElement('div'); text.innerHTML = args.text; span.appendChild(text); hotSpotDiv.appendChild(span); // 設置提示框的位置 span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px'; span.style.marginTop = -span.scrollHeight - 12 + 'px'; } </script> </body> </html> ``` ## 303.html 設計縮圖尺寸 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加上縮圖+改變文字</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #panorama { width: 100%; height: 100%; } /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */ .custom-hotspot { height: 30px; width: 30px; background: #ff6347; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot2 { height: 30px; width: 30px; background: #63ff47; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot:hover { transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */ } /* 提示氣泡樣式 */ div.custom-tooltip span { visibility: hidden; position: absolute; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */ color: #000; text-align: center; max-width: 300px; padding: 10px; cursor: default; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* 當滑鼠懸停時，顯示提示內容 */ div.custom-tooltip:hover span { visibility: visible; } /* 提示內的圖片樣式 */ div.custom-tooltip img { width: 100px; height: auto; border-radius: 3px; margin-bottom: 10px; } /* 提示箭頭 */ div.custom-tooltip:hover span:after { content: ''; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */ bottom: -20px; left: 50%; /* 箭頭在工具提示的正中央 */ transform: translateX(-50%); } </style> </head> <body> <div id="panorama"></div> <script> // 創建視圖 viewer = pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "pics/street1.jpg", "hotSpots": [ { "pitch": -1, "yaw": 110, "cssClass": "custom-hotspot2", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "餅乾店", "imgSrc": "pics/scene1.png" } }, { "pitch": -9.4, "yaw": 222.6, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "Art Museum Drive", "imgSrc": "pics/scene2.png" } }, { "pitch": -0.9, "yaw": 144.4, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "網紅咖啡廳", "imgSrc": "pics/scene3.png" } } ] }); // 熱點生成函數，當滑鼠懸停時顯示圖片與文字 function hotspot(hotSpotDiv, args) { hotSpotDiv.classList.add('custom-tooltip'); var span = document.createElement('span'); // 添加圖片與文字 var img = document.createElement('img'); img.src = args.imgSrc; span.appendChild(img); var text = document.createElement('div'); text.innerHTML = args.text; span.appendChild(text); hotSpotDiv.appendChild(span); // 設置提示框的位置 span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px'; span.style.marginTop = -span.scrollHeight - 12 + 'px'; } </script> </body> </html> ``` :::spoiler ChatGPT 修改顏色為Marker 圖示 >貼上 > .custom-hotspot2 { height: 30px; width: 30px; background: #63ff47; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } >將顏色換成marker圖示 ::: ## 304.html 放大縮圖 + Marker ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加上縮圖+改變文字</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #panorama { width: 100%; height: 100%; } /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */ .custom-hotspot { height: 30px; width: 30px; background: #ff6347; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot2 { height: 60px; width: 40px; background-image: url('pics/marker-icon.png'); /* 替換為 marker 圖示的檔案路徑 */ background-size: cover; /* 確保圖片完全覆蓋元素 */ background-repeat: no-repeat; /* 防止圖片重複 */ background-position: center; /* 圖片居中顯示 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 保留陰影效果 */ transition: transform 0.3s ease; } .custom-hotspot:hover { transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */ } /* 提示氣泡樣式 */ div.custom-tooltip span { visibility: hidden; position: absolute; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */ color: #000; text-align: center; max-width: 300px; padding: 10px; cursor: default; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* 當滑鼠懸停時，顯示提示內容 */ div.custom-tooltip:hover span { visibility: visible; } /* 提示內的圖片樣式 */ div.custom-tooltip img { width: 400px; height: auto; border-radius: 3px; margin-bottom: 10px; } /* 提示箭頭 */ div.custom-tooltip:hover span:after { content: ''; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */ bottom: -20px; left: 50%; /* 箭頭在工具提示的正中央 */ transform: translateX(-50%); } </style> </head> <body> <div id="panorama"></div> <script> // 創建視圖 viewer = pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "/pics/street1.jpg", "autoLoad": true, "autoRotate": -2, "hotSpots": [ { "pitch": -1, "yaw": 110, "cssClass": "custom-hotspot2", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "餅乾店", "imgSrc": "pics/scene1.png" } }, { "pitch": -9.4, "yaw": 222.6, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "Art Museum Drive", "imgSrc": "pics/scene2.png" } }, { "pitch": -0.9, "yaw": 144.4, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "網紅咖啡廳", "imgSrc": "pics/scene3.png" } } ] }); // 熱點生成函數，當滑鼠懸停時顯示圖片與文字 function hotspot(hotSpotDiv, args) { hotSpotDiv.classList.add('custom-tooltip'); var span = document.createElement('span'); // 添加圖片與文字 var img = document.createElement('img'); img.src = args.imgSrc; span.appendChild(img); var text = document.createElement('div'); text.innerHTML = args.text; span.appendChild(text); hotSpotDiv.appendChild(span); // 設置提示框的位置 span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px'; span.style.marginTop = -span.scrollHeight - 12 + 'px'; } </script> </body> </html> ``` :::spoiler ChatGPT 切換熱點時自動顯示資訊貼上304.html 切換至熱點時，顯示熱點資訊 ::: ## 305.html 自動切換熱點顯示資訊 ```htmlembedded= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加上縮圖+改變文字</title> <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #panorama { width: 100%; height: 100%; } /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */ .custom-hotspot { height: 30px; width: 30px; background: #ff6347; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot2 { height: 30px; width: 30px; background: #63ff47; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } .custom-hotspot:hover { transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */ } /* 提示氣泡樣式 */ div.custom-tooltip span { visibility: hidden; position: absolute; border-radius: 5px; background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */ color: #000; text-align: center; max-width: 300px; padding: 10px; cursor: default; font-size: 14px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* 當滑鼠懸停時，顯示提示內容 */ div.custom-tooltip:hover span { visibility: visible; } /* 提示內的圖片樣式 */ div.custom-tooltip img { width: 100px; height: auto; border-radius: 3px; margin-bottom: 10px; } /* 提示箭頭 */ div.custom-tooltip:hover span:after { content: ''; position: absolute; width: 0; height: 0; border-width: 10px; border-style: solid; border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */ bottom: -20px; left: 50%; /* 箭頭在工具提示的正中央 */ transform: translateX(-50%); } </style> </head> <body> <div id="panorama"></div> <script> // 創建視圖 viewer = pannellum.viewer('panorama', { "type": "equirectangular", "panorama": "/pics/street1.jpg", "hotSpots": [ { "pitch": -1, "yaw": 110, "cssClass": "custom-hotspot2", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "餅乾店", "imgSrc": "/pics/scene1.png" } }, { "pitch": -9.4, "yaw": 222.6, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "Art Museum Drive", "imgSrc": "/pics/scene2.png" } }, { "pitch": -0.9, "yaw": 144.4, "cssClass": "custom-hotspot", "createTooltipFunc": hotspot, "createTooltipArgs": { "text": "網紅咖啡廳", "imgSrc": "/pics/scene3.png" } } ] }); // 熱點生成函數，當滑鼠懸停時顯示圖片與文字 function hotspot(hotSpotDiv, args) { hotSpotDiv.classList.add('custom-tooltip'); var span = document.createElement('span'); // 添加圖片與文字 var img = document.createElement('img'); img.src = args.imgSrc; span.appendChild(img); var text = document.createElement('div'); text.innerHTML = args.text; span.appendChild(text); hotSpotDiv.appendChild(span); // 設置提示框的位置 span.style.width = span.scrollWidth - 20 + 'px'; span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px'; span.style.marginTop = -span.scrollHeight - 12 + 'px'; } // 自動播放熱點 var hotspotIndex = 0; var hotSpots = viewer.getConfig().hotSpots; // 用於顯示動態提示的容器 var infoBox = document.createElement('div'); infoBox.style.position = 'absolute'; infoBox.style.bottom = '10px'; infoBox.style.left = '50%'; infoBox.style.transform = 'translateX(-50%)'; infoBox.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; infoBox.style.padding = '10px 20px'; infoBox.style.borderRadius = '8px'; infoBox.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; infoBox.style.display = 'none'; document.body.appendChild(infoBox); function autoPlayHotspots() { // 聚焦到當前熱點的 pitch 和 yaw var currentHotspot = hotSpots[hotspotIndex]; viewer.lookAt(currentHotspot.pitch, currentHotspot.yaw, 110); // 顯示動態提示 infoBox.style.display = 'block'; infoBox.innerHTML = ` <img src="${currentHotspot.createTooltipArgs.imgSrc}" alt="Hotspot Image" style="width: 80px; height: auto; margin-right: 10px; vertical-align: middle; border-radius: 4px;"> <span style="font-size: 16px; color: #333; vertical-align: middle;">${currentHotspot.createTooltipArgs.text}</span> `; // 更新到下一個熱點 hotspotIndex = (hotspotIndex + 1) % hotSpots.length; } // 設置每3秒自動切換一次熱點 setInterval(autoPlayHotspots, 3000); // 隱藏提示框（在未切換時保持簡潔） viewer.on('mousedown', function () { infoBox.style.display = 'none'; }); viewer.on('mouseup', function () { infoBox.style.display = 'none'; }); </script> </body> </html> ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.