关于javascript:JS也可以这么浪漫用JS写下一个世界VR

33次阅读

共计 1630 个字符，预计需要花费 5 分钟才能阅读完成。

先上图感受一下，以迪士尼城堡为例。

心动了吗？你认为实现这个炫酷特效会很简单？

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

须要一张全景图
应用 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 特效，你也能够通过不同的场景，换成雨、下星星啊，各种浪漫的场景~

连忙珍藏这个成果吧~

❤️关注 + 点赞 + 珍藏 + 评论 + 转发❤️，原创不易，激励笔者创作更好的文章

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