Pannellum：实例之通过按钮控制全景图

使用 setYaw(),getYaw(),setPitch(),getPitch(),getHfov(),setHfov(),toggleFullscreen()等方法控制全景图

效果：这个只有效果静图了= =

代码：

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author"content=“KaiSarH,huankai7@163.com”><title>Custom controls</title><link rel="stylesheet" href="pannellum.css"/><script type="text/javascript" src="pannellum.js"></script><style>#panorama {width: 1200px;height: 800px;}#controls {position: absolute;bottom: 0;z-index: 2;text-align: center;width: 100%;padding-bottom: 3px;}.ctrl {padding: 8px 5px;width: 30px;text-align: center;background: rgba(200, 200, 200, 0.8);display: inline-block;cursor: pointer;}.ctrl:hover {background: rgba(200, 200, 200, 1);}</style>
</head>
<body>
<div id="panorama"><div id="controls"><div class="ctrl" id="pan-up">&#9650;</div><div class="ctrl" id="pan-down">&#9660;</div><div class="ctrl" id="pan-left">&#9664;</div><div class="ctrl" id="pan-right">&#9654;</div><div class="ctrl" id="zoom-in">&plus;</div><div class="ctrl" id="zoom-out">&minus;</div><div class="ctrl" id="fullscreen">&#x2922;</div></div>
</div>
<script>viewer = pannellum.viewer('panorama',{"panorama":"test/test.jpg","autoLoad":true,"showControls":false});document.getElementById('pan-up').addEventListener('click', function(e) {viewer.setPitch(viewer.getPitch() + 10);});document.getElementById('pan-down').addEventListener('click', function(e) {viewer.setPitch(viewer.getPitch() - 10);});document.getElementById('pan-left').addEventListener('click', function(e) {viewer.setYaw(viewer.getYaw() - 10);});document.getElementById('pan-right').addEventListener('click', function(e) {viewer.setYaw(viewer.getYaw() + 10);});document.getElementById('zoom-in').addEventListener('click', function(e) {viewer.setHfov(viewer.getHfov() - 10);});document.getElementById('zoom-out').addEventListener('click', function(e) {viewer.setHfov(viewer.getHfov() + 10);});document.getElementById('fullscreen').addEventListener('click', function(e) {viewer.toggleFullscreen();});
</script>
</body>
</html>

总结：

关于HTML和JS的东西我就不写了，总结一下用到的Pannellum方法
在API中，是这样描述的：

首先，你要知道Pannellum的投影坐标系，如图：

圆圈中的直线代表视角方向，水平方向用yaw值表示，取值为180度到-180度，竖直方向用pitch值表示，取值为90度到-90度，yaw和pitch两个值共同表示整个投影坐标系。
setYaw(),getYaw(),setPitch(),getPitch()等方法将视角移动到指定的坐标处，也可以获取当前视角对应的坐标位置。
getHfov()和setHfov()方法，实现镜头的拉近和远离。
toggleFullscreen()实现全屏。

Pannellum：实例之通过按钮控制全景图相关推荐

Windows 8实例教程系列 - 布局控制
Windows 8实例教程系列 - 布局控制原文:Windows 8实例教程系列 - 布局控制与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Win ...
ESP8266利用Bliker、小爱同学和本地按钮控制4路开关
ESP8266利用Bliker.小爱同学和本地按钮控制4路开关 Blinker函数说明: Button.color("#FFFF00"); //设置app按键是纯黄色,16进制颜色 ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
html 5音乐界面控制,使用按钮控制HTML5背景音乐开关
演示:使用按钮控制HTML5背景音乐开关你的浏览器不支持audio标签. $("#audio_btn").click(function() { var music = docum ...
使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
flash一个按钮控制动画_flutter闪屏过渡动画，闪光占位动画
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...
flash一个按钮控制动画_PLC三组灯用一个按钮控制
今天作一个PLC小练习用一个按钮控制三组或三个灯,以达到控制灯的亮度,由PLC组成一个控制器,每按一次按钮增加一组灯亮,三组灯全亮后,每按一次按钮,灭一组灯(为了使每组灯亮的时间尽量相等,要求先亮的 ...
用按钮控制歌单的上一曲和下一曲 0130 winform
用按钮控制歌单的上一曲和下一曲 0130 winform 思路定义一个歌曲类来一个歌曲对象数组(动态数组) 来一个下标记录当前歌曲索引值如上一曲被点击,下标- 如果下一曲被点击,下标+ 关键代码 ...
swiper切换按钮位置改变_2019-01-18左右按钮控制swiper轮播图切换
今天需要实现一个左右按钮控制轮播图滚动的效果! image.png 思路:我们可以尝试获取并改变current的值: 这是swiper滑动视图容器的说明 image.png image.png 这是w ...
js实现在页面实时显示时间，一个按钮控制时间暂停和开始
js实现在html实时显示时间,一个按钮控制时间暂停和开始.代码如下: <head><meta charset="UTF-8"><title>& ...

Pannellum：实例之通过按钮控制全景图

Pannellum：实例之通过按钮控制全景图相关推荐

最新文章

热门文章