《pano2vr全景图课程》由会员分享,可在线阅读,更多相关《pano2vr全景图课程(40页珍藏版)》请在金锄头文库上搜索。
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. 设置FLASH 输出的视觉效果;
3、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】也是与皮肤中
4、的热点名称一致,这里暂且定义为hs1 ;2.4.完成三个全景的热点交互之后,右侧漫游浏览器中每个全景的感叹号就消失了!2.5.多个全景漫游的制作到此就 OK 了!点击【全部】看看效果吧!三、 脚本编辑在【主界面】-【输出】中点击【参数】按钮;参照下图,点击【编辑】按钮,进入皮肤脚本编辑界面;参照下图设置皮肤的大小后,就可以准备皮肤脚本的制作!3.1.工具栏制作3.1.1. 参照下图添加一个【绘制矩形】3.1.2. 双击已绘制的【矩形】 ,设置【尺寸】 、 【背景】和【边框】等参数注:尺寸 -高的数值按照按钮图片的高并预留上下部分的空白,本例中按钮图片为 40*40;3.1.3. 参照下图添加一
5、个图片作为按钮,然后点击新增的图片,修改【ID】为tool_left3.1.4. 依次加入所有的按钮图片并拖到相应的位置,并将【矩形】拖到皮肤的左下角(或你喜欢的位置) ,记住要设置【锚点】接下来就要对每个按钮设置功能,双击【tool_left】弹出【图片属性】 ,选择【动作/修改器】3.1.5. 参照下图设置动作,并依次右上下和放大、缩小(下文不再详细说明)第 7 个和第 8 个按钮如下3.1.6. 再添加两个【矩形】 ,分别是缩略图(sltbar)和导航图(dhtbar),并分别放至左上角和右上角注:为方便演示,皮肤大小调整为 640*380,全部完成后可以再进行调整;3.1.7. 参照下
6、图设置第 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 【容器】 ,
7、勾选【蒙版】3.2.5. 再添加一个【矩形】 , 【ID】为slt_center_items ,并设置【矩形属性】3.2.6. 在slt_center_items 【矩形】中依次加入缩略图【图片】3.2.7. 依次为每个缩略图设置交互热点替身,双击第一个缩略图,填写交互热点替身 ID为Point01013.2.8. 点击动作/修改器选项卡,设置动作,其中dt0101和yellow dot是导航图中的对象名称3.2.9. 第二、三个缩略图如下3.2.10. 在右侧的【树】中,将slt_center_items 【矩形】拖入slt_center 【容器】中3.2.11. 修改slt_center_
8、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. 参照下图添加导航图,然后点击新增的图片,修改【
9、ID】为dht_t013.3.4. 参照下图添加导航点,然后点击新增的图片,修改【ID】为dt0101 ,需要特别注意的是交互热点替身 ID,必须填写与之前设定的热点 ID(详见 2.3 章节内容)保持一致,如Point01013.3.5. 依次添加另两个导航点3.3.6. 参照下图添加当前导航点图片3.3.7. 参照下图添加雷达图片3.3.8. 双击yellow_dot1 ,设置图片属性3.3.9. 双击树中的dt0101 ,设置图片属性3.3.10. 依次设置dt0102和dt0103的图片属性dt0102dt0103现在又可以告诉你一个好消息,导航(雷达)图的皮肤已经完成了,保存脚本-生
10、成输出看看效果吧!3.4.Google(百度)地图制作Google 地图比较方便,因为 PANO2VR 里集成了谷歌地图,具体设置如下:1 参照下图添加一个矩形2 在矩形mapbar中添加一个文本区3 双击刚添加的文本区填写文字,注意脚本中的 width 和 height 需要与尺寸相符4 关闭皮肤编辑器,在HTML5 输出的HTML选项卡中勾选Include Google Maps选项Baidu 地图比较方便,原因很简单,PANO2VR 里没有集成了百度地图,具体设置可参照 Google 地图,但第 4 节中则不需要勾选Include Google Maps选项,但在生成好的 HTML 文件
11、中需要在 Body 的底部加入百度地图的脚本,如下:/创建和初始化地图函数: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.337
12、663,30.564641);/定义一个中心点坐标baidu_map.centerAndZoom(baidu_point,13);/设定地图的中心点和坐标并将地图显示在地图容器中window.map = baidu_map;/将 map 变量存储在全局 /地图事件设置函数:function baidu_setMapEvent()map.enableDragging();/启用地图拖拽事件,默认启用(可不写)map.enableScrollWheelZoom();/启用地图滚轮放大缩小map.enableDoubleClickZoom();/启用鼠标双击放大,默认启用(可不写)map.enabl
13、eKeyboard();/启用键盘上下左右键移动地图/地图控件添加函数: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,isOpe
14、n:0);map.addControl(ctrl_ove);/向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT);map.addControl(ctrl_sca);/标注点数组var markerArr = title:,content:,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 + json.t
15、itle + +json.content+);return baidu_iw;/创建一个 Iconfunction baidu_createIcon(json)var baidu_icon = new BMap.Icon(http:/ new BMap.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();/创建和初始化地图3.5.热区精图展示3.5.1. 进入主界面,点击交互热点修改3.5.2. 选择多边形的交互热点类型 ,在需要的区域双击开始,通过单击逐个描点,最后再通过双击结束,ID 设置为jp