作者： little山林

本篇文章放到高阶教程里，和高阶教程里其它文章一样，并非制作困难，只是给大家提供或者说拓宽一下思路。到后期随着不断深入，我们内容可能还会变成学习各种案例中的一些效果和功能的实现。

添加Logo，可以是各种各样的，甚至不一定是Logo，可以换作任何图像标识。

除了Logo之外，还可以添加“花边”。建议是整张的设计使用，当然也不一定必须要使用整张图制作花边，可以一张张的图片条上下左右拼凑。花边如果是整张透明的png图，需要在高级设置里勾选可穿透。并且设置宽高100%铺满显示。

更多时候，Logo和花边之类的元素也能使作品出彩。

 

补充：Logo的另一种展现方式——右键显示Logo信息

我们在基础教程文章 控制设置 中介绍了右键菜单可以自定义一些信息。

我们除了可以在菜单链接中添加文字链接，还可以添加Logo图片链接。

首先，在皮肤编辑器中添加Logo图片。设置ID，由原来的 Image 1改为 Logo（这一步非常重要），设置位置X：0  Y：0  ，锚点右上。

由于Logo不是在皮肤中直接显示的，因此要设置“不可见”。

然后回到控制——菜单链接参数区。

文本处添加如下内容：

<img src="images/Logo.png" alt="Pano2VR中文教程网" width="135" height="135" />

img src后面是我们的图片路径，一般我们皮肤中添加的图片都输出在output根目录下的images文件夹下面，路径要带上图片的命名包括图片的格式，其中图片的命名在输出后都会重新以皮肤中 ID 名称来命名。

如果我们没有修改图片的ID，保持默认的ID “Image 1” 的话，上面的红色Logo.png就要换成  image_1.png  建议我们还是在添加Logo图片的时候就修改ID。

alt后面的内容就是鼠标经过显示的内容，不过这里都是在浏览器的左下角显示。

width，height就是我们Logo图片的大小，135这个值是比较合适的，因为默认的一些右键信息，宽度就是135，高度自然要根据实际图片的比例来。要保证不变形。

网址添加我们要链接的站点，注意网址前要加上http://

最后预览一下效果。

在基础教程中我们已经学会了制作基本的导航图了，本篇文章将在导航图的基础上添加一个功能，制作“雷达”视野效果。

添加雷达扇区图片。

将雷达扇区图片移至节点标记位置对齐（细节对齐可通过工具栏缩放），树列表中移至对应节点的子级。

雷达扇区图片是不可见的，只有在节点激活时才显示。因此需要设置雷达扇区图片不可见，并给节点添加激活和停用的动作。

接下来是最重要的，让雷达扇区根据场景的旋转和缩放动起来。

修改器设定。

另外需要注意，雷达扇区，要以下顶点为轴心进行旋转缩放，所以要设置一下图片缩放的锚点。

以上便是给节点制作一个雷达视野，可以按步骤给其余两个节点补上。当然如果我们提前熟悉再制作的化，可以制作一个节点，其余节点复制即可，只需要更改节点的漫游节点/标签。

到这里我们还需要回到主界面设置正北基准方向。

正北基准方向，不一定是场景的真正的北方向，它是导航地图中的北。导航地图的北，默认上北下南左西右东，也即是导航图的上所对的方向即是正北基准方向。

案例不具有代表性，恰巧用的全是真北方向，不需要设置。我们这里重新假设，导航图为下图这样横着。那么真实的北方向就不是正北基准了，真实的西才是正北基准。

我们设置这里的正北基准，就要朝着场景真实的西方向，“向北”的值，就要设定场景向西时的平移参数。

这个取大概值就可以，没必要很精准。

当然还有个办法，按住键盘的N键，鼠标拖动正北标志，快捷的设定正北基准方向。

总之，这个正北基准方向要弄准，否则，雷达扇形指示方向上就不准确了。

 

VR浏览模式是针对VR眼镜的，这里的VR眼镜非一体机，而是以谷歌Cardboard为代表了“凸透镜盒子”，在Pano2VR里也以cardboard作为VR模式的标识。

这里就不解释VR眼镜的原理了，在Pano2VR里输出cardboard就是适配VR眼镜的双目分屏显示。

输出很简单，第一步在HTML网页里选择cardboard.ggt模板，第二步皮肤选择cardboard.ggsk 。

输出预览。

在这里补充说明一下，目前为止，这个VR模式只能作为一个功能点扩展。实际应用上这部分是比较受限的，首先它对设备有要求，我们需要一副良心的凸透镜盒子，需要一个5.5寸左右起码1080分辨率的手机，屏幕大了小了，显示效果都不好，大了看不全，小了有白边，分辨率低了，颗粒纱窗效果。其次，制作的时候cardboard模式只能制作较为简单的交互操作，浏览起来比较麻烦。多场景时，依靠cardboard皮肤中心点停留在热点中心切换场景。最后，制作漫游的图片本身分辨率达不到，一切都白谈。所以，当下也只能作为一个“噱头”功能点应用，实际中并不广泛适用。

另外还要说明一点，一定不要把全景漫游和VR混为一谈，即使Pano2VR名字中使用了VR，目前为止，Pano2VR并没有真正布局到VR这里，这个也是行业的限制，硬件软件都没能突破，VR这块儿还是停留在16年媒体吵嚷的“VR元年”，VR元年的科技是元年前十几年的科技，所以公元VR 2 年，暂时还是那点东西。最后，我们学会了制作全景漫游记得不要称自己是VR行业人士。手机贴膜的是你也不是。

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

我们在之前基础教程中已经介绍了如何开启重力感应（参考：HTML网页设置（开启重力感应））

开启之后在移动端浏览全景漫游时，会一直保持重力感应状态，在一定意义上并不方便。我们在这里制作一个开关按钮，控制这一功能。

添加按钮。

给按钮添加动作。

URL处填写的是  javascript:gyro.toggle();  （复制使用时，不要多复制了空格）

输出预览。

 

另外这里补充一点，当我们开启了重力感应，并且设置了小行星开场，在移动端时两者会有冲突，会出现小行星开不了场，卡在立体投影的视角。解决办法就是，让重力感应在开场的时候就关掉，或者延时启用，避开小行星开场。

如果是让重力感应在开场的时候就关掉，通过按钮来开启或关闭。

只需要给任何一个皮肤元素添加上如下动作。为了不混乱，我们可以将这个动作添加给重力感应的开关按钮。

URL填写是  javascript:gyro.disable();

如果是让重力感应延时开启，避开小行星开场，当然还可以通过上面的开关按钮来开启或关闭。

在皮肤中添加一个定时器。

设定时长为3或4秒。这是依据默认小行星速度为2时的加载时间，速度不一样，时间不一样，这里设置的时间也不一样，要保证这里的时间大于小行星的开场时间。类型一定要注意是初始值，“初始值”是指定时器这个元素加载就激活，“读取完毕”是指是指六面片即场景加载完毕即激活，这两种类型“初始值”加载的更早。

然后，给定时器元素添加上动作。

URL填写的是   javascript:gyro.enable();

当然为了集中管理，我们可以将上面的关闭统一添加给计时器。

这样做就会在项目加载时关闭陀螺仪，3秒后计时器停用，开启陀螺仪。

另外注意，这里的 javascript 语句不要随便用，放到其他元素的激活或停用动作里，会出现黑屏错误。

注：之前的内容有误，导致小行星开场和重力感应依旧是冲突的，在会员353****858@qq.com的提醒下，已做修正，非常感谢。

本篇文章和上一篇热点弹出图片操作步骤完全一致，只需要把“添加外部图像”换成“添加视频”，这里就不多做赘述了。

下面我们补充一下弹出视频后的操作，即播放/暂停和进度条。

添加播放/暂停按钮。

当然，按常见的操作习惯，这两个按钮是占用同一位置，就像基础教程 制作控制按钮 中的双向按钮。

由于我们的视频是弹出后就立即播放，所以，暂停按钮先显示，设置播放按钮初始隐藏，并各自添加鼠标点击动作，点击隐藏自身，显示对方。

然后就是对按钮添加真正的功能动作。

接下来，添加进度条。

视频进度条设置。

播放进度，即已播放的时间线。下载进度，就是缓冲的时间线。播放头，是当前时间点，这三个就是颜色上的设置，其中播放头可以去掉开启勾选，使之不显示。

媒体元素，即选择我们进图条控制的视频。

我们这里视频元素的额 ID 是 Video 1

最后，基本设置完毕后。考虑播放/暂停按钮和视频的进度条都是随视频出现的，所以要把它们成组，并设置初始不可见。

成组后可以设置一下位置，注意锚点要相应的设置。

随后分别再给热点添加点击显示的动作，给关闭按钮添加点击隐藏的动作。

预览。

上面是我们“手工”制作的视频控制，其实，我们还可以快速的添加控制功能。

勾选“控制”即可。

我们在基础教程添加热点文章中知道热点有5种类型（导览节点、图片、视频、网址、信息），并且介绍了添加导览节点的基本步骤。本篇文章将介绍添加图片热点，点击热点弹出图片。

实现上，主要是制作图片热点皮肤以及图片弹出层。

制作图片热点，我们就不详细叙述了，参照制作热点皮肤。

这一步实际上就是给图片热点做一个皮肤。

接下来就是制作图片的弹出层了。

添加外部图像。

在画布中间位置绘制区域，设置位置以及大小。大小建议60～90%，宽高值一致，定好宽高，计算X、Y的值。我们这里设置的是宽、高分别是75%，X、Y是12.5% 。

另外注意，外部图像是承载热点URL的图片，所以不需要实体，不需要显示。

外部图片，内容缩放至最小，也即是在图片区域内以宽高中的最大值缩放至区域宽高。通俗地说就是，如果图片是横扁的，就是图片的宽撑满区域的宽，如果图片是竖窄的，就是图片的高盛满区域的高。

剩下的就是热点如何唤起外部图片了，即给上面制作完的热点添加上动作（是给Hotspot picture热点添加动作）。

$hu 是热点URL

到这里基本完成，这样我们在添加热点的时候就可以直接使用了。

热点类型选择“图像”，皮肤ID选择我们制作的热点皮肤“Hotspot picture”，在链接目标网址处点击文件夹图标，选择我们要链接的图片。

设置完毕输出预览一下。

我们应该能意识到，到这里并没有完成。

点击热点，打开图片了，还需要关闭。另外，还要考虑，突出弹出的图片。

两个更改，添加矩形作为背景烘托，添加一个关闭按钮。

注意，矩形在树列表里要在外部图像区域的下方，初始不可见，宽高100% ，颜色尽量素色且设置透明度。

关闭按钮，树列表里在矩形上方，外部图像下方。位置锚点右上角，初始不可见，动作点击隐藏外部图像、矩形背景和自身。

其实，根据操作习惯，也可以不需要这个关闭按钮，把关闭的动作给矩形背景也符合操作的习惯。当然，这个根据自己的喜好和设计需求来。

回到热点上，补充两个动作。分别是点击显示矩形和关闭按钮。

输出预览即可。

以上是制作热点弹出图片的所有内容。

有一点小建议，在制作皮肤的时候，一定要养成对元素重命名的习惯（重命名注意英文+数字），否则，单纯依靠软件默认的命名，随着皮肤文件中元素增多，后期容易混乱。

最后注意，有时候，我们会遇到弹出的图片是旋转了90°或180°的，即，在电脑上看图片是正的，放到这里面看图片不正了。遇到这种情况的解决办法是使用图片编辑器，比如PS、美图等，另存一下，或者旋转一下另存。出现这种情况的原因是，这些图片本身就是“不正”的，之所以看到是正的，是使用了一些图片查看器旋转过来的，这种旋转属于“伪旋转”，只是从显示上做了改变，这种改变有很多查看器都能“承认”，但在web端“不承认”，所以我们需要使用编辑器，从根源上旋转过来。

有时候，我们拍摄合成后的全景，可能会出现一些小瑕疵。比如拼接缝合的不严谨，结合处有一些扭曲，比如三角支架的脚架和影子，或者我们拍摄者的影子，这些都需要进行修补。当然，这些问题有些是在拍摄时就可以避免的，实在避免不了的我们再在后期中修补，可以在拼接缝合软件中进行调整修补，或者合成全景图片之后，使用图片处理工具Photoshop、Fireworks等等进行图片的修补，如果最后实在修补不了，或者合成后的图片不方便再修改，例如脚架及影子，我们就需要本篇文章了，使用Pano2VR的补丁功能。

在需要补丁的位置，双击鼠标添加补丁。添加补丁的说法可能不准确，准确点讲是提取补丁，也就是把“补丁”区域进行重映射提取出来图片，然后再使用图片处理工具修补。“补丁”这一功能就弥补了图片处理工具无法直接修补全景图顶部和底部的问题。

在需要修补的地方双击鼠标后，或默认给出补丁区域的大小等参数，我们具体的来看一下。

平移和倾角，没什么好说的，所有添加到场景的元素（图片、声音、视频、炫光），都是由这两个参数决定位置，可以在这里细节的调整元素的位置，当然元素的位置，我们都是可以直接在预览窗口中拖动的。

摄影机转动，能改变补丁的旋转朝向，我们能看到补丁区域一个UP箭头标志，这就是提取出来图片的顶部朝向。改变这一参数，有时候可能只是旋转一下区域恰好能覆盖住要修补的区域，有时候是为了与图片中的内容方向吻合，提取出来的图片在图片处理工具中，能方便直接地处理。像图片的绕 Z 轴旋转一样，这里也可以直接在预览窗口中，在中心圆圈箭头的边缘，按住鼠标上下移动，旋转补丁。

视场，就是补丁区域的大小，可以在这里设置数值进行严谨的选择补丁区域大小，也可以添加到场景中的图片一样，鼠标按住定点上下拖动改变大小。

长宽比，决定区域的形状，数值默认等于1，也即是正方形区域。

类型，这里就选择默认的图片，格式，也使用默认的Photoshop（.psd），质量这里只有在jpg或jpeg是可以选择调整，其余格式都不需要调整质量。

文件，会在图片所在同级文件路径下，创建一个patches文件夹，提取的文件回忆场景名加后缀patch编号命名。注意，这里的文件夹及命名都不要做任何更改。

在以上参数都设置完成后，可以直接点击提取。

映射提取完毕，如果电脑上安装了Photoshop，软件会自动的调用程序打开图片。或者我们找到patches文件夹里的文件打开。

剩下的就是处理修补过程。（此处省略）

修补完毕，保存。我们再回到场景中看一下效果。

如果没反应就更新一下图像即可。

“炫光”也就是镜头光晕，在Pano2VR版本5中加入了这个功能，简单的说就是在场景中添加光源和光晕，模拟真实的效果。

其实按难易和重要程度划分，这部分应该放到基础教程中，不过看在是版本5的新功能，而且基础教程中也没想到介绍这部分，索性就放到高阶教程中。顺带也补充说明一下，高阶教程不一定都是很难很高深的知识，有一些只是在基础教程中不好扩展而已。

回归正文，我们看一下如何加“炫光”。

和添加图片视频一样，选择“镜头光晕”。

在场景中的原“光源”位置，比如外景的太阳光源或室内的灯光源，双击鼠标添加。

接下来就是对“镜头光晕”的参数调整。

样式有如下几种，至于每种样式的效果我们就不再这里展开了，可以自己输出预览一下。

炫目，是指我们正对“光源”的“耀眼”程度，百分比值，值越大，正对光源时越“耀眼”，场景也越刺目。

Alpha，是指投下来的光晕透明度，简单说就是光晕的明显程度，百分比值，值越大越明显。

平移和倾角，是指光源的位置，除了鼠标在预览窗口直接拖动外，可以在这里进行微调整。

以上就是加“炫光”的内容，记得使用这个功能就好了，用好了可以给我们的全景漫游增添效果。

皮肤设计的时候一定要考虑交互友好性，要让每一个浏览者都能轻松无障碍的浏览。

基础的做法是对于一些皮肤元素有文字提示。

这些提示不需要一直显示，只需要在“恰当”时候，鼠标经过提示就可以了。

设定文本的初始值不可见。可以在外观中去掉可见勾选，或者在动作中添加初始值隐藏。

将文本拖到对应按钮的子级，这样提示是跟随着按钮位置的。

给按对应钮 Button 2 添加动作。

按照上述操作给其它按钮制作文本提示。

对于缩略图，一样可以设置提示。

对于添加上皮肤模板的热点，就不会鼠标经过显示热点标题了，这时候也是添加文本框制作提示。文本内容当然不能填写固定的内容，这里填写是$ut，实际会显示热点指向导览节点场景的用户数据标题。当然这里也可以填写其它的，更详细的可以参考文章 使用占位符抓取信息 。

另外，还可以制作“整体”的提示，当然这也是展示一些信息的制作方式。

 

 

不论是做设计还是做前端，一定会有透明度的使用。在Pano2VR中我们也可以使用透明度提升一下我们皮肤的美观。

我们在制作导航图文章中提到，为了避免导航图片的面积过大而影响浏览，使用了鼠标进入和离开事件来改变导航图的位置。其实我们可以换一个思路解决这个问题。

把改变元素的位置换成改变元素的透明度。设定导航图的初始透明度，然后鼠标进入导航图区域，改变元素的透明度，鼠标离开区域回归初始透明度。

首先设定元素的初始透明度。可以直接在外观设置中设定Alpha值，也可以添加动作，初始值设定元素透明度。

我们使用外观设定Alpha值，然后再添加一对鼠标进入和离开的动作。

预览。

这是将透明度应用到交互效果上，除了导航图外，按钮、缩略图以及其它皮肤元素都可以做类似处理。当然透明度不仅仅可以应用的交互的变化上，还可以在静态的皮肤元素中使用，比如一些Logo或者更丰富的皮肤界面等。以上内容仅提供一个参考，具体使用上我们可以和其它效果自由组合发挥。