全景图片查看器,有了Three.js的支持,已经是很简单的东西,网络上相关的插件有很多,这里推荐几个:Panolens.js、Pano.js、photo-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端效果最好
总结就是:::①请熟读并背诵文档,②动手实操