英文 | https://niemvuilaptrinh.medium.com/14-libraries-create-360-degree-views-for-website-c4c177ef7d1b
翻譯 | 楊小愛
什麼是 360 度視圖？如今随着科技的強勁發展，您可以輕松輕松地拍攝全景圖像（360 度）。但是，在您的網站上顯示這些圖像确實很困難，因為它需要大量的技術技能才能顯示它的全貌，并讓使用者盡可能輕松地與之互動。
是以在今天的内容中，我将為您介紹幾個Javascript 庫，它們可以幫助我們解決上述問題并提高使用者體驗。
快來和我一探究竟吧！
01、Panolens.js
位址：https://pchen66.github.io/Panolens/
Panolen s three.min.jspanolens.min.jsPANOLENS
02、Pannellum
位址：https://pannellum.org/
Pannellum 是一個使用 HTML5、CSS3、Javascript 和 WebGL 組合建構的開源庫，大小僅約 21kb（壓縮後）。
它可以幫助您以簡單快捷的方式為網站建立 360 度照片或視訊。此外，Pannellum 還相容最流行的浏覽器變量，例如 Chrome 24+（版本 24 或更高版本）、Firefox 23+、Safari 8+、Internet Explorer 11+ 和 Edge。
它還支援一些有用的功能，例如，添加控制按鈕、自動加載、添加注釋喜歡和作者。
03、Marzipano
位址：https://www.marzipano.net/
Marzipano 是一個開源庫，可讓您輕松為您的網站建立 360 度媒體播放器。它基于标準的 Web 技術設計，提供強大的 Javascript API 并顯示在不同的裝置螢幕上。
除了支援現代浏覽器外，它還提供了功能特性，可以輕松應用于IE8等舊浏覽器。我喜歡這個庫的地方是，它提供了額外的工具來幫助您直接建立 360 度媒體檢視器，而無需下載下傳有關機器的庫。
您隻需要将該工具提供的代碼嵌入您的網站，就可以了。
04、view360
位址：https://naver.github.io/egjs-view360/
view360 是一個開源庫，可提供代表您網站的完整 360 度媒體檢視器解決方案。
具有可用于視訊或圖像等有用功能，它通過旋轉或滑動、通過 URL 加載圖像或視訊來幫助使用者更輕松地在移動裝置上互動。
它分為 2 種主要顯示類型：PanoViewer 和 SpinViewer。
對于顯示的每種類型，每個功能都有詳細的示例，以幫助您輕松地将其可視化并應用于其網頁的頁面。
05、JS Cloudimage 360 View
位址：https://scaleflex.github.io/js-cloudimage-360-view/
JS Cloudimage 360 View 是一個用Javascript編寫的緊湊型開源庫，可以輕松實作360度顯示圖像，并提供更多功能幫助使用者更便捷的互動。
如全屏顯示、lazyload功能、圖像放大鏡。此外，它還提供您可以通過非常簡單的設定直接用于網站的 CDN 隻需将它提供的屬性調用到我們想要顯示 360 的 HTML 對象圖像中。
06、A-Frame
位址：https://aframe.io/
A-Frame 除了幫助您建構 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網站的虛拟現實體驗。
您隻需要使用 CDN 調用 A-Frame，然後使用 <a-scene> 标簽來設定媒體檢視器 360 度的屬性。
因為，它是用 HTML 編寫的，是以，很容易閱讀、了解并很容易地應用于基于 Web 的項目。
它還被谷歌、迪斯尼、三星、豐田等許多大公司信任和使用。
07、VR View
位址：https://developers.google.com/vr/develop/web/vrview-web
VR View 是一個使用 Google 提供的 Javascript 建構的開源庫，使您可以輕松地将 360 度媒體檢視器嵌入或添加到您的網站。
它最好支援圖像是 jpeg 類型和視訊是 mp4。此外，它還為您提供了許多适合使用的屬性進行自定義，例如，确定相機位置的初始顯示、确定媒體播放器的寬度和高度、使用全屏模式。
08、Photo Sphere Viewer
位址：https://photo-sphere-viewer.js.org/
Photo Sphere Viewer 是一個建立在three.js 之上的Javascript 庫，它使您可以輕松地将圖像顯示為網頁的全景圖（360 度）。
它可以在不同裝置的多個螢幕上顯示，并提供各種屬性和方法，讓您可以像顯示縮放欄、将圖像下載下傳到計算機的按鈕、添加内容一樣簡單地微調圖像， 圖檔上的标題。
09、Kaleidoscope
位址：https://github.com/thiagopnts/kaleidoscope
Kaleidoscope 是一個開源的 Javascript 庫，它可以輕松地為照片或視訊建構 360 度友善的方法檢視器。
如果你需要一個緊湊的庫，不要使用額外的庫，它能滿足顯示視訊和全景圖像的基本元素，我認為這個庫是您不錯的選擇。
10、360-image-viewer
位址：
360-image-viewer 也是一個類似于上面的庫，可以幫助您顯示圖像的全景圖。各種裝置螢幕上的照片、視訊和響應能力。僅約 46kb（壓縮後）的大小。使用此庫時可以輕松優化站點的性能。
11、2VR
位址：http://www.2vr.in/
12、Panoraven
位址：https://panoraven.com/en
13、Theasys
位址：https://www.theasys.io/samples/
總結