Pannellum：实例之在部分视角内展示全景图

使用haov 参数和 vaov 参数和 vOffset 参数可以在部分视角内展示全景图

haov：horizontal angle of view 水平视角即在一屏水平方向内所展示的所有内容
vaov：vertical angle of view 垂直视角即在一屏垂直方向内所展示的所有内容
vOffset：vertical offset 垂直偏移即全景图在垂直方向的偏移量

我对这三个词的理解也不是很透彻，可以自己码一下代码调整一下数值看一下效果

效果：

Partial panorama

代码：

<!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>Partial panorama</title><link rel="stylesheet" href="pannellum.css"/><script type="text/javascript" src="pannellum.js"></script><style>#panorama {width: 1200px;height: 800px;}</style>
</head>
<body>
<div id="panorama"></div>
<script>pannellum.viewer('panorama', {"type": "equirectangular","panorama": "test/test9.jpg","haov": 149.87,"vaov": 54.15,"vOffset": 1.17});
</script>
</body>
</html>

总结：

我刚开始对这个例子的理解是，展示全景图的一部分，因为案例给的图片是不完整的，是一张普通的大图，不用三个参数，出现了图像的边缘无法重合以及顶部底部没有图像的问题。所以我更换了一张完整的全景图，发现这个案例其实是在部分视角内展示全景图，而不是像之前一样720°全方位展示。(可能我理解的还是有偏差，如果有人有更好的理解，麻烦留言，感谢。)
关于haov和vaov
官方API中给出的解释是：

初始化水平、垂直视角。
嗯，对于一个从来没有接触过摄影的人来说，理解这个真的是太难了。
我进行了测试：
haov：149.87

haov：100

haov：50

haov：200

haov：300

对于一个不专业的人来说，我能看出来

随着haov不断减小，相当于图片被不断压缩(如果图片可以再长一点，应该会更明显)，一屏所能展示的内容不断增多；
随着haov不断增大，相当于图片被不断拉伸，一屏所能展示的内容不断减少。

voac是同理的，是不过改成了垂直方向。
关于vOffset：

初始垂直偏移角？
而对于vOffset的测试：
vOffset：0

vOffset：10

vOffset：20

vOffset：30

vOffset：40

vOffset：50

vOffset：80

嗯，没错，变化很明显，但由于我的非专业性，是在组织不出语言描述。。
如果有专业大佬看到了，麻烦留言描述一下= =万分感谢

Pannellum：实例之在部分视角内展示全景图相关推荐

《HFSS电磁仿真设计从入门到精通》一第2章入门实例——T形波导的内场分析和优化设计...
本节书摘来自异步社区<HFSS电磁仿真设计从入门到精通>一书中的第2章,作者易迪拓培训 , 李明洋 , 刘敏,更多章节内容可以访问云栖社区"异步社区"公众号查看第2 ...
最佳展示场景kit:顶部视角的展示场景(Mockups)
为什么这是最佳选择,所有项目被组织到不同的类别的方式,每个项目也可以使用孤立的阴影.最好的部分是它们非常容易编辑和定制.即使是新手设计师也可以使用Photoshop轻松编辑PSD文件,创建时尚的模型场 ...
el-select下拉框内展示el-tree结构
el-select下拉框内展示el-tree结构封装组件 <template><div><el ...
【threejs】透视相机，实现相机根据模型大小自适应，将模型放置在视角内
透视相机,实现相机根据模型大小自适应,将模型放置在视角内 const box3_2 = new THREE.Box3().setFromObject(object); //新建一个Box3包裹盒把模型 ...
Python图片转灰度矩阵-矩阵转图片-jupyter内展示图片#将图片转换为矩阵
图片转矩阵(支持灰度.RGB.RGBA) Read an image from a file into an array. #将图片转换为矩阵 import matplotlib.image img_ ...
jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
安卓实现应用内展示PDF
github地址:https://github.com/barteksc/AndroidPdfViewer 首先添加依赖: //PDFView implementation 'com.github.b ...
光场相机重聚焦原理③——Matlab光场工具包使用、重聚焦及多视角效果展示
目录 1.从相机里导出白图像(White Images): 2.处理白图像: 3.利用白图像对光场文件进行解码得到rawImage: 4.对rawImage进行去马赛克操作(demosaic): 5. ...
高德地图圆圈内展示market
最近项目要做一个范围投放,这里用到了高德地图: 首先申请key,就不说了,基本都会申请,这里注意一个点,就是填写sha1值的时候一定注意,因为本人把两个sha1值全写成测试版的了,结果打包出来运行就是 ...
activiti自己定义流程之Spring整合activiti-modeler实例（七）：任务列表展示
1.通过上一节的操作,能够知道流程启动以后会同一时候生成一个流程实例和用户任务.这个用户任务保存在act_ru_task和act_hi_task表中,从表明能够看出ru是runtime,hi是hist ...

Pannellum：实例之在部分视角内展示全景图

Pannellum：实例之在部分视角内展示全景图相关推荐

最新文章

热门文章