下載
官方網(wǎng)站:
---- https://photo-sphere-viewer.js.org
附屬依賴必選項：
---- three.js
---- browser.js
注： 可以直接使用 npm install photo-sphere-viewer或者yarn add photo-sphere-viewer安裝，會自動下載three.js和browser.js
官網(wǎng)demo詳解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--所有基礎(chǔ)依賴引入-->
<link rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<body>
<!--初始容器位置-->
<div id="viewer"></div>
<!--容器css設(shè)置，在網(wǎng)頁中的大小等等設(shè)置-->
<style>
#viewer {
width: 100vw;
height: 50vh;
}
</style>
<!--最關(guān)鍵的一步，全景加載渲染的地方-->
<script>
var viewer = new PhotoSphereViewer.Viewer({
//需要渲染到的位置，上面div中定義的id，可以直接用 container: 'viewer'
container: document.querySelector('#viewer'),
//你的全景圖片，可以直接是你自己手機拍的照片，但是記住這個文件要放在自己服務(wù)器，通過http或者h(yuǎn)ttps訪問，不然會出現(xiàn)跨域問題
panorama: 'https://photo-sphere-viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg'
});
</script>
</body>
</html>
好了，以上就可以實現(xiàn)一個簡單的全景圖片渲染demo了，你可以用手機拍自己周圍，讓別人足不出戶訪問你周圍。
看看效果：
[圖片上傳失敗...(image-fc368c-1589101404630)]
自己動手實現(xiàn)
1.如果找不到下載依賴的地方，或者不想自己npm安裝，可以直接將上面引入鏈接在瀏覽器打開，然后鼠標(biāo)郵件另存為文件的名字，保存到本地，然后引入就可以。
2.準(zhǔn)備圖片，全景圖片弄好后上傳到隨便可以用http訪問的區(qū)域網(wǎng)或者公網(wǎng)，然后本地直接用鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全景圖渲染</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!--下載到本地的基礎(chǔ)依賴-->
<link rel="stylesheet" href="./js/photo-sphere-viewer.min.css"/>
<script src="./js/three.min.js"></script>
<script src="./js/browser.min.js"></script>
<script src="./js/photo-sphere-viewer.min.js"></script>
<script src="./js/plugins/markers.js"></script>
<style>
<!--容器CSS-->
#container {
margin-top:10vh;
width: 100vw;
height: 70vh;
}
</style>
</head>
<body>
<!--容器-->
<div id="container"></div>
<script >
window.onload=function(){
init();
}
//全景圖參數(shù)配置函數(shù)
function init(){
var viewer = new PhotoSphereViewer.Viewer({
//全景圖位置
container: 'container',
//默認(rèn)就是true
navbar: true,
//全景圖自動開始旋轉(zhuǎn)之前的空閑時間（毫秒）
autorotateDelay: false,
//旋轉(zhuǎn)速度
autorotateSpeed: '3rpm',
//導(dǎo)航欄右邊的提示問題
caption: '演示',
defaultLat: 0.3,
panorama: 'https://wangsr-oss-files.oss-cn-beijing.aliyuncs.com/images/%E5%85%A8%E6%99%AF/Bryce-Canyon-By-Jess-Beauchemin.jpg',
plugins: [
PhotoSphereViewer.AutorotateKeypointsPlugin,
PhotoSphereViewer.MarkersPlugin,
],
});
//插件 點擊則生成一個位置
var markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
viewer.on('click', function(e, data) {
console.log(data)
if (!data.rightclick) {
markersPlugin.addMarker({
id: '#' + Math.random(),
longitude: data.longitude,
latitude: data.latitude,
html: '♥',
width: 40,
height: 40,
anchor: 'bottom center',
tooltip: '隨機點',
data: {
generated: true
}
});
}
});
//雙擊取消生成的點
markersPlugin.on('select-marker', function(e, marker, data) {
if (marker.data && marker.data.generated) {
if (data.dblclick) {
markersPlugin.removeMarker(marker);
} else if (data.rightclick) {
markersPlugin.updateMarker({
id: marker.id,
image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png',
});
}
}
})
}
</script>
</body>
</html>
好了，至此一個可以生成標(biāo)記取消標(biāo)記的demo完成了
[圖片上傳失敗...(image-84582d-1589101404630)]
總結(jié)
如果單純的用three.js實現(xiàn)這些可能就沒這么容易了，前面幾個文章講了一些基本的three.js的基礎(chǔ)知識，完成web端3D的或者全景圖的渲染了，你需要考慮很多東西去實現(xiàn)，而Photo Sphere Viewer不一樣，只需要簡單的幾步，就可以實現(xiàn)大部分需求，定制化的也可以由自己開發(fā)。
