站長(zhǎng)資訊網(wǎng)
本篇文章給大家?guī)?lái)了關(guān)于前端的相關(guān)知識(shí)，其中主要跟大家介紹怎么在前端實(shí)現(xiàn)360度全景效果，感興趣的朋友下面一起來(lái)看一下吧，希望對(duì)大家有幫助。
效果展示：
使用插件：photo-sphere-viewer
實(shí)現(xiàn)代碼：
<!DOCTYPE html> <head> <!-- for optimal display on high DPI devices --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" /> <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script> </head> <body> <!-- the viewer container must have a defined size --> <div id="viewer" style="width: 100vw; height: 100vh;"></div> <script> const viewer = new PhotoSphereViewer.Viewer({ container: document.querySelector('#viewer'), panorama: './img/44.jpg', }); </script> </body> </html>
登錄后復(fù)制
文件目錄：
注意事項(xiàng)：
全景圖路徑如下：
panorama: './img/44.jpg',
直接本地運(yùn)行，也就是在瀏覽器中 file:// 開(kāi)頭，上面的路徑是行不通的。存在跨域問(wèn)題。
解決圖片加載不出的問(wèn)題：
啟動(dòng)服務(wù)器，運(yùn)行文件。
方法一：
通過(guò) http-server 來(lái)實(shí)現(xiàn)，具體操作如下：
-
終端執(zhí)行命令：
npm install http-server -g全局安裝 http-server -
執(zhí)行命令：
http-server啟動(dòng)服務(wù)，啟動(dòng)后如下，會(huì)有可訪問(wèn)鏈接
-
cmd + 點(diǎn)擊，跳轉(zhuǎn)瀏覽器如下頁(yè)面，就可以訪問(wèn)相應(yīng)的 html 頁(yè)面了。（這樣訪問(wèn)，就可以加載出本地的圖片資源了）
方法二：
通過(guò) vscode 的 live server 擴(kuò)展運(yùn)行文件
-
安裝擴(kuò)展
-
相應(yīng)文件右鍵，選擇 open with live server，即可跳轉(zhuǎn)到
