12

送花送包送红包，不如用JS送给Ta一个VR世界

 3 years ago
source link: https://mp.weixin.qq.com/s?__biz=MzkyOTIxMDAzNw%3D%3D&%3Bmid=2247486413&%3Bidx=1&%3Bsn=ced1066c54528de62a55aaa2e78366c7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

抱歉今天来晚了，本应该白天发才对，发生了一点点小插曲~

先上图感受一下，以 梦幻城堡 - 迪士尼 为例（gif觉得卡顿可以看视频）。

Y3u6FvE.gif!mobile

心动了吗？ 你以为实现这个炫酷特效会很复杂？

不不不，实现这个特效只有 两个步骤

  • 需要一张全景图

  • 使用 photo-sphere-viewer.js 进行配置 (一个用来来显示全景图JavaScript库)

全景图可以从这里免费下载（本实例的全景图在 github仓库 中）

https://pixabay.com/zh/images/search/360%C2%B0%E5%85%A8%E6%99%AF/

在线演示地址（手机打开效果更佳，资源没有优化，耐心等待~）  

femiaaY.png!mobile

https://qiufeng.blue/frontend/demo/360-disney/simple.html

源码地址https://github.com/hua1995116/vuepress-blog/tree/master/docs/frontend/demo/360-disney

代码详解

<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();
UJBjyei.png!mobile

mark不仅可以标记地点，还可以通过列表来进行引导

6VVjMnZ.gif!mobile

关于这个 snow特效是我随便找的一个js特效，你也可以通过不同的场景，换成雨、下星星啊，各种浪漫的场景~

赶紧收藏这个效果吧~

有男/女朋友的晚上就可以实践起来了，花不了几分钟工夫。没有的，可以收藏，下次给TA一个惊喜（离5.20也没多少天了）。

这次先水一篇，下次再来分享其中的技术细节。

最后，祝愿有对象的长长久久，没有的，2021能够找到心仪的对象（留言说地点-性别配对啦，在线搭个线）:tada:

结语

关注公众号 秋风的笔记 ，一个专注于前端面试、工程化、开源的前端公众号

  • 关注后回复 简历 获取100+套的精美简历模板
  • 关注后回复 好友 拉你进技术交流群+面试交流群
  • 欢迎关注 秋风的笔记

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK