先上图感受一下，以迪士尼城堡为例。
心动了吗？你认为实现这个炫酷特效会很简单？
不不不，实现这个特效只有两个步骤
- 须要一张全景图
- 应用 photo-sphere-viewer.js 进行配置 (一个用来来显示全景图JavaScript库)
能够从这里收费下载全景图片
https://pixabay.com/zh/images...
在线演示地址（手机关上成果更佳） https://qiufeng.blue/frontend...
源码地址: https://github.com/hua1995116...
代码详解
<style>#photosphere { width: 100%; height: 100%;}</style></head><body><div id="photosphere"></div><script src="three.js"></script><script src="browser.js"></script> /*uEvent 的浏览器版本*/<script src="photo-sphere-viewer.js"></script><script> const PSV = new PhotoSphereViewer.Viewer({ container : 'photosphere', // 容器id panorama : '360.jpg', // 全景图地址 caption : '', loadingImg: 'assets/photosphere-logo.gif', // loading的gif defaultLong: Math.PI/2 + Math.PI/12, // 默认角度 defaultZoomLvl: 30, });</script><script src="./snow.js"></script> /*下雪的场景*/实现下面场景的代码非常简单，次要是有photo-sphere-viewer.js实现的，本人不须要加任何代码。
photo-sphere-viewer.js 也反对了十分多的控件，例如 mark 标记、主动漫游以及设置分辨率等。
因为 photo-sphere-viewer.js 是基于 Three.js ，因而必须引入 Three.js 的依赖，还依赖 uEvent 事件订阅相干的 API。
我再来看看减少插件会有哪些不一样的变动。
咱们能够通过 mark插件来标记一些非凡的地点，并且还有标记列表，能够中转对应的地点。通过减少对应的点位来实现呈现出非凡意义的地位，能够是第一次相遇或者是第一次做了不可形容画面的地点（小朋友捂脸）...
PSV = new PhotoSphereViewer.Viewer({ ... plugins: [ [PhotoSphereViewer.MarkersPlugin, { markers: (function () { var a = []; a.push({ id: '#123', tooltip: '第一次相遇的地点', latitude: -0.3988129280019779, longitude: 1.7374233460711157, image: 'assets/pin-red.png', width: 32, height: 32, anchor: 'bottom center', }) return a; }()) }] ] ...})var markers = PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);markers.toggleAllTooltips();mark 不仅能够标记地点，还能够通过列表来进行疏导
对于这个 snow特效是我轻易找的一个js特效，你也能够通过不同的场景，换成雨、下星星啊，各种浪漫的场景~
连忙珍藏这个成果吧~
结语
❤️关注+点赞+珍藏+评论+转发❤️，原创不易，激励笔者创作更好的文章
关注公众号秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号
- 关注后回复
简历获取100+套的精美简历模板 - 关注后回复
好友拉你进技术交换群+面试交换群 - 欢送关注
秋风的笔记