7个最佳360°(矩形)图像查看器JavaScript插件

本文概述

• 7. Three.js等角矩形演示
• 6. 360-image-viewer
• 5. Kaleidoscope
• 4. Panolens.js
• 3. Panellum
• 2. Photo Sphere Viewer
• 1. Marzipano

如今, 许多设备允许用户创建非常有趣的全景图像, 但不仅可以创建180度, 而且可以创建360度全景图像。与圆柱视图不同, 球形全景图具有180°垂直视角和360°水平视角。它们包含来自所有方向的光数据, 因此可以可视化为包含球体上的点。这种格式已在社交媒体和市场营销中流行, 并已在3D图形程序, 室内模拟, 沉浸式全景电影以及计算机和视频游戏中得到应用。等角全景图由单个矩形图像组成, 其宽度和高度相关联为2：1。

如果你愿意在网络上显示此类图像, 则需要一段特殊的代码才能使其正常工作。在本文中, 我们将与你共享7个库, 这些库将使你可以在浏览器中嵌入等矩形图像, 以便用户可以轻松地与主题进行交互。

7. Three.js等角矩形演示

Github

与也基于Three.js的Panolens.js不同, 此基本演示包含仅使用Three.js即可实现自己的360-image-viewer的基本代码。

6. 360-image-viewer

Github

360-image-viewer是用于台式机和移动设备的独立全景WebGL图像查看器。这使用regl作为WebGL包装器, 并且总共有140kb的uglized或46kb的gzip压缩。如果你需要全景查看器但又不想嵌入所有ThreeJS(丑化了大约500kb), 这将很有用。

5. Kaleidoscope

Github

Kaleidoscope是一种嵌入式, 轻巧, 无依赖的360º视频/图像查看器。如果视频是从其他域提供的, 则由于某些CORS实施错误, 因此360视频无法在Safari, IE 11, Microsoft Edge, Android和iOS中运行。

4. Panolens.js

Github

Panolens.js基于Three.JS(3D框架), 在全景, 虚拟现实和潜在的增强现实领域具有特定的兴趣领域。要开始使用panolens.js, 请下载缩小的three.js和缩小的panolens.js, 并将这两个文件包括在你的项目中。插件功能：

1. 支持等角像
2. 支持立方体贴图图像
3. 使用panoId支持Google街景(如何获取Panorama ID)
4. 即使在iOS上也支持360等角视频(例如youtube / facebook 360视频)！
5. 支持文本/图像/ domElement批注(Infospot)
6. 内置Orbit / DeviceOrientation摄像头控件
7. 内置全屏和视频控制小部件
8. 将等角矩形图像转换成小行星(立体投影)

3. Panellum

Github

Pannellum是用于Web的轻量级, 免费和开放源代码的全景查看器。它是使用HTML5, CSS3, JavaScript和WebGL构建的, 没有插件。 Pannellum是使用WebGL和JavaScript以及少​​量HTML5和CSS3构建的。它可以独立运行, 也可以使用<iframe>或JavaScript API嵌入。用于<iframe>嵌入的独立方法是最简单易用的方法, 但是JavaScript API更强大, 并且提供了更紧密的集成。在内部, 独立查看器解析URL参数以构建基于JSON的配置, 然后使用JavaScript API实例化查看器。独立查看器接受配置参数的子集作为URL参数。其余参数可以使用通过特殊配置URL参数指定的JSON配置文件进行设置。 Pannellum的其他功能包括显示信息的热点, 将多个全景图链接到虚拟导览中以及视频支持。

2. Photo Sphere Viewer

Github

Photo Sphere Viewer是一个JavaScript库, 可使用Photo Sphere(Android 4.2 Jelly Bean及更高版本的新相机模式)渲染360°全景照片。它还支持立方体全景。 Photo Sphere Viewer是纯JS, 基于Three.js, 在启用WebGL的系统(最新的浏览器)上具有非常好的性能, 而在其他支持HTML Canvas的系统上也具有相当好的性能。该库也可与触摸屏一起使用。

1. Marzipano

Github

Marzipano是适用于现代网络的360°媒体查看器, 支持所有主要的桌面浏览器和移动设备。它包含标准的Web技术, 并提供强大的Javascript API。该工具从一组全景图生成虚拟游览, 并允许你将其导出为Web应用程序, 该应用程序可以按原样部署或用作更高级项目的样板。需要Firefox或Chrome。设计为与网络标准配合使用。使用功能强大的Javascript API控制查看器, 并使用标准HTML和CSS创建界面。 Marzipano为最常见的用例提供了一个简单的API, 但它旨在为用户提供很多控制方式。演示展示了Marzipano允许的一些可能性以及如何实现它们。他们的源代码可在GitHub上获得。

该工具在浏览器上处理你的全景图。球形(equirectangular)和立方体面格式都受支持。处理后, 你可以导出可以部署到任何Web托管平台的虚拟导览应用程序。该应用程序也可用作使用标准Javascript, HTML和CSS进行进一步自定义的样板。 Marzipano工具需要最新版本的Firefox或Chrome。

如果你知道另一个很棒的基于JavaScript的库在浏览器中显示等角(360度)图像, 请在注释框中与社区共享。