krpano的投影模式实际上就是改变view元素的各种属性和设置,从而达到小行星、鱼眼、建筑等各种视觉效果。
krpano的默认皮肤的右键菜单中提供了各个投影模式的切换(vtourskin.xml)。
代码
如果是自定义皮肤,可以参考下面的代码,首先是各个投影模式的action。
其中最后一个是默认皮肤没有的模式。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<action name="skin_view_look_straight"> if(view.vlookat LT -80 OR view.vlookat GT +80, tween(view.vlookat, 0.0, 1.0, easeInOutSine); tween(view.fov, 100, distance(150,0.8)); trace(3); ); </action> <action name="skin_view_normal"> skin_view_look_straight(); set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortion, 0.0, distance(1.0,0.5)); </action> <action name="skin_view_fisheye"> skin_view_look_straight(); set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortion, 0.35, distance(1.0,0.5)); </action> <action name="skin_view_architectural"> skin_view_look_straight(); set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 1.0, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortion, 0.0, distance(1.0,0.5)); </action> <action name="skin_view_stereographic"> skin_view_look_straight(); set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortion, 1.0, distance(1.0,0.8)); </action> <action name="skin_view_pannini"> skin_view_look_straight(); set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.pannini, 1.0, distance(1.0,0.8)); if(view.distortion LT 0.1, tween(view.distortion, 1.0, distance(1.0,0.8)); ); </action> <action name="skin_view_littleplanet"> set(view.stereographic, true); set(view.fovmax, get(xml.view.fovmax)); tween(view.distortionfovlink, 0.5, distance(1.0,0.5)); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortion, 1.0, distance(1.0,0.8)); tween(view.fov, 150, distance(150,0.8)); tween(view.vlookat, 90, distance(100,0.8)); add(new_hlookat, view.hlookat, 123.0); tween(view.hlookat, get(new_hlookat), distance(100,0.8)); </action> <action name="skin_view_ball"> set(view.stereographic, false); set(view.fovmax, 180); tween(view.architectural, 0.0, distance(1.0,0.5)); tween(view.fisheye, 1.5, distance(1.0,0.5)); tween(view.pannini, 0.0, distance(1.0,0.5)); tween(view.distortionfovlink, 1.0, distance(1.0,0.5)); tween(view.distortion, 1.5, distance(1.0,0.8)); tween(view.fov, 180, distance(150,0.8)); tween(view.vlookat, 0, distance(100,0.8)); </action> |
可设置 view.distortion 为大于1的数值,这样水晶球会变得更小。如
1 |
tween(view.distortion, 2.0, distance(1.0,0.8)); |
下面是对应的右键菜单代码。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 |
<contextmenu> <item name="nv" caption="正常视角" onclick="skin_view_normal();" showif="view.vlookatrange == 180" separator="true" /> <item name="fv" caption="鱼眼视角" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" /> <item name="sv" caption="球极平面视角" onclick="skin_view_stereographic();" showif="view.vlookatrange == 180" devices="flash|webgl" /> <item name="av" caption="建筑视角" onclick="skin_view_architectural();" showif="view.vlookatrange == 180" /> <item name="pv" caption="帕尼尼视角" onclick="skin_view_pannini();" showif="view.vlookatrange == 180" devices="flash|webgl" /> <item name="lp" caption="小行星视角" onclick="skin_view_littleplanet();" showif="view.vlookatrange == 180" devices="flash|webgl" /> <item name="ba" caption="球体视角" onclick="skin_view_ball();" showif="view.vlookatrange == 180" devices="flash|webgl" /> </contextmenu> |
- Normal Projection(正常投影)
- 正常/标准3D投影,也叫做直线投影或心射投影
- 视场小于100度时接近人眼的视觉
- 如果视场比较宽,在边缘拉伸扭曲会很严重
- view.fisheye设为0才能获得该投影。
- Fisheye Projection(鱼眼投影)
- 鱼眼视场之下可以避免正常视场在宽视角下的问题
- 边缘扭曲情况会表现好很多,但所有“直线”在鱼眼投影下都不会从全景中部穿过
- krpano可以控制鱼眼和正常视场之间的鱼眼投影程度
- view.fisheye为0时为非鱼眼投影,1时为完全鱼眼投影,0.35为默认值
- view.fisheyefovlink为第二个控制鱼眼的参数,这个参数控制fov与fisheye的关系,0时则不会根据视场的变化来改变fisheye,如果你使用较大的值,这样在大视角时就会应用到fisheye,默认为0.5
- Stereographic Fisheye Projection(球极平面鱼眼投影)
- 更加极致的鱼眼投影,更大的视场
- 可以实现小行星投影
- 将view.stereographic设置为true,将fisheye设置为1,可实现小行星,也就是最极端的情况
- 只有normal或者stereographic两种鱼眼类型
- 也可以通过fisheye和fisheyefovlink来控制投影强度
- Architectural Projection(建筑投影)
- 取代 视角的上下旋转,而是发生视角的偏移。
- 这种漫游近乎直上直下
- 在直上直下漫游时垂直线始终竖直
- 当然是不可能完全的直上直下进行浏览
- 通过view.architectural来控制,同样是0和1之间进行设定,设定为1时实现该投影效果
- 也可以通过architecturalonlymiddle使得该投影只出现在全景中央。
风景类型的不同视场比较(点击图片可看krpano全景效果)
人像的比较(点击图片可看krpano全景效果)
正常视角
0.45的fisheye(点击图片可看krpano全景效果)
完全鱼眼(点击图片可看krpano全景效果)
球极平面鱼眼(点击图片可看krpano全景效果)
建筑投影的比较(点击图片可看krpano全景效果)
向上看
向下看
正交投影模式
1 |
<view oz="10000" fov="15" /> |