在网页上用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进行加以改造,实现拉进、远离向上向下等效果。如下图:

    


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


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


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

随着互联网富媒体时代的到来,越来越多的互联网公司、广告公司等迫切需要突破传统超文本格式的新型业务模式,视频和全景展示系统就是其中的代表。 全景展示系统已经越来越多的应用于房地产看房、汽车内部情况查看、数码产品展示等领域,没错,能让您自由在房间里面转来转去体验身临其境观看的,就是全景系统。 户提供最优秀的全景展示系统,减少您重复开发的成本,该系统的特点是: 1、纯Flash开发,因此无需客户安装任何插件,用户打开网页即可观看使用,无需安装Java或者QuikTime插件,终端用户体验更好! 2、动态载入图片全景播放器和图片分离:无论多少全景场景,整个网站只需一个我们的全景播放器,,将所有场景的图片动态载入,高效方便。有些全景系统,需要对每套图片都生成一个Flash文件,一方面,需要依赖人工操作,耗费了一些时间;另一方面,这类系统每个全景都有一个Flash文件,造成了空间和带宽资源的浪费。而我们的全景系统,只需要公用一个全景播放器,然后任意多的全景场景共用该播放器,节省了空间和带宽成本;更重要的是,当用户需要发布新的全景时,可以通过网站后台,上传几幅图片即可。不需要使用工具生成flash全景,高效便捷,是未来的趋势。 3、支持锚点(热点)功能,可以从一个房间进入另一个房间,自定义任意位置、任意数量的锚点。可以通过网页管理,易于操作。 4、图像高保真,无失真和变形:可以通过下面我们的演示页面,看出我们的全景图像的变形程度,绝无变形和扭曲。 5、提供源代码,是目前国内唯一提供源代码的360全景展示系统,解除客户后顾之忧。 6、提供全景制作的培训和方案指导:我们提供完善的解决方案和指导服务,从全景图片的拍摄和后期处理,网站的搭建等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值