送花送包送红包，不如用JS送给Ta一个VR世界-阿里云开发者社区

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

2022-05-13 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

链接

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

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

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

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

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

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

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();