1、pano2vr全景漫游制作一、单个全景制作1.1.运行【pano2vr】，进入主界面；1.2.点击【选择输入】，选择全景图片；1.3.【输入】-【类型】默认为【自动】，点击全景图【打开】，选定图片后，点【确定】返回主界面；1.4.【打补丁】可将LOGO放入全景；1.5.可加入多个补丁，点击【增加】添加一个补丁，按下图进行设置；1.6.【显示参数】可调整全景的水平和垂直角度以及正北方向；1.7.【显示参数/限制】用于指定全景初始的视角，【平摇】为水平方位，【俯仰】为垂直方位，【FoV】为可视角度，【正北】可调整全景的方位；1.8.【用户数据】用于填写作品相
2、关的信息和全景的经纬坐标；1.9.点击【纬度】后的坐标按钮，设置全景的经纬度信息；通过【设定正北标记】和【选择地标】可方便的设置正北方位；1.10.【交互热点】可在全景实现人机交互的功能；1.11.在图片中的任何位置双击加入一个点型热区；1.12.向左移动至大门，再添加一个多边型热区；1.13.媒体中可加入背景音乐、图片和视频等；1.14.点击右侧的打开文件名，可选择背景音乐；1.15.在左侧图片的相应位置双击，可添加图片和视频；1.16.在电视位置双击，可添加视频；1.17.在主界面的输出中选择输出格式后，点击增加；1.18.选择系统自带的皮肤；1.19
3、.设置FLASH输出的视觉效果；1.20.设置FLASH输出的视觉效果；1.21.点击确定生成SWF格式文件，即完成；1.22.在主界面的输出中选择输出格式HTML5后，点击增加1.23.点击确定生成HTML5格式文件，即完成；二、多个全景漫游制作2.1.完成单个全景的基础上，在主界面右侧的【漫游浏览器】中，鼠标右键选【AddPanorama】添加新的全景；2.2.参照【一】的步骤依次加入全景2和3；2.3.接下来需要对所有全景设置交互热点，依次选择全景，设置【交互热点】-【修改】注：1.填写【ID】时，需要与【UR
4、L】中的编号一致，便于后期导航图和缩略图的皮肤制作；2.【皮肤ID】也是与皮肤中的热点名称一致，这里暂且定义为hs1；2.4.完成三个全景的热点交互之后，右侧漫游浏览器中每个全景的感叹号就消失了！2.5.多个全景漫游的制作到此就OK了！点击【全部】看看效果吧！三、脚本编辑在【主界面】-【输出】中点击【参数】按钮；参照下图，点击【编辑】按钮，进入皮肤脚本编辑界面；参照下图设置皮肤的大小后，就可以准备皮肤脚本的制作！3.1.工具栏制作3.1.1.参照下图添加一个【绘制矩形】3.1.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图
5、片的高并预留上下部分的空白，本例中按钮图片为40*40；3.13参照下图添加一个图片作为按钮，然后点击新增的图片，修改【ID】为tool_left3.1.4.依次加入所有的按钮图片并拖到相应的位置，并将【矩形】拖到皮肤的左下角（或你喜欢的位置），记住要设置【锚点】接下来就要对每个按钮设置功能，双击【tool_left】弹出【图片属性】，选择【动作/修改器】3.1.5.参照下图设置动作，并依次右上下和放大、缩小（下文不再详细说明）第7个和第8个按钮如下3.1.6.再添加两个【矩形】，分别是缩略图（sltbar）和导航图（dhtbar），并分别放至左上角和右上角注：为方
6、便演示，皮肤大小调整为640*380，全部完成后可以再进行调整；3.1.7.参照下图设置第9个和第10个按钮的动作最基本的皮肤制作到此已完成，保存皮肤并返回主界面，生成输出看看效果吧！还有一个小小的美化的处理，三个bar的透明处理，再次进入皮肤编辑界面，双击【toolbar】，参照下图设置透明度和动作，别忘了另外两个bar保存皮肤并返回主界面，生成输出看看效果吧！是不是美了！？3.2.缩略图制作3.2.1.双击【sltbar】矩形，修改尺寸3.2.2.现在开始【sltbar】的制作，参照【3.1.3】的方法在缩略图矩形中加入左右两个方向箭头3.2.3.在中部
7、加入【容器】，修改【ID】并设置大小和位置3.2.4.双击slt_center【容器】，勾选【蒙版】3.2.5.再添加一个【矩形】，【ID】为slt_center_items，并设置【矩形属性】3.2.6.在slt_center_items【矩形】中依次加入缩略图【图片】3.2.7.依次为每个缩略图设置交互热点替身,双击第一个缩略图，填写交互热点替身ID为Point01013.2.8.点击动作/修改器选项卡，设置动作，其中dt0101和yellowdot是导航图中的对象名称3.2.9.第二、三个缩略图如下3.2.10.在右侧的【树】中，将slt_cent
8、er_items【矩形】拖入slt_center【容器】中3.2.11.修改slt_center_items【矩形】的位置，与slt_center【容器】的位置一致3.2.12.在右侧的【树】中双击slt_left,进入【动作/修改器】3.2.13.在右侧的【树】中双击slt_right,进入【动作/修改器】现在可以告诉你一个好消息，缩略图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.3.导航（雷达）图制作3.3.1.参照下图添加一个【绘制矩形】3.3.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图片的高并预
9、留上下部分的空白，本例中按钮图片为300*300；3.3.3.参照下图添加导航图，然后点击新增的图片，修改【ID】为dht_t013.3.4.参照下图添加导航点，然后点击新增的图片，修改【ID】为dtO1O1，需要特别注意的是交互热点替身ID，必须填写与之前设定的热点ID（详见2.3章节内容）保持一致，如PointO1O13.3.5.依次添加另两个导航点3.3.6.参照下图添加当前导航点图片3.3.7.参照下图添加雷达图片3.3.8.双击yellow_dot1，设置图片属性3.3.9.双击树中的dt0101，设置图片属性3.3.10.依次设置dt0102和dt01
10、03的图片属性dt0102dt0103现在又可以告诉你一个好消息，导航(雷达)图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.4.Google(百度)地图制作Google地图比较方便，因为PANO2VR里集成了谷歌地图，具体设置如下：1参照下图添加一个矩形2.在矩形mapbar中添加一个文本区3双击刚添加的文本区填写文字，注意脚本中的width和height需要与尺寸相符4.关闭皮肤编辑器，在HTML5输岀的HTML选项卡中勾选IneludeGoogleMaps选项Baidu地图比较方便，原因很简单，PANO2VR里没有集成了百度地图，具体设
11、置可参照Google地图，但第4节中则不需要勾选IncludeGoogleMaps选项，但在生成好的HTML文件中需要在Body的底部加入百度地图的脚本，如下：/创建和初始化地图函数：functionbaidu_initMap()baidu_createMap();/创建地图baidu_setMapEvent();/设置地图事件baidu_addMapControl();/向地图添加控件baidu_addMarker();/向地图中添加marker/创建地图函数：functionbaidu_createMap()varbaidu_map=
12、newBMap.Map(mapdiv);/在百度地图容器中创建一个地图varbaidu_point=newBMap.Point(114.337663,30.564641);/定义一个中心点坐标baidu_map.centerAndZoom(baidu_point,13);/设定地图的中心点和坐标并将地图显示在地图容器中window.map=baidu_map;将map变量存储在全局/地图事件设置函数：functionbaidu_setMapEvent()map.enableDragging();/启用地图拖拽事件，默认启用(可不写)map.enableSc
13、rollWheelZoom();/启用地图滚轮放大缩小map.enableDoubleClickZoom();/启用鼠标双击放大，默认启用(可不写)map.enableKeyboard();/启用键盘上下左右键移动地图/地图控件添加函数：functionbaidu_addMapControl()/向地图中添加缩放控件varctrl_nav=newBMap.NavigationControl(anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL);map.addControl(ctrl_nav);/向地
14、图中添加缩略图控件varctrl_ove=newBMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0);map.addControl(ctrl_ove);/向地图中添加比例尺控件varctrl_sca=newBMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT);map.addControl(ctrl_sca);/标注点数组varmarkerArrtitle:,content:,point:114.341256|30.564392,isOpen:0
15、,icon:w:21,h:21,l:0,t:0,x:6,lb:5;/创建markerfunctionbaidu_addMarker()for(vari=0;imarkerArr.length;i+)varjson=markerArri;varpoint=newBMap.Point(p0,p1);variconImg=baidu_createIcon(json.icon);varmarker=newBMap.Marker(point,icon:iconImg);variw=baidu_createInfoWindow(i);varlabel=new
16、BMap.Label(json.title,offset:newBMap.Sizemarker.setLabel(label);map.addOverlay(marker);label.setStyle(borderColor:#808080,color:#333,cursor:pointer);(function()varindex=i;var_iw=baidu_createInfoWindow(i);var_marker=marker;_marker.addEventListener(click,function()this.openInfoWindow(_
17、iw););_iw.addEventListener(open,function()_marker.getLabel().hide();)_iw.addEventListener(close,function()_marker.getLabel().show();)label.addEventListener(click,function()_marker.openInfoWindow(_iw);)if(!json.isOpen)label.hide();_marker.openInfoWindow(_iw);)()/创建InfoWindowfunctionbaidu_crea
18、teInfoWindow(i)varjson=markerArri;varbaidu_iw=newBMap.InfoWindow(+json.title++json.content+);returnbaidu_iw;/创建一个Iconfunctionbaidu_createIcon(json)BMap.Size(json.w,json.h),imageOffset:newBMap.Size(-json.l,-json.t),infoWindowOffset:newBMap.Size(json.lb+5,1),offset:newBMap.Size(json.x,json.h)returnbaidu_icon;baidu_initMap();/创建和初始化地图3.5.热区精图展示3.5.1.进入主界面，点击交互热点修改3.5.2.选择多边形的交互热点类型，在需要的区域双击开始，通过单击逐个描点，最后再通过双击结束，ID设置为jpg013.5.3.点击确定返回，再进入皮肤编辑器，参照地图拉一个矩形，但必须去除可见选项3.5.4.加入一个关闭的图片，