开发人员的 4 款顶级免费 360° 图片查看器






4.92/5 (4投票s)
本文概述了四种最受欢迎的开源 360° 图片查看器,并根据您的用途推荐了最佳工具。
引言
360° 图像的应用越来越广泛。Facebook、YouTube 和许多其他流行平台都支持 360° 图片、视频和直播。在网站上集成 360° 图片查看器有多容易?最佳选择是什么?
在本文中,我将介绍四种最受欢迎的开源 360° 图片查看器,并就哪个工具最适合您的用途给出建议。
A-Frame
A-Frame 是领先的 WebVR 开源项目。这意味着您的项目不仅能在网站上运行,还能在 Vive、Rift、Daydream、GearVR 和手机上运行。
优点
- 由 Mozilla 支持
- 活跃的社区
- 可与 VR 头显和 VR 控制器配合使用
缺点
- 处于 Beta 测试阶段,预发布
- 视频在浏览器中的移动设备上无法播放
- 可能需要某些浏览器的开发者版本
结论
虽然还为时过早,但非常适合教育用途,从中小学生到成人均可使用。
由一名中学生开发的 A-Frame 移动示例
Google VR View for the Web
Google VR View for the Web 是 Google 为移动和网络 VR 提供的一系列技术的一部分。对于希望构建基于浏览器的网站或致力于 Cardboard 和 Daydream 的开发者来说,这是一个可靠的选择。
优点
- 由 Google 支持
- 支持 Daydream
- 支持热点
缺点
- 针对 Web 进行了优化。还有其他 SDK 可用于原生移动应用开发
- 与 Photo Sphere Viewer 相比,查看选项有限
- 媒体可能需要放置在与代码相同的 Web 服务器上,尤其是在 Mac OS X 和 Safari 上
结论
Google VR View for the Web 是需要嵌入式 360° 图片的网站的可靠选择。对于 Android 和 iOS,提供独立的 SDK。如果您专注于 Daydream 或 Cardboard 的 VR 体验,有一个 VR Entry Flow。如果您正在寻找广泛的完整 VR 头显市场,A-Frame 是更好的选择。
您可以告诉您的客户您正在使用 Google VR 技术,他们会点头表示同意。Google 在 VR 和 360° 图像技术方面投入了大量资金。VR View for the Web 最近已更新,表明其正在积极开发中。
1 分钟视频概述,解释了 Web 开发者如何快速测试 Google VR View for the Web。
React 360(原 React VR)
React 360 是 React 的 VR 框架。它以前称为 React VR,但 Facebook 和 Oculus 使用的两个 API 已发生分歧。开源框架是 React 360。它易于使用,需要 Node.js。
优点
- 由 Facebook 支持
- 符合 WebVR API,可与 Oculus 的 Carmel Developer Preview 浏览器配合使用
- 针对 Facebook 应用进行了优化
缺点
- 社区不如 A-Frame 活跃
- 与 A-Frame 遇到使用前沿技术相同的问题。在所有头显上可能无法按预期工作
- 尚未真正准备好投入使用
结论
如果您有为客户开发的 Facebook 应用作为概念验证或炫目的营销概念,这是一个不错的选择。如果您喜欢 React,那么它是一个绝佳的选择。它在浏览器中可能相当稳定,但作为嵌入式 360 图片查看器在网页中使用时,其控制功能不如 Photo Sphere Viewer。
示例
Photo Sphere Viewer
Photo Sphere Viewer 是 Jeremy Heleine 开发的一个开源项目。它专注于在网页中查看 360 图片。
优点
- 在网页中控制图片的绝大多数功能
- 稳定且运行已久的 JavaScript 库
- 允许从菜单栏下载 360 图片和缩放(您可以禁用菜单栏)
缺点
- 由个人而非大公司开发(这可能与您的客户相关)
- 针对 Web 进行了优化,而非头显
- 与大公司技术相比,没有清晰的增强现实和虚拟现实发展路径
结论
这是网页的不错选择,对于大多数商业 360 网站而言效果应该不错,菜单系统位于主要图片下方。它更适合用作画廊,而不是 VR 或虚拟导览。虽然 VR 和 AR 绝对是未来,但大多数商业网站,如餐厅或汽车经销商网站,都使用一系列 360 图片和外部菜单。对于不需要链接到球体内部其他图像的 Web 应用程序,Photo Sphere Viewer 提供了比其他技术更多的功能。
示例
使用 jQuery 构建。
结论
VR 和 360 图片技术正在快速发展。您应该亲自探索这些技术。但是,如果您时间有限,以下是我的建议,供您入门。
历史
- 2019 年 6 月 26 日:初始版本