JS也能夠這麼浪漫，用JS寫下一個世界（VR）

時間 2021-02-16

標籤 html 前端 vue git github 面試 segmentfault 瀏覽器 frontend spa 欄目 JavaScript 简体版

原文原文鏈接

先上圖感覺一下，以迪士尼城堡爲例。html

心動了嗎？你覺得實現這個炫酷特效會很複雜？前端

不不不，實現這個特效只有兩個步驟vue

須要一張全景圖
使用 photo-sphere-viewer.js 進行配置 (一個用來來顯示全景圖JavaScript庫)

能夠從這裏免費下載全景圖片git

https://pixabay.com/zh/images...github

在線演示地址（手機打開效果更佳） https://qiufeng.blue/frontend...面試

源碼地址: https://github.com/hua1995116...segmentfault

代碼詳解瀏覽器

<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實現的，本身不須要加任何代碼。frontend

photo-sphere-viewer.js 也支持了很是多的控件，例如 mark 標記、自動漫遊以及設置分辨率等。spa

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