JS也可以這么浪漫，用JS寫下一個世界（VR）
先上圖感受一下，以迪士尼城堡為例。
心動了嗎？你以為實現這個炫酷特效會很復雜？
不不不，實現這個特效只有兩個步驟
- 需要一張全景圖
- 使用 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特效，你也可以通過不同的場景，換成雨、下星星啊，各種浪漫的場景~
趕緊收藏這個效果吧~
結語
??關注+點贊+收藏+評論+轉發??，原創不易，鼓勵筆者創作更好的文章
關注公眾號秋風的筆記，一個專注于前端面試、工程化、開源的前端公眾號
- 關注后回復
簡歷獲取100+套的精美簡歷模板 - 關注后回復
好友拉你進技術交流群+面試交流群 - 歡迎關注
秋風的筆記
閱讀 2.8k
藍色的秋風
分享是一種態度，幫助是一種品質，碼字是一種快樂。一個簡單而又快樂的地方。
0 條評論
得票時間
