pano2vr全景图课程

pano2vr 全景漫游制作一、单个全景制作1.1.运行【pano2vr】，进入主界面；1.2.点击【选择输入】，选择全景图片；1.3.【输入】-【类型】默认为【自动】，点击全景图【打开】，选定图片后，点【确定】返回主界面；1.4.【打补丁】可将LOGO放入全景；1.5.可加入多个补丁，点击【增加】添加一个补丁，按下图进行设置；1.6.【显示参数】可调整全景得水平与垂直角度以及正北方向；1.7.【显示参数/限制】用于指定全景初始得视角，【平摇】为水平方位，【俯仰】为垂直方位，【FoV】为可视角度，【正北】可调整全景得方位；1.8.【用户数据】用于填写作品相关得信息与全景得经纬坐标；1.9.点击【纬度】后得坐标按钮，设置全景得经纬度信息；通过【设定正北标记】与【选择地标】可方便得设置正北方位；1.10.【交互热点】可在全景实现人机交互得功能；1.11.在图片中得任何位置双击加入一个点型热区；1.12.向左移动至大门，再添加一个多边型热区；1.13.[媒体]中可加入背景音乐、图片与视频等；1.14.点击右侧得[打开]文件名，可选择背景音乐；1.15.在左侧图片得相应位置双击，可添加图片与视频；1.16.在电视位置双击，可添加视频；1.17.在主界面得[输出]中选择输出格式后，点击[增加]；1.18.选择系统自带得皮肤；1.19.设置[FLASH输出]得视觉效果；1.20.设置[FLASH输出]得视觉效果；1.21.点击[确定]生成SWF格式文件，即完成；1.22.在主界面得[输出]中选择输出格式[HTML5]后，点击[增加]1.23.点击[确定]生成HTML5格式文件，即完成；二、多个全景漫游制作2.1.完成单个全景得基础上，在主界面右侧得【漫游浏览器】中，鼠标右键选【Add Panorama】添加新得全景；2.2.参照【一】得步骤依次加入全景2与3；2.3.接下来需要对所有全景设置交互热点，依次选择全景，设置【交互热点】-【修改】注：1、填写【ID】时，需要与【URL】中得编号一致，便于后期导航图与缩略图得皮肤制作；2、【皮肤ID】也就是与皮肤中得热点名称一致，这里暂且定义为’hs1’；2.4.完成三个全景得热点交互之后，右侧漫游浏览器中每个全景得‘感叹号’就消失了！2.5.多个全景漫游得制作到此就OK了！点击【全部】瞧瞧效果吧！三、脚本编辑在【主界面】-【输出】中点击【参数】按钮；参照下图，点击【编辑】按钮，进入皮肤脚本编辑界面；参照下图设置皮肤得大小后，就可以准备皮肤脚本得制作！3.1.工具栏制作3.1.1.参照下图添加一个【绘制矩形】3.1.2.双击已绘制得【矩形】，设置【尺寸】、【背景】与【边框】等参数注：尺寸-高得数值按照按钮图片得高并预留上下部分得空白，本例中按钮图片为40*40；3.1.3.参照下图添加一个图片作为按钮，然后点击新增得图片，修改【ID】为‘tool_left’3.1.4.依次加入所有得按钮图片并拖到相应得位置，并将【矩形】拖到皮肤得左下角（或您喜欢得位置），记住要设置【锚点】接下来就要对每个按钮设置功能，双击【tool_left】弹出【图片属性】，选择【动作/修改器】3.1.5.参照下图设置动作，并依次右上下与放大、缩小（下文不再详细说明）第7个与第8个按钮如下3.1.6.再添加两个【矩形】，分别就是缩略图（sltbar）与导航图(dhtbar)，并分别放至左上角与右上角注：为方便演示，皮肤大小调整为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.在中部加入【容器】，修改【ID】并设置大小与位置3.2.4.双击‘slt_center’【容器】，勾选【蒙版】3.2.5.再添加一个【矩形】，【ID】为‘slt_center_items’，并设置【矩形属性】3.2.6.在‘slt_center_items’【矩形】中依次加入缩略图【图片】3.2.7.依次为每个缩略图设置[交互热点替身],双击第一个缩略图，填写[交互热点替身ID]为‘Point0101’3.2.8.点击[动作/修改器]选项卡，设置[动作]，其中‘dt0101’与‘yellow dot’就是导航图中得对象名称3.2.9.第二、三个缩略图如下3.2.10.在右侧得【树】中，将‘slt_center_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.双击已绘制得【矩形】，设置【尺寸】、【背景】与【边框】等参数注：尺寸-高得数值按照按钮图片得高并预留上下部分得空白，本例中按钮图片为300*300；3.3.3.参照下图添加导航图，然后点击新增得图片，修改【ID】为‘dht_t01’3.3.4.参照下图添加导航点，然后点击新增得图片，修改【ID】为‘dt0101’，需要特别注意得就是[交互热点替身ID]，必须填写与之前设定得热点ID（详见2、3章节内容）保持一致，如‘Point0101’3.3.5.依次添加另两个导航点3.3.6.参照下图添加当前导航点图片3.3.7.参照下图添加雷达图片3.3.8.双击‘yellow_dot1’，设置[图片属性]3.3.9.双击[树]中得‘dt0101’，设置[图片属性]3.3.10.依次设置‘dt0102’与‘dt0103’得[图片属性] dt0102dt0103现在又可以告诉您一个好消息，导航（雷达）图得皮肤已经完成了，保存脚本-生成输出瞧瞧效果吧！3.4.G oogle（百度）地图制作Google地图比较方便，因为PANO2VR里集成了谷歌地图，具体设置如下：1．参照下图添加一个矩形2．在矩形‘mapbar’中添加一个[文本区]3．双击刚添加得[文本区]填写[文字]，注意脚本中得width与height需要与尺寸相符4．关闭[皮肤编辑器]，在[HTML5输出]得[HTML]选项卡中勾选‘Include Google Maps’选项Baidu地图比较方便，原因很简单，PANO2VR里没有集成了百度地图，具体设置可参照Google地图，但第4节中则不需要勾选‘Include Google Maps’选项，但在生成好得HTML文件中需要在Body得底部加入百度地图得脚本，如下：<script type="text/javascript" src=""></script><script type="text/javascript">//创建与初始化地图函数：function baidu_initMap(){baidu_createMap();//创建地图baidu_setMapEvent();//设置地图事件baidu_addMapControl();//向地图添加控件baidu_addMarker();//向地图中添加marker}//创建地图函数：function baidu_createMap(){var baidu_map = new BMap、Map("mapdiv");//在百度地图容器中创建一个地图var baidu_point = new BMap、Point(114、337663,30、564641);//定义一个中心点坐标baidu_map、centerAndZoom(baidu_point,13);//设定地图得中心点与坐标并将地图显示在地图容器中window、map = baidu_map;//将map变量存储在全局}//地图事件设置函数：function baidu_setMapEvent(){map、enableDragging();//启用地图拖拽事件，默认启用(可不写)map、enableScrollWheelZoom();//启用地图滚轮放大缩小map、enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map、enableKeyboard();//启用键盘上下左右键移动地图}//地图控件添加函数：function baidu_addMapControl(){//向地图中添加缩放控件var ctrl_nav = new BMap、NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL});map、addControl(ctrl_nav);//向地图中添加缩略图控件var ctrl_ove = new BMap、OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});map、addControl(ctrl_ove);//向地图中添加比例尺控件var ctrl_sca = new BMap、ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map、addControl(ctrl_sca);}//标注点数组var markerArr = [{title:"&#20840;&#26223;&#28459;&#28216;",content:"&#20840;&#26223;&#28459;&#28216;",point :"114、341256|30、564392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];//创建markerfunction baidu_addMarker(){for(var i=0;i<markerArr、length;i++){var json = markerArr[i];var p0 = json、point、split("|")[0];var p1 = json、point、split("|")[1];var point = new BMap、Point(p0,p1);var iconImg = baidu_createIcon(json、icon);var marker = new BMap、Marker(point,{icon:iconImg});var iw = baidu_createInfoWindow(i);var label = new BMap、Label(json、title,{"offset":new BMap、Size(json、icon、lb-json、icon、x+10,-20)});marker、setLabel(label);map、addOverlay(marker);label、setStyle({borderColor:"#808080",color:"#333",cursor:"pointer"});(function(){var index = i;var _iw = baidu_createInfoWindow(i);var _marker = marker;_marker、addEventListener("click",function(){this、openInfoWindow(_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);}})()}}//创建InfoWindowfunction baidu_createInfoWindow(i){var json = markerArr[i];var baidu_iw = new BMap、InfoWindow("<b class='iw_poi_title' title='" + json、title + "'>" +json、title + "</b><div class='iw_poi_content'>"+json、content+"</div>");return baidu_iw;}//创建一个Iconfunction baidu_createIcon(json){var baidu_icon = new BMap、Icon("", newBMap、Size(json、w,json、h),{imageOffset: new BMap、Size(-json、l,-json、t),infoWindowOffset:new BMap、Size(json、lb+5,1),offset:new BMap、Size(json、x,json、h)})return baidu_icon;}baidu_initMap();//创建与初始化地图</script>3.5.热区精图展示3.5.1.进入主界面，点击‘交互热点’[修改]3.5.2.选择多边形得‘交互热点类型’，在需要得区域双击开始，通过单击逐个描点，最后再通过双击结束，ID设置为‘jpg01’3.5.3.点击[确定]返回，再进入[皮肤编辑器]，参照地图拉一个矩形，但必须去除[可见]选项3.5.4.加入一个[关闭]得图片，ID为‘jpgclose’3.5.5.加入需要放大得图片,ID为‘jpgbar01’3.5.6.双击‘jpgbar01’图片，设置[交互热点替身ID]为‘jpg01’3.5.7.设置[动作/修改器]3.5.8.双击‘jpgclose’图片，设置[动作/修改器]接下来得工作就就是不停得点击[确定]按钮，生成一个瞧瞧效果咯！3.6.热区360物件展示可通过OBJECT2VR生成HTML5格式，再通过交互热点得方法进行链接咯！。