介绍几款生成360全景图的js插件
随着今年疫情的出现，网上看房的一波浪潮兴起，360度全景照片又火了一把，今天给大家介绍几种js生成360全景照片的方法。
一、Photo Sphere Viewer
这个是基于three.js的全景插件 photo-sphere-viewer.js,方便好用，只要将全景图片路径设置好就好了，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=three|uevent.min|doT.min|polyfill.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["photo-sphere-viewer.min", "photo-sphere-viewer.min"], function() {
var viewer = new PhotoSphereViewer({
container: 'viewer',
panorama: 'http://repo.bfw.wiki/bfwrepo/image/panorama.jpg'
});
});
});
</script>
<style>
#viewer {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
二、Watch3D
Watch3D采用的是css的特性，利用perspective和transform的属性来实现，相比较webgl上手比较简单，他不仅实现了360度的全景，而且实现了多个场景标签的相互切换，非常方便，完整示例代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["watch3D.min", "watch3D.min"], function() {
let layer = document.querySelector(".layer");
let w3d = new watch3D({
wrapper: ".wrapper",
autoplay: true,
width: 5000,
height: 2500,
num: 12,
maxY: 25,
tips: {
0: {
styles: {
"height": "100px",
"width": "100px",
"background-color": "#6cf",
"text-align": "center",
"margin-right": "10px",
"color": "#fff",
"cursor": "pointer"
},
content: "风景1",
callback: function(e) {
w3d.pause();
w3d.changeData({
num: 10,
resource: "http://repo.bfw.wiki/bfwrepo/image/5ed629d01fa50.png"
}, true);
}
},
1: {
styles: {
"height": "100px",
"width": "100px",
"background-color": "#6cf",
"text-align": "center",
"margin-right": "10px",
"color": "#fff"
},
content: "美女",
callback: function(e) {
w3d.pause();
w3d.changeData({
num: 15,
resource: "http://repo.bfw.wiki/bfwrepo/image/5ed629fb039b4.png"
}, true);
}
},
3: {
styles: {
"height": "100px",
"width": "100px",
"background-color": "#6cf",
"text-align": "center",
"margin-right": "10px",
"color": "#fff",
"font-size": "24px"
},
content: "自动播放",
callback: function(e) {
w3d.play();
}
},
4: {
styles: {
"height": "100px",
...点击查看剩余70%
{{collectdata}}
网友评论0