开启自动旋转

输出的全景可以设置自动旋转,场景视角水平方向上360°旋转。

在输出的“自动旋转&动画”中勾选上自动旋转,然后对下面的一些参数进行设置。

平移速度,也即水平方向旋转的速度,这里默认使0.4°/帧率,这个值实际较大,输出后预览,旋转的速度较快,建议设置小一点,0.05、0.1就可以,当然这个要根据实际情况和个人喜好设置。

延迟,是指等待鼠标键盘无操作后多长时间开始旋转。

返回水平线,是当鼠标拖动浏览,改变了倾角后偏离了“水平”(倾角0°)后等待一定“延迟”后再回归到水平的速度,注意这里的值不是时间,是速度。从0到10,0表示不回归水平,保持拖拽后的倾角状态,10表视立即回归到水平,0到10之间的值是不同速度地回归水平,值越大,越接近10,回归到水平越快。

我们上面提到“延迟”,是说等待键盘鼠标无操作后开始旋转的时间,实际我们打开漫游开始预览后,也需要等待这个“延迟”时间。但是勾选上“加载完毕后开始”就不需要等待“延迟”了,进入场景立即就开始自动旋转,“延迟”依旧是等待键鼠无操作的时间。

更改节点,是指自动切换场景进行浏览,默认“永不”,即不自动切换场景。可设置为时间参数,单位是秒,即多少秒之后切换场景。后面有个“随机的”勾选,默认不勾选,切换的顺序是导览浏览器中的场景顺序,勾选后,则变成随机切换。

更改节点配合自动旋转就是自动浏览了。注意更改节点的时间,如果场景有语音讲解,那么可以设置更改节点的时间为语音讲解时长(适当延长3~5秒),如果没有语音讲解,可以设置更改节点为自动旋转一周的时长。按照上图的0.1°/帧率的平移速度,旋转一周需要60秒。公式是 6 ÷ 平移速度 = 旋转时间 。根据这个公式,定好自己满意的平移(旋转)速度然后计算出旋转时间。

 

制作小行星开场

小行星开场就是进入场景后由小行星视角转场到正常视角。最开始Pano2VR里没有这个功能,krpano有这个功能,littleplanet,翻译是小行星。

小行星视角的效果是下图这个样子。

可能是效果炫酷,所以很多人也会问Pano2VR里如何实现小行星开场,这在旧的版本中是解决不了的,在Pro 5.2中就很简单了。

如果我们文章依序看的比较认真,在设置默认视图中,最后有提到,立体投影,输出后,视角垂直地面拉大视场,就得到小行星效果。

我们设置小行星开场,就是由立体投影下的上图视角,转到直线型投影下的正常视角。

首先在右侧输出设置的“自动旋转&动画”下勾选“飞入”,下面的是由小行星视角到正常视角的转场效果的速度,默认是2,可以根据实际情况或需求调节,值越大速度越快,转场时间越短。

勾选飞入后,不能立即就输出。

还需要到查看参数下的“飞入”进行一下设置。

我们在上面说了,小行星开场,是由立体投影下的视角,转到直线型投影下的视角。直线投影下的视角自然就是默认视图下的视角,我们这里就无需设置了。所以这里飞入的设置,其实就是设置一下立体投影的视角参数。

我们已经知道,小行星效果是立体投影下垂直地面的视角,因此,这里飞入开始的倾角默认-90°我们就无需设置了,而小行星效果不光要垂直地面的视角,还需要拉大视场,这里默认的170°视场显然不太够(显然,是显然不出来的,是挨个试出来的结果),视场最好是在270~360°之间,具体的值依据个人喜好试完自行设置。

到这里再去输出,基本就符合了小行星开场的效果。

如果我们看过krpano做出来的小型开场,可能会留意到,开场不光是视角的切换,过程还有点“螺旋”的效果。

我们上面的设置,立体投影的开始“平移”值是0°,而默认视图的“平移”值也是0°,所以没有出来“螺旋”效果,我们这里只需要设置一下飞入开始的平移值,从-179.99°~180°之间选择,尽量离默认视图的平移超过90°的差值,使得螺旋效果明显。至于正负值,就是螺旋时的正反旋转。

小行星开场,不光可以设置在初始场景,依据个人喜好,可以对任意一个场景设置,勾选上对应场景下的“飞入”,然后进行上面的设置即可。

限制视角

我们从一开始说全景图,就是特指包含水平360°垂直180°全视角的全景图,通过这种全景图制作的全景漫游,可以还原出整个三维立体空间所有的景象。

但有时候我们可能由于拍摄设备的原因,没能拍摄到一定角度的照片,常见天空或地面一圈“黑洞”,或者是某一部分视角的内容有瑕疵,我们在制作时不想这些被看到,在Pano2VR中我们可以对全景视角进行限制,让这部分内容无法被查看到。

查看限制,勾选上显示限制。

我们看到四个参数,顶部90°、底部-90°、左360°、右0°,这四个参数是当前的限制值,当然我们知道全视角就是上下180°,左右360°,所以此时的限制值,是没有限制的

而后面的四个参数,顶部33.3°、底部-34.5°、左50.2°、右-51.4°,即是当前预览窗口,当然也是实际的浏览窗口下,顶部、底部、左、右边缘对应的视角值。如果我们点击各自后面的设置,即把此时的参数设为限制值。

我们在对某一区域进行限制的时候,直接在预览窗口中鼠标拖动到窗口边缘恰好看不到限制区域时,点击设置,如限制天空或地面,就设置顶部或低部就可,如果是限制水平向的一块区域,需要左右都进行限制。

限制不看到天空顶部。

拖到限制的边缘,点击顶部的“设置”限制。

限制不看前面的大殿。

拖到大殿左边缘,点击右的“设置”限制,(注意尽量使“倾角”接近0°以便左右更准确)。

拖到大殿右边缘,点击左的“设置”限制,(同样注意尽量使“倾角”接近0°以便左右更准确)。

我们可以对上下左右进行限制,自然对前后也能限制,即限制视场 / 限制我们的缩放 / 限制拉近拉远的程度。

设置“最小值”和“最大值”即可,当然视场上的这个设置对直线型比较有意义,对立体投影和鱼眼效果的意义不大。

 

设置默认视图

默认视图,即进入场景后的第一视角景象。

当我们将全景图输入到Pano2VR中,其实已经默认了一个视图,也就是平移0、倾角0,对应的就是全景图片的中心位置,视场70,垂直70°视野范围。

我们可以重新设置这个默认视图。

如果有确定的值,那么可以在默认栏下手动输入平移、倾角、视场这三个参数值。或者我们也可以直接在预览窗口,鼠标拖拽到某一视角,滑动鼠标滚轮选择合适视场,此时对应的“当前的”栏下,即是我们手动选择的视图参数值,点击下面“设置”按钮,便可以设置成进入场景后的默认视图。

不满意默认视图,我们可以点击“重置”快速的回归原始默认,然后重新设置。点击“跳转到指定位置”即可查看默认下方参数对应的视图。

对于后面的这种样子的按钮,点击它,可以将当前的参数值,设置到其它所有的场景节点中去,可以省去我们一个个的设置。

默认视图的设置就这么简单,但默认视图还有个“投影类型”可以选择,默认的是“直线型”,除了此之外,还有“立体投影”和“鱼眼效果”

直线型就是我们正常看东西的效果。

鱼眼效果,视场不大,就是正常变点圆形。视场大点,就像鱼眼镜头的成像,当然也可以说成鱼的眼睛成像效果。视场拉到最大时,同时容下整个视界,全视角。

立体投影,视场不大时也是正常变点圆形,比鱼眼效果的变形小。视场大点,成像扭曲不太好描述。当视场最大,是扭曲的更厉害,但当视场最大且视角垂直地面时,我们就比较熟悉了,就是风靡已久新手特别痴迷实现的效果,“小行星”效果。

这三种效果的具体表现,我们可以自己动手输出预览一下。

添加热区(多边形热点)

我们上一篇文章讲的热点是一个点,我们也可以理解成一个点状的链接。本篇文章讲的是一个区域状的热点,区域可以是任意多边形,所以也可以叫它多边形热点。当然我们一般叫热点大部分都是指点状的热点。

添加多边形热点。

通过预览窗口在场景中选定区域直接勾绘。双击鼠标左键开始区域的第一个点,然后单击鼠标左键确定剩余的点位,直到最后一点,再次双击鼠标左键,结束绘制。

对于勾绘好的大致区域轮廓,如果有一些瑕疵(上面的勾绘不细致,只是简单粗略的轮廓勾绘),我们可以进行调整,调整的对象自然是点位。鼠标左键按住要调整的点,拖动位移即可。如果想删除已勾绘好的区域,鼠标选中,按键盘的Delete键即可删除。如果想增加点,鼠标左键点击边线就可以增加一个点。

多边形热点的参数设置,比点状热点要简单一些,最大的不同是没有“皮肤ID”。

是的,热区(多边形热点)是没有皮肤的,也制作不了皮肤。原因很简单,多边形相比较“点”,是不规则的,可任意绘制。而且皮肤说白了就是一个图标、图片遮盖原来的点。换成多边形区域,就是一个轮廓,我们想象不到,它皮肤该是什么样子。

除了没有“皮肤ID”,多边形热点的“类型”也只有“网址”和“导览节点”两个。

其实这一点,个人觉得不太好,应该也要和热点一样,有很多类型才对。当作触发器来说,多边形热点在一定条件下,还是有优势的,它可以“隐形”标注场景中的物品。有时候这种“隐形”标注效果更好。(即使没有给出类型,我们也可以制作出来像热点一样弹出各种元素,这个会员文章有介绍)

其余的就不多说了,选择“导览节点”连接场景时,和热点(点状)一样的设置。

上面我们提到了多边形热点不能设置皮肤,但是我们可以进行一定样式上的改变,通过“颜色”我们可以变换多边形热点的显示面貌。

去掉勾选“使用默认值”,我们看到默认的背景(也就是区域填充)和边框是深蓝色。在预览窗口勾绘的区域外,点击一下鼠标点可以看到样式。

点击背景和边框后的方框可以重新选择颜色。

可以在左边的基本颜色大致选择,也可以在右边的色板细致选择,还可以点击“Pick Screen Color”拾取当前电脑屏幕的任意点的颜色。当然如果要使用固定颜色,我们可以通过色彩三要素值或者RGB值确定,也可以由前端网页中用的十六进制颜色确定。这里需要注意一个“Alpha通道”,其作用是设置透明度,它的值这里不是百分比、小数,而是从0到255,0是全透明,255是不透明,按照百分比或小数的话固定的话,我们可以自己折算数值。

注意:单个热区的颜色更改可以在这里设置,如果多个热区的批量更改,就保持上面的使用默认值勾选,去下面介绍的热点——多边形热点,更改背景颜色和边框颜色。

热区到这里还没有结束,在输出前,我们依旧要看一下“输出”的“热点”设置

我们看到“多边形热点区”,

视图模式默认是“一直隐藏”,什么意思呢,一直隐藏是,我们勾绘的热区轮廓不会显示,但是它是存在的,我们设置的导览节点切换场景,在鼠标点击时也是有效的。除了“一直隐藏”的视图模式外,还有以下几种模式。

“一直显示”,与一直隐藏相反,勾绘的热区轮廓是显示的。“显示当前的”,是区域轮廓不显示,但在鼠标进入到区域后才会显示。“全部显示”,是如果场景中有多个热区,鼠标进入到其中一个热区内,场景中所有的热区都将显示。

另外我们注意到在这里也有背景颜色和边框颜色的设置,和之前提到的是一样的作用。前面在参数设置区,默认勾选了使用默认值就是使用的这里的颜色。如果批量更改颜色,就要在这里更改,这样所有热区都会显示这里的设置的颜色。

手指光标,是鼠标经过是显示手指样的图标,可以去掉勾选,变成默认的指针状。

添加热点

如果我们是初学者,看到现在,可能会提出一个疑问:当我们一个全景漫游中包含多个场景时,该如何将它们连接起来,逐个浏览观看?

我们在输入全景图的文章中说过,Pano2VR可以输入多个全景图片,场景个数在理论上是不受限制的。我们输入了多个场景自然会想到将它们“串联”起来,可以从一个场景中切换到下一个场景,继续浏览观看。

单纯的切换场景的话有很多方式,在添加背景音乐的文章中,所附的演示采用了缩略图的方式进行场景切换,这些我们后续都会逐一的介绍,包括通过导航图选择并切换场景浏览。而现在我们将介绍如何添加热点,通过热点将场景串联并切换浏览。

我们在输入全景图文章中已经知道了怎么添加多张全景图,添加的全景图都会在下方的导览浏览器中显示,细心的我们会注意每个全景图的左下角都有一个黄色三角形叹号标志,这个标志的意思,是这个场景(全景图),没有出去和进入的热点,也就是它没有链接指向其它场景,且其他场景也没有链接指向它。

当我们添加了“出去”和“进入”的热点以后,这个黄色三角形叹号标志就消失了。

通过预览窗口选择“热点”。

在预览窗口中选定要插入的位置,然后双击鼠标。

我们在预览窗口中看到的那个红色标志,即热点在编辑状态下的标志。

和我们插入图片及音视频一样,左边是对应的参数设置区域。

我们一一进行说明:

ID就不再赘述了,它就是“名字”,通过他来定位,一般都会默认自带一个,比如这里的热点默认ID是Point01,我们可以根据需求或喜好,重新进行命名。

类型,这里值得说一下。在版本4中,热点是没有类型这一说的,热点的基本作用就是链接场景,因为它的URL可自动填写的就是场景节点。

而在版本5中热点划分了类型,热点可链接的有一下五种类型。

这五种类型,在版本4里也可以进行链接,在URL处输入地址即可(只要地址指向的元素真实存在),但是,版本4对于除了场景的链接外,其它的都是浏览器标签页单独显示链接的元素。而版本5对这一点做了改进,针对不同类型,我们标注好后,能在热点皮肤中制作显示的效果,不再是以浏览器标签页进行显示,而是以弹出层的方式显示。

在本篇文章中我们只介绍“导览节点”,也就是用来链接场景的,其它的我们后续再展开。

类型,选择导览节点。

下面的皮肤ID是为热点链接制作的“皮肤”,指向的是对应皮肤文件中的热点皮肤ID。这里默认有个浅灰色的填充ht_node,这是自带皮肤文件中热点皮肤的默认ID,因为我们暂时还没说到皮肤这块,制作时没有设置皮肤,所以就不展开了,后期说皮肤,还会说到这里的。

这里的皮肤ID不设置的话,默认样式是这样。

标题和和描述,我们可以填充文字。在导览节点中,标题是有意义的,它会在鼠标经过热点时显示。而描述在类型为信息时,会和标题一同显示。(这是默认的情况,当我们后面学到占位符的时候,就可以想显示哪里就显示哪里)

链接目标网址,这里只需要点击后面,选择场景节点就行。

目标,在导览节点类型下,是指进入到链接场景后的视角。

我们可以选择输入目标后,输入目标值,指定进入热点链接的场景后的视角。不过通常我们并不是以参数输入,而是点击后面的红圈(查看目标参数),在弹出的小窗口中,有目标场景的预览。直接鼠标拖动和鼠标滚轮缩放来确定切换后的视角,点击OK,即可确定目标视角。

当然除了输入目标之外,还有两个选项,前进和后退。前进的意思是以当前场景的视角(其实也即是热点所在的“平移”值)进入下一个场景。后退的意思是以当前相反的视角(更改180°)进入下一场景。这里如果不太好理解,自己试验一下就明白了。

下面的“平移”和“倾角”是热点在场景空间的位置,可以通过这两个参数,改变热点的位置,也可以直接在预览窗口中拖动热点改变位置。

如果想删除已添加的热点,鼠标点击选中,按键盘的Delete键即可删除。

热点设置到这里还没有结束,在输出前,我们还要注意一下“输出”的“热点”设置。

我们看到“热点”下面有一个“热点文本框”。

我们上面有说到一个“标题”,在鼠标经过热点时会显示标题处填写的内容。这里的“热点文本框”就是针对这里进行设置的。

首先我们注意到,“热点文本框”前面有个勾选,是默认勾选状态。此时的状态,在鼠标经过热点时,即使标题处没有填写内容,也会显示一个空白的文本方框,大小就是默认的宽180像素/高20像素。如果我们去掉这个勾选,那么鼠标在经过时将不会显示文本框。

然后剩余的内容,就不多作赘述,都是对鼠标经过热点时的文本框进行样式上的设置。大小,就是文本框的大小,单位是像素,也可以勾选上后面的“自动”来根据文本占地儿大小自适应。文本的颜色,自动换行,文本框的背景(填充)和边框颜色,也可以直接去掉“可见的”勾选,不予显示。边框的“半径”意思时设置文本框的圆角,0是默认的不带弧度,这个数增大,可以将矩形变成圆角矩形。

 

补充一个遇到的非常多的问题:为什么我的全景图拖进软件就能看到灰色热点且删不掉?一开始像下面这样:

或者,由于你的好奇,鼠标点了两下,变成了下面这样:

我们什么操作都还没做就看到的灰色热点,并不是“灵异”现象,尽管这个灰色热点有个专门的称呼:ghost hotspot,翻译过来很灵异是“幽灵热点”。这个幽灵热点,其实是软件设计者为了方便我们后期的制作而设计的功能,用来辅助我们添加热点。幽灵热点不是在所有情况下都出现,一般的单反拍摄拼接、建模渲染的全景图是不会出现的,大部分情况下是全景相机拍摄、航拍拼接、手机拍摄的全景图才有。因为只有拍摄设备具备GPS功能,才会向照片中写入经纬度信息。全景图片带有经纬度信息的情况下,才会出现灰色的幽灵热点。所以我们查看一下全景图,只要出现幽灵热点,肯定带有经纬度信息,在“用户数据”里就可以看到。

所以,如果把全景图的经纬度信息删除清空,就不会出现灰色的幽灵热点了。需要注意,不是删除当前场景自己经纬度,是删除幽灵热点指向场景的经纬度,在分辨不出幽灵热点到底指向哪个场景,干脆就把所有场景的经纬度都删掉,这样所有的幽灵热点就消失了。但是,这里不建议大家删除。因为灰色状态下的幽灵热点,输出是不会显示的。如果单纯的不想在预览窗口看到,可以设置一下参数在预览窗口隐藏。

版本5,查看器设置,有隐藏幽灵热点的选项,勾选后灰色热点就不可见了。

版本6,查看器设置对应的参数面板,在预览窗口的下方(如果没有,记得点击一下上方的查看器设置)。点击红框处,即 Toggle Ghost Hotspots ,变成红斜线状态,就可以隐藏所有灰色的幽灵热点了。

回到开始提到的,假设你好奇地用鼠标点击了灰色热点,变成了红色并加小锁?的标志。这意味幽灵热点被激活了,变成了真实的实体热点,并且这时候 “链接的目标网址” 的参数就会链接到目标场景了,由软件自动进行的场景链接。

如果你想变回去,只需要选中这个带锁标记的热点,按下键盘的 Delete 键就可以回到初始的灰色状态。

如果你想保留被激活的实体热点,省去自己添加热点的麻烦,但是觉得位置不太准确或不太合适,你可以去掉小锁标记,再重新根据需求挪动热点的位置。

版本5,在热点的参数设置区,去掉“自动放置”勾选即可。

版本6,同样的热点参数设置区,去掉勾选。

场景中添加视频

上篇文章,我们知道了怎么在场景中添加图片,上上篇文章中也了解了如何在场景中嵌入声音,这两篇都清楚了,添加视频自然就简单了。

视频就是声音和图片的结合。

预览窗口选择“视频”

然后就是场景中选定要添加的位置,双击鼠标,选择要插入的视频文件。

我们注意到右下角给出了不少视频格式的类型的提示,在这些格式类型在HTML5类型的全景漫游中最“安全”的,也是我们接触最多的是 .mp4格式的视频文件,插入后能有声音画面的。当然,也有时候会出现只有声音,没有画面的情况,这时候需要用视频转换工具转换一下,另存一个 .mp4格式,至于原因,个人经验有可能这是一个伪 . mp4格式(被改了后缀名称的其它格式类型的视频),也有可能确实是 . mp4文件,但视频的编码类型不受支持,视频速率(即数据速率)太高,转换时调成H.264编码的 .mp4文件,数据码率如果有选择,不要过高。

(如果硬要使用流媒体可以选择输出或转换 .mp4的特殊格式 .m4v格式也是可以的)

插入视频后,就是调节的步骤。

我们看到右边的预览窗口,黑白格子即是视频区域,黄色阴影是声音的音场区域。调节前可以先将默认的声音模式“定向矩形”换成“静态”再调节视频画面的契合度。

注意,这里代表视频的黑白格子是正方形,和视频分辨率有些出入,为了调整的准确度,使所见即所得,我们可以将“大小”改成1280×720,使符合视频的实际分辨率。

剩下的一些契合度及效果的调节就不再重复说了,完全使上篇和上上篇内容的重复。

实际预览效果。

另外注意,视频的单击模式比图片多了一种,除了正常弹出、100%弹出,还有一个播放/暂停。而弹出模式,在火狐浏览器下,有点小问题,不论是本地还是本地服务器环境,弹出显示的位置会跑到左上角,且显示不全,再次点击,恢复的位置不再是原来插入的位置。这个小问题题可能是火狐浏览器的兼容性导致的,换成其它浏览器IE、谷歌均正常。不知道后期会不会修复。

补充一个问题,场景中添加视频,在移动端是没法自动播放的,拖动浏览会自动弹出播放,这一点,无法避免,这个是移动端的一些规则所致。如果是在移动端,还是直接使用热点弹出视频。当然,我们还要明白一点,实际案例中很少见到这种场景嵌入视频的形式,包括场景嵌入图片也是,都比较少见,因为契合场景麻烦。有些时候无论怎么调整,效果上还是不尽人意。

场景中添加图片

下面说说如何在场景中添加(插入)图片?

我们在上一篇文章中介绍了一种添加背景音乐的方法,即在场景中插入音频,而本篇文章介绍的添加图片的步骤,与其类似。

在预览窗口中选择“图像”。

然后在要插入的位置双击鼠标,在弹出的文件中选择要插入的图片。

选择插入的图片后,我们一般都需要对插入的图片进行调整,目的是使图片更契合场景。

我们看到预览窗口中我们插入的图片,以及左面相应的参数设置区域。显然,我们需要对插入的这张图片进行调整(为了更好的深入介绍,特意选择了场景空间中原本存在的图片,同时,插入的图片与场景中的原图略有出入,这样便能详细的讲解一些参数调整)。

我们注意,对插入的图片进行调整,我们可以通过左边的区域设置参数,也可以直接对右边的图片通过鼠标拖动调整,当然,两者相辅相成才能更好的调整出来最终效果。

开始调整。

首先,由于插入的图片尺寸过大,我们对预览窗口先鼠标滚轮,改变一下视场角(拉远距离)。

然后我们初步调整下图片在预览窗口中的大小,鼠标左键按住图片四个角的其中一个,上下拖动,向上是放大,向下是缩小。

先暂时调整个大概,下面进行契合度的调整。

我们注意到图片上有三个旋转箭头,这三个箭头是示意,分别围绕各自中心轴旋转。

这也是参数区域对应的示意图

我们对于这张图片让它绕Y轴旋转

鼠标左键按住红框的旋转箭头,上下拖动,使图片与场景中的图片在空间上大概平行。

然后我们再次拖动图片顶点,调整大小,并点击图片中间“相机”位置移动位置。

然后我们需要在左侧参数设置区域,调整“垂直拉伸”(后面的数值大于100%是拉伸,小于100%是压缩),将数值调小进行垂直方向的压缩。

然后重复几步上面的步骤,拖动图片的位置,改变大小,垂直方向的伸缩,或调整XYZ旋转,最终使得图片契合场景。

输出预览一下,契合度还可以。

整个调整过程比较繁琐,我们需要耐心点,刚开始可能会很麻烦,慢慢地熟能生巧,大部分都会调整的非常契合。

再次说明一下,参数对应的调整。

绕X、Y、Z轴旋转我们就不说了,在预览窗口中有三个旋转箭头与之相对应。

平移、倾角是图片的在空间中的定位,也即通过这两个参数,移动图片在空间的位置,当然我们可以直接点击图片中心的“相机”图标拖动改变位置。

视场角/视场,即图片在空间的大小,我们可以直接在预览窗口中上下拖动图片的定点调整大小。

垂直拉伸,即改变图片的宽高比例,当然我们还可以直接调整上面参数的“大小”像素值,来改变图片的尺寸比例。

剩下就是单击模式和手指光标了,后者没有什么特殊的,打勾后,输出预览时,鼠标经过插入的图片时,箭头光标会变成小手光标。

我们最后说一下单击模式。

单击模式有两种,一种是正常弹出,一种时是100%弹出。

正常弹出的意思是,点击插入的图片,图片由契合场景的状态弹出放大,放大到原本自身的尺寸,这种适合插入的图片尺寸不大,如果尺寸过大,超出浏览器显示区域的大小,那么超出的部分将会看不到。

而100%弹出的意思,是点击弹出放大,但会撑满浏览器的宽或高,视图片的宽高比例而定,图片宽高比小于浏览器显示区域的宽高比(图片竖条状),也即我们演示的这个例子,那么图片的高会撑满浏览器显示区域的高(垂直空间)。反之,则反。如果比较巧的话,插入的图片宽高比等于览器显示区域的宽高比,那么图片将会铺满显示区。

当然不论那种模式,再次点击一下弹出的图片,图片将会恢复到插入的状态。

补充一下,如果我们不想使用100%弹出,铺满宽或高的显示。那么我们可以使用正常弹出,只要插入的图片我们提前处理一下大小就可以,使图片不要超出浏览器的宽且高就好。但是,如果输出的漫游也在手机浏览器观看,那么还是100%弹出更省心一些,否则得兼顾考虑常见电脑和手机的屏幕尺寸比例。而如果这张图在场景中很大,我们又不能处理的太小,否则插入,需要往大了拉伸,可能导致插入场景不清晰的结果。

注意:实际案例可能这种场景嵌入图片的形式比较少见,因为调整契合比较麻烦,且有时候效果不太让人满意。常见的形式是 热点弹出图片 。

添加背景音乐


Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

Warning: Undefined array key "pano2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 43

Warning: Undefined array key "object2vr_player_version" in /www/wwwroot/www.pano2vr8.com/wp-content/plugins/garden-gnome-package/include/ggpackage.php on line 44

Pano2VR制作的全景漫游不仅仅是将全景图还原成三维空间场景进行交互浏览,它还能够添加图文、音视频等多媒体丰富漫游浏览。

下面我们就简单说说如何添加背景音乐,即添加音频丰富全景漫游。

添加背景音乐有两种方式:

第一种就是简单的设置场景背景音乐

选择场景,在“属性”的“背景声音”处设置

点击选择声音(音乐)文件

确定之后,我们看一下设置

替代文件,是指当我们刚才设置的背景音乐无法播放时启用的替代文件,这种情况很少,我们们这里就不作设置了。

级别,是设置我们插入音乐的音量大小,默认是1,即原始文件的音量,我们可以调小,这里其实作用不大,除非个别声音文件的音量较突出,可以在这里快捷的“均衡”一下音量。

循环,是设置背景音乐的的播放次数,默认是1,即播放一遍后就停止,我们可以设置循环播放的次数。如果想要无限循环,那么设置成0就可以了。

外部化文件,在输出HTML5的情况下没有意义,就不作赘述了。

设置的背景音乐,我们也可以移除,鼠标右键,选择“清空”即可。

注意一下,我们可以给每个场景都设置背景音乐,这样我们进入各场景就播放对应的音乐文件了。但若想整个全景漫游所有场景都播放一首音乐,我们只需在首节点设置背景音乐即可。

第二种是在场景中“嵌入”背景音乐

鼠标移至红色方框区域,唤起预览窗口的侧边工具栏。

选择“声音”

此时我们在场景中选择一个位置,双击鼠标,选择声音文件。

确定声音文件后如下

我们说一下,对应的“属性”设置

替代文件,级别,循环,外部化等这几个参数我们就不再叙述了,主要说一下模式以及水平、垂直大小。

我们首先要知道,这种插入背景音乐的有音场“特效”,音量随着距离递减,具体是什么个特效,这里图文难以描述,实际操作起来就清楚了。

模式,就是赋予音场特效的功能,有如下几种供我们选择

其中默认是定向矩形,和定向循环(其实定向圆形更贴切)一样,有音场特效,其余的没啥特殊效果(或许也是音频质量低且耳机差听不出来),都和静态差不多,和第一种添加背景音乐的效果一样。

水平大小以及垂直大小就是插入声音文件虚拟音源的占位大小,默认10°,这两个的参数意义可以理解位声音音量1(最大)的区域。若是定向循环,此处只有一个水平大小,因为圆就一个直径。

下面说两个重要的参数,一个是环境,一个是场地大小,这两个参数默认分别是0和90°。场地大小就是声音音量递减的覆盖区域,环境就是超出场地大小后的音量。

场地大小默认90°什么意思呢,以音源(矩形或圆形的实体边缘)为中心,向左或向右90°范围内声音是递减的,递减到环境音量,这里默认是0,意思也就是说递减到没有声音。如果用耳机听的话,它是一种,左右声道的递减,更具有“立体”效果。这里我们可以根据自己的需求去修改这两个参数。如果觉得环境音为0的效果不符合“实际”,我们可以稍微修改一下,建议维持或不要高于0.1(0.2、0.3根据实际情况),因为这个环境音量大了,那种递减的效果就不明显了,失去了音场的最佳效果,当然如果设置环境值为1,那就完全没效果了。

 

添加背景音乐的基本操作,上面已经描述完了。

下面说一下注意事项,早期没有发现这个情况,随着各浏览器开始过于人性化考虑,出现了一个问题,就是一些浏览器(Google Chrome、Firefox)默认不允许网页嵌入的视频或音频自动播放。Google Chrome浏览器网页打开后,没有互动就没不播音频,必须要鼠标点击交互一下才出声,这个没法,只能遵守它的规则,缓兵之计是在 设置——隐私设置和安全性——网站设置——声音——允许 添加上站点即网页地址链接。

Firefox火狐浏览器,也是默认不允许网页嵌入的视频或音频自动播放,打开后看地址栏。

点击一下上面的红框处,设置一下允许音频和视频,刷新一下页面就出声了。

当然也可以进入 选项——隐私与安全——权限——自动播放——设置 所有网站默认值:允许音频和视频 进行管理。

这个声音问题和Pano2VR的关系不大,是浏览器的锅。

另外,移动端IOS系统,也需要点击交互一下才会加载声音,不过这个需要使用6.1.2版本以上制作,之前版本制作在IOS端可能始终加载不了声音。

输出后的打开问题

作为初学者,我们可能遇到第一个难住我们的问题就是,制作好的全景漫游自动调用浏览器能打开并正常的浏览,关闭浏览器后,尝试直接用浏览器打开 .html 文件发现打不开,一般伴随如下提示:

这种提示常见于360等浏览器,其他浏览器一般就是直接黑屏只显示皮肤。

这个问题并不是浏览器的原因,我们在第一篇 了解Pano2VR 文章就已经说明过,制作做出来的“全景”,运行环境是服务器,打开方式是浏览器。后一步打开方式是浏览器我们做到了,可是前一步并没有做到。

我们输出的全景漫游文件,运行时是js读取xml参数在html页面显示,而一般浏览器都会根据CORS policy,出于安全考虑,阻止本地加载的这一过程。

本地正确的演示办法有三种:

第一种,直接使用浏览器打开。

早先 Firefox 火狐浏览器、Microsoft Edge 浏览器都可以直接打开.html文件浏览。随着各浏览器更新,现在没有直接打开.html文件就可以浏览的浏览器了

使用Firefox火狐浏览器,在版本68(2019.07.18)始,本地文件的安全性做了一些改变,安装或是更新之后,默认情况下不能直接打开了.html浏览全景了。当然,我们可以做一些修改,使其依旧能直接打开。具体参考网络小知识部分的文章:修改火狐首选项 。

如果想使用Chrome打开,也需要做一些设置,参考文章设置打开:Chrome本地打开index.html

还是这个图标的 Microsoft Edge 浏览器可以直接打开 index.html 文件

现在 Microsoft Edge 更新了,不能直接打开本地 index.html 了,新图标 Edge 使用的是谷歌浏览器内核 chromium ,想直接打开本地 index.html ,参考 Chrome本地打开index.html 进行相同设置即可。

第二种,使用软件的内置web服务器。

点击进入服务器地址。这时候会显示工程文件的上一级或着同级路径,点击选择输出的文件夹。

点击index.html便可以直接浏览。

其实我们输出后直接自动调用浏览器打开,就是借助的软件自带的web服务器,只是过程是在后台而已。

另外,注意这里。

“打开输出”,对于已经输出过的项目,在打开工程文件时,可以点击“打开输出”进行浏览,这也是后台调用了自带的web服务器。(注意一定是输出之后再预览)

“打开输出”只能看当前打开的工程项目,想查看另一个项目就要打开另一个的工程文件,如果是多个项目还是上面自带的web服务器方便。

第三种,就是本地搭建服务器浏览文件。这个就不展开了,在“网络小知识”部分有详细的介绍。

下面继续补充一些打开的相关问题。

打开文件如果是如下图,出现 Error loading panorama XML 或者Error loading XML的提示,这个Error翻译是“在加载xml文件时出错了”。

一般是由于xml文件命名出现了中文。这个问题常见在版本4和Object2VR中。原因是我们给图片的命名是中文,拖入编辑时,xml就抓取首节点图片的命名,导致出现中文名称加载时报错。Object2VR中少见,因为前一步图片序列命名都是image_0_0格式,不会出现中文,当然也有自己改xml中文命名导致报错的情况。解决办法是输出前在软件内将xml文件名称修改为不包含中文的命名,使用软件时培养个命名不要中文的习惯。

另外还有一种情况就是,热点添加了“打开下一个全景”的动作,链接了一个不存在的场景,特别是当工程文件就一个场景时,误复制的热点设置了打开上/下一个场景,但链接场景不存在,就会报这种错误提示。

总结下:不论是中文命名还是热点的不存在链接,背后的根本原因都是找不到xml。所以,只要是xml无法加载或识别,都会报这个错。比如一个新情况:有伙计自己制造麻烦,在Object2VR中输出前非得把xml的存储路径给改了,改到出了output文件夹,html加载的时候找不到xml,自然也会报这个错。

如果输出完自动调用浏览器发现空白一片,并且检查输出的文件夹占用空间是0或者几B、KB,那么很有可能是软件本身的问题,这时候再检查一下输出设置——HTML网页——模板,看是不是不显示默认的normal.ggt,也不能切换选择其他模板。如果是,那解决办法就是重新安装软件,正常可用的软件。

打开文件如果左上角有如下提示,表示使用的是过了试用期的软件。

解决办法是购买使用许可,更换正常能用的软件。

正版软件在试用期内,输出的全景漫游,会打上Pano2VR - Trial字样水印,密集排列,这是正常的试用期内的软件,不购买正版许可是去不掉的。