JS也可以這么浪漫,用JS寫下一個世界(VR)

藍色的秋風

先上圖感受一下,以迪士尼城堡為例。

640-1

640-4

心動了嗎?你以為實現這個炫酷特效會很復雜?

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

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

可以從這里免費下載全景圖片

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

在線演示地址(手機打開效果更佳) https://qiufeng.blue/frontend...

1613375898884

源碼地址: 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();

1613375926141

mark 不僅可以標記地點,還可以通過列表來進行引導

640-3

關于這個 snow特效是我隨便找的一個js特效,你也可以通過不同的場景,換成雨、下星星啊,各種浪漫的場景~

趕緊收藏這個效果吧~

結語

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

關注公眾號秋風的筆記,一個專注于前端面試、工程化、開源的前端公眾號

  • 關注后回復簡歷獲取100+套的精美簡歷模板
  • 關注后回復好友拉你進技術交流群+面試交流群
  • 歡迎關注秋風的筆記
閱讀 2.8k

藍色的秋風
分享是一種態度,幫助是一種品質,碼字是一種快樂。一個簡單而又快樂的地方。

JavaScript開發愛好者。全棧工程師。

1.9k 聲望
76 粉絲
0 條評論

JavaScript開發愛好者。全棧工程師。

1.9k 聲望
76 粉絲
宣傳欄
一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>