panovr全景图制作教程

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.1
2. 向左移动至大门，再添加一个多边型热区；
1.13. [媒体]中可加入背景音乐、图片和视频等；
1.14. 点击右侧的[打开]文件名，可选择背景音乐；
1.15. 在左侧图片的相应位置双击，可添加图片和视频；
1.16. 在电视位置双击，可添加视频；
1.17. 在主界面的[ 输出] 中选择输出格式后，点击[增加] ；
1.18. 选择系统自带的皮肤；
1.19. 设置[FLASH 输出] 的视觉效果；
1.20. 设置[FLASH 输出] 的视觉效果；
1.21. 点击[确定] 生成SWF 格式文件，即完成；
1.2
2. 在主界面的[输出]中选择输出格式[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.13 参照下图添加一个图片作为按钮，然后点击新增的图片，修改【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】为‘ dtO1O1 '，需要特别注意的是［交互热
点替身ID］，必须填写与之前设定的热点ID （详见2.3章节内容）保持一致，如’PointO1O1 '
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 (百度)地图制作
Google 地图比较方便，因为PANO2VR 里集成了谷歌地图，具体设置如下：
1．参照下图添加一个矩形
2.在矩形’mapbar'中添加一个［文本区］
3．双击刚添加的［文本区］填写［文字］，注意脚本中的width 和height 需要与尺寸相符
4.关闭［皮肤编辑器］，在［HTML5输岀］的［HTML］选项卡中勾选’In elude Google Maps '选项
Baidu 地图比较方便，原因很简单，PANO2VR 里没有集成了百度地图，具体设置可参照Google 地图，但第4 节中则不需要勾选‘ Include Google Maps '选项，但在生成好的HTML 文件中需要在Body 的底部加入百度地图的脚本，如下：
<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.34125
6|30.564392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];
// 创建marker
function baidu_addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
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 bel(json.title,{"offset":new BMap.Size 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);
}
})()
}
}
// 创建InfoWindow
function baidu_createInfoWindow(i){
var json = markerArr[i];
var baidu_iw = new Window("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return baidu_iw;
}
// 创建一个Icon
function baidu_createIcon(json){
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();// 创建和初始化地图
</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 格式，再通过交互热点的方法进行链接咯！
四、全景图片的制作
4.1 、我们需要先制作360 全景图片。

（1）首先是打相机，不管是用标准相机还是物理相机都可以，参数平时怎么设置，这时还怎么设置就可以，需要注意的是，相机就如下图所示，需要放置在一个“空地”，一定要确保机身（就只是下图的白色部分）旋转360 度不会碰到任何物体，相机高度建议在1000mm 左右。

（2）其次是渲染参数的设置。

渲染尺寸如下图，图像纵横比一定要是2，宽度和高度建议最小设置为4000*2000
然后就是相机参数面板的设置，类型这里要选择“球形”，勾选“覆盖视野”，视野参数设置为360
好了，其它参数都按照正常的出图参数设置就可以，3ds Max 的相机布置和参数设置就到这里，现在就可以直接渲染360 全景图片了。

如下图就是得到的全景图需要注意的是，360 全景图片渲染出后，也可以像其它效果图一样进行PS 的后期处理，以让效果图达到最佳效果。