WebH5 使用 panolens.js 实现360全景地图

JavaScript020

WebH5 使用 panolens.js 实现360全景地图,第1张

panolens.js 是一款很强大的 全景图片查看器,也可播放视频,详情可查看 官网

最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的 文档和demo 。

大概分为两种模式,模块化引用 和 普通html引用,如下图:

本文章主要分享一下 普通html引入 ,举个栗子:

哇哦竟然实现了,小伙伴们赶快试试吧~~~ 记得点赞哦~~~

1、首先用手机拍照时,注意要原地不动绕手机为中心对四周拍照,拍照的数量不少于8张。每张图片和上一张图片要有20%是重合的这一点很重要。

2、把照片拍好后放到电脑D盘名为 01文件夹。然后打开PanoramaStudio 3 Pro点创建全景图。

3、点import导入照片注意顺序要依次导入图片。

4、点align对齐安装360度环绕式对齐。

5、点Render裁切图片,尺寸大小可以先默认。

6、最后点击Save保存,保存为可以互动交互的360度环绕式的网页看图模式。

7、设置保存路径点击Save就完成了。

8、最后打开保存目录就可以打开0807.html文件预览全景图了。