Flame_
Flame_
  • 发布:2020-05-12 16:43
  • 更新:2022-09-23 16:04
  • 阅读:7842

uniapp中使用全景图片查看器,查看全景VR图片

分类:uni-app

全景图片查看器,有了Three.js的支持,已经是很简单的东西,网络上相关的插件有很多,这里推荐几个:Panolens.jsPano.jsphoto-sphere-viewer.js,这些插件都是基于Three.js,我这次是用的是photo-sphere-viewer.js。
但是使用这些插件,都是H5端的,uniapp中不能直接用。但uniapp有个组件web-view,可以引入内部或外部的HTML,文档传送:web-view。那这样问题思路就很清晰了,写一个HTML,使用查看器插件,再在uniapp项目中使用web-view组件,将本地的HTML导入。。。很简单吧

而且,查看器的使用也是巨简单,


引入两个js文件,


写个放插件的div,js中new一个插件对象,放上全景图片路径,完事儿~~其他具体的参数请去熟读并背诵文档

接下来就是在uniapp项目中引入,阅读web-view文档,我们能看到:

说明HTML文件不是随便放的,有特定的文件路径

uni页面使用web-view:


这里弄好了,简单的demo就完成了,就可以去调试运行了

经测试,我的demo在H5端、模拟器、真机都可以运行使用,小程序端还有点兼容问题,
运行效果:由于查看器是H5的插件,所以demo效果在H5端调试效果最好,图片清晰度、运行速度以及查看器自带的一些功能都是H5端效果最好

总结就是:::①请熟读并背诵文档,②动手实操

3 关注 分享
点点滴滴的静 万象千愁 2***@qq.com

要回复文章请先登录注册

3***@qq.com

3***@qq.com

您好 我的可以在H5端显示,但是真机运行不了,是什么原因呢
2022-09-23 16:04
2***@qq.com

2***@qq.com

回复 Blind :
你好,我也碰到了相应的问题,请问你的问题解决了吗?
2022-08-07 15:41
李维钧

李维钧

说了这么多有没有dome呢
2021-05-09 18:39
Blind

Blind

作者,你好,我弄了弄的全景和你使用的js一样,但是H5端显示,手机使用webview打开,一直显示loading就是不显示图片,你有遇到过吗
2020-07-22 11:50
jtshushu

jtshushu

你好小程序兼容性可以调吗
2020-05-23 13:12