JS也可以这么浪漫，用JS写下一个世界（VR）

古城微笑少年丶 2022-10-29 14:21 121阅读 0赞

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

![640-1][]

![640-4][]

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

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

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

可以从这里免费下载全景图片

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

在线演示地址（手机打开效果更佳） https://qiufeng.blue/frontend/demo/360-disney/simple.html

![1613375898884][]

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

代码详解

实现上面场景的代码非常简单，主要是有`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();

![1613375926141][]

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

![640-3][]

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

赶紧收藏这个效果吧~

[640-1]: /images/20221024/bad59ee5e8694e38aaad2a71fe9afa19.png
[640-4]: /images/20221024/ad730b8b8bd8496396bab6c5d81a06c7.png
[1613375898884]: /images/20221024/a6f18c991d4c498091dfd294e4725f75.png
[1613375926141]: /images/20221024/7bc5bd24c5d0452cb1faef678793d158.png
[640-3]: /images/20221024/d8921c1297674f8c940436160a611151.png