代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>全景展示</title>
<script src="three.js"></script>
<script src="/origin/tpanorama.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
#panoramaConianer {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
}
#tool {
position: absolute;
right: 0px;
width: 10%;
height: 100%;
background-color: cadetblue;
color: white;
}
</style>
<script>
var opt, tp;
window.onload = function () {
opt = {
container: 'panoramaConianer',//容器
url: 'img/p3.png',
lables: [
{ position: { lon: -72.00, lat: 9.00 }, logoUrl: '', text: '蓝窗户' },
{ position: { lon: 114.12, lat: 69.48 }, logoUrl: '', text: '一片云彩' },
{ position: { lon: 132.48, lat: -12.24 }, logoUrl: '', text: '大海' }
],
widthSegments: 60,//水平切段数
heightSegments: 40,//垂直切段数(值小粗糙速度快,值大精细速度慢)
pRadius: 1000,//全景球的半径,推荐使用默认值
minFocalLength: 6,//镜头最小拉近距离
maxFocalLength: 100,//镜头最大拉近距离
}
tp = new tpanorama(opt);
}
function changeImg(name) {
opt.lables = [];
if (name == "p1") {
opt.lables = [{ position: { lon: 178.56, lat: -15.84 }, text: '神像' }]
}
if (name == "p2") {
opt.lables = [{ position: { lon: -80.64, lat: -16.92 }, text: '蓝色' }, { position: { lon: 46.80, lat: 10.44 }, text: '绿色' }]
}
if (name == "p4") {
opt.lables = [{ position: { lon: 48.96, lat: -20.16 }, text: '樱花' }]
}
opt.url = 'img/' + name + '.png';
tp.render(opt);
}
</script>
</head>
<body>
<div id="panoramaConianer"></div>
<!-- <div id="tool">
</br>
</br>
<button onclick="changeImg('p1')">图1</button>
</br>
</br>
<button onclick="changeImg('p2')">图2</button>
</br>
</br>
<button onclick="changeImg('p4')">图4</button>
</br>
</br>
</div> -->
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。