在网页上用html5或者flash播放360全景图片

              

           刚接到一个任务,怎样用理光摄像机拍摄的全景照片,能够在网页上自动播放,并且要实现的效果是:向上,向下,向左,向右移动,拉进,远离,全屏播放,场景跳转等,类似于下图效果

          


        每个场景都有各自的缩略图,点击可以直接跳转,另外,在全景图上也有相应的箭头提示,于是网上一顿搜索,发现一篇比较不错的链接,共享给大家,https://developers.theta360.com/en/forums/viewtopic.php?f=4&t=28 ,里面介绍了各种各样的方法,有兴趣的可以参考下

解决方法:

      首先想到的是通过Three.js来去实现,毕竟现在Three.js现在已经是很厉害的了,但是由于本人是专门搞java后台的,前端的东西也不是很精通,用Three.js只能实现在网页上预览全景图,但是我想要的场景缩略图,交互热点都没能实现,对于我这菜鸟来说要是改写Three.js来实现这样的效果,简直比登天还难,果断放弃。

     在一个还有种方法就是尝试着用theta-viewer.js-master,这也是一款很不错的360全景预览插件,可以对里面的js进行加以改造,实现拉进、远离向上向下等效果。如下图:

    在网页上用html5或者flash播放360全景图片_第1张图片


        说到底还是没实现我想要的效果,好了,之前说了一大堆,现在说点精华的吧,在给大家推荐一个更好用的工具,轻松搞定这一切,Pano2VR,这个工具非常之强大,可以生成html和flash,导出后直接在浏览器上访问就可以,先给大家看看界面:操作简单很容易上手,不会的网上Pano2VR教程

在网页上用html5或者flash播放360全景图片_第2张图片


     最终实现了我想要结果:效果实现了仍需美化

在网页上用html5或者flash播放360全景图片_第3张图片

大家有不懂的地方随时与我联系:QQ:3190869278

你可能感兴趣的:(Web前端)