英文 | 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/
总结
通过今天的内容,我希望能够为您提供有用的库来创建用于开发、网页设计的 360 度视图,如果您有任何问题,请在留言区给我留言。
如果您觉得今天内容对您有所帮助,请将它分享给您身边的朋友。祝你今天过得愉快!
学习更多技能
请点击下方公众号