pano2vr全景图课程.docx
《pano2vr全景图课程.docx》由会员分享,可在线阅读,更多相关《pano2vr全景图课程.docx(9页珍藏版)》请在冰豆网上搜索。
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.达成单个全景的基础上,在主界面右边的【遨游阅读器】中,鼠标右键选【
全景;
AddPanorama】增添新的
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’和‘yellowdot’是导航图中的对象
名称
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(详见章节内容)保持一致,如‘Point0101’
[交互
3.3.5.挨次增添另两个导航点
3.3.6.参照下列图增添目前导航点图片
3.3.7.参照下列图增添雷达图片
3.3.8.双击‘yellow_dot1’,设置[图片属性]
3.3.9.双击[树]中的‘dt0101’,设置[图片属性]
3.3.10.挨次设置‘dt0102’和‘dt0103’的[图片属性]dt0102
dt0103
此刻又能够告诉你一个好信息,导航(雷达)图的皮肤已经达成了,保留脚本-生成输出看看成效吧!
3.4.Google(XX)地图制作
Google地图比较方便,由于PANO2VR里集成了谷歌地图,详细设置以下:
1.参照下列图增添一个矩形
2.在矩形‘mapbar’中增添一个[文本区]
3.双击刚增添的[文本区]填写[文字],注意脚本中的width和height需要与尺寸符合
4.封闭[皮肤编写器],在[HTML5输出]的[HTML]选项卡中勾选‘IncludeGoogleMaps’选项
XX地图比较方便,原由很简单,PANO2VR里没有集成了XX地图,详细设置可参照
4节中则不需要勾选‘IncludeGoogleMaps’选项,但在生成好的HTML文件中需要在
Google地图,但第
Body的底部加入百
度地图的脚本,以下:
ide();
})
("close",function(){
().show();
})
("click",function(){
(_iw);
})
if(!
!
{
();
(_iw);
}
})()
}
}
//创立InfoWindow
functionXX_createInfoWindow(i){
varjson=markerArr[i];
varXX_iw=new(""+
+""++"