关于WEB端全景图解决方案的研究

3,005 阅读2分钟

什么是全景图

我的理解:用无人机或放在地上搭的三脚架上的特殊摄像机拍的图片,和普通相机拍的有点不同

比如:
360-1.jpg 360-2.jpg

为什么要做全景图

  • 比起普通图可以较好的显示周边环境
  • 比建模去做展示效果,效果要好很多
  • 实际项目里要用到

方案选择

  • 第三方平台,如720云、得图云、airpano、动景网、全景客、ivrpano、全景旅行者、光鱼全景 等第三方平台
  • Photo Sphere Viewer 的JS库实现
  • krpano 工具和代码实现

各个方案优缺点

第三方平台

优点

  • 无技术含量,拍完直接上传到平台,然后在上边编辑一下就能用了
  • 不需要代码,比较快实现

缺点

  • 做完之后好像有广告,好像开会员可以去除
  • 要用到企业项目里,一般需要开会员
  • 定制能力很差,只能加他们有的效果
  • 不能和自己的代码交互,在项目里用的话,只能用iframe之类的

Photo Sphere Viewer

优点

  • 引入js库用代码自定义实现
  • 自定义程度较高
  • 在现有项目里引入,可以有事件交互
  • 有一些官方插件,可以实现标点,点击事件,等效果
  • 完全免费

缺点

  • 需要js代码基础
  • 无中文文档
  • 复杂的动效都需要自己实现

krpano

优点

  • 自定义程度高
  • 我看着官网demo有大多数能用到的实例,各种动效也很齐全
  • 720云之类的第三方平台好像就是用krpano做的
  • 原理上,它会把大图切成一个个小图,然后在加载的事件按需加载,加快了载入速度,像地图那个样滚到某处再加载

缺点

  • 用工具生成后是一个单独项目,不能和现有项目事件交互
  • 有中文网,不过部分内容,需要买会员才能看,大约2400/1年中文网
  • 构建工具需要购买和注册,大约 299欧元,要做实际项目的话不知道有没有其他费用
  • krpano 代码是用它自己的.xml配置的,具体语法需要重新学习

怎么选用?

我的看法:
- 看具体需求,如果需要事件交互,就用 Photo Sphere Viewer
- 如果只想快速简单做,又无基础,就用第三方平台
- 如果想做复杂效果,可以参考一下krpano的官方demo,然后决定

具体实现

第三方平台

直接去官网看就行了  

720云

微信截图_20211018132223.png

Photo Sphere Viewer

官网
Photo Sphere Viewer 库使用

krpano

中文网

krpano 全景漫游制作软件工具