web实现全景图的交互展示 |
您所在的位置:网站首页 › 360全景图片查看器怎么用 › web实现全景图的交互展示 |
Web实现全景图的交互展示
不需要学习其他知识,小白也能实现全景图AR展示一、webVR全景图多种方案实现(aframe,Krpano,three,jquery-vrview等等)二、用krpano之前的一些知识准备三、krpano的购买、下载、注册四、做一个简单的漫游全景图五、总结
不需要学习其他知识,小白也能实现全景图AR展示
自己对于we前端开发来说也属于新手,这也是本人接到的第一个项目技术要求,尝试了许多次也算有个折磨的过程,我的失败经验应该能解决大部分人对于全景图的展示: 一、webVR全景图多种方案实现(aframe,Krpano,three,jquery-vrview等等) 第一种方案:three.js 作为作为前端界全景、3D大哥,无论是哪里搜索,只要搜索全景的插件,都会搜到这位大哥。 官方地址:three.js官网 官方学习地址:https://threejs.org/examples/#css3d_panorama 源码:简单,引入three,引入3d 实现:2:1的全景在PC端,可以预览,左右上下 鼠标移动 优点:可调节细节比较多,对于技术大佬这才是展示拳脚的地方。 缺点:PC端不能放大缩小,图片需要裁剪六张,移动端,不能放大缩小,更加糟糕的是渲染滴很差,手机也是如此(也有可能是我技术不到位) (因为尝试了几个效果都不好,而且代码也比较长,有需要的可以去官网看看,讲的也很详细)第二种方案:A-frame 官方地址:A-frame官方地址 官方案例:案例展示 源码:真是太简单了,引入aframe 框架 实现:2:1的全景在PC端,可以预览,左右上下 鼠标移动,还支持VR模式。 优点:简单方便,就真的操作无脑 缺点:PC端不能放大缩小,移动端只能左右移动,不能放大缩小,不能上下滑动 Document个人觉得aframe是一个非常好用得插件,提供了新的标签以后,就可以更通过CSS即可修饰,对于一些像我这样的JS基础不强的人来说还是非常友好,但是确定pc端和移动端不能放大缩小的缺点不能达到项目要求。 3. 第三种方案:krpano 是看了很多大佬的意见,一开始也觉得很难,因为听说还需要使用xml来使用,但是实际操作起来并不难甚至对于简单的漫游来说,简直是傻瓜式操作,并且这个比起之前的终于能实现要求了!!!(下面我也会详细讲讲如何实现) 官方地址:https://krpano.com/ 中文教程:http://www.krpano360.com/ 实现:2:1的全景在PC端,可以预览,左右上下鼠标移动,能够放大缩小,移动端也完美具备这些需求,完全符合我的需求,并且没有锯齿 优点:能满足大部分对于全景图的需求,对接简单的漫游,傻瓜式操作,有个类似图形化界面工具,可以直接添加热点(720云的底层也是用krpano写的) 缺点:首先就是这款是付费的,而且159欧元的价格,换算人民币就是1300+,还是让不少人劝退的,其次就是很多都是插件包自带的脚本,相当于一个成熟的商品,可修改性就很差。 二、用krpano之前的一些知识准备xml文件是什么? 很多人和接触过一些前端知识的人都会拿xml和html做一个比较,我这里就主要讲一下这二者的一下区别和联系把: 1、XML不是用来替换HTML的技术; 2、XML和HTML为不同的目的而设计; 3、XML设计的核心是包含和传输数据,而HTML设计的核心是显示数据。 然后我自己也查看了一些资料,有一位大佬写的笔记写的很好,想深入学习的朋友可以看看哦。 三、krpano的购买、下载、注册购买krpano 购买前需要一张双币信用卡或者paypal账户(类似我们的支付宝) 进入购买的官网:(https://krpano.com/buy) 弄好一切以后呢,就开始我们使用这个插件的环节拉,首先,得去找度娘找几张全景图(这里的全景图最好是2:1的) 以win32位为例,解压好的文件夹可以看到很多个bat文件,具体的实现功能我就直接截图拉 如果点击了html文件也没有关系,找到最开始的krpano文件夹,找到krpano Testing Server.exe直接启动 1.关于软件注册码付费问题 其实大家都看到了krpano的功能应该都是有小小的心动,但是价格确实让人劝退,我看了很多资料,其实是由破解版本和低价购买的方式的,后期我会专门更新一篇博客。 2.代码端问题 可能很多小伙伴作为程序员,看到这么简单的操作,都会觉得好像没有啥挑战性,也体现不出自己的技术,关于这块,其实还是会由代码端的操作,而且就是前面所说的xml文件的操作,其实krpano这款插件有点类似MYSQL数据库又有图形化界面工具也有代码端输入输出,后续我继续出关于这款全景图的使用经验,这也是我以后的一个方向。 3.自己总结的全景图三个核心问题 全景图片的调节问题:对于一个做产品,就得想到怎么样让自己的团队,以及客户更加简单高效的完成一个项目,而这个全景图的拍摄不可能每次都会像百度搜索的刚好2:1,而前端工程师能不能使用css样式就可以完成这样的调节。(当然如果我想到了也会分享给大家) 热点的安放和交互问题:做一个全景场景不可能是单单的一张图片,如果使用自己熟悉的插件或者语言实现就是一个重要的内容。 关于热点跟踪问题:现在的webAR.js和最新版本的three.js都是可以实现追踪效果的,而krpano也是可以的 关于移动端用到陀螺仪和重力感应:这个可以直接使用插件gyro.js 最后,这是本人第一次写博客,自己也不是什么前端大佬,如果有错误得地方多多包涵,欢迎指点,路过的大佬不喜勿喷。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |