更新于 2024.4.19 krpano 1.21.2
本案例实现了使用鼠标或触摸拖动滑条来任意融合两个相似场景。同一场景不同季节的景色，如昼夜、开灯关灯等都可以使用该效果。建议使用1.21版本。
1.21方法
1.21版本中，layer的类型包含了krpano，也就是可以将krpano场景作为layer的内容加载，这样的话，可以实现包括两个场景按照指定透明度重叠、上下屏、左右屏等各种方式实现场景比较，同时实现视角的同步。
1.21方法的好处就是对全景图的类型没有任何限制，可以是多分辨率，甚至是全景视频。
在上面的官方案例中还提供了一个滑动条。
|
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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 |
<krpano> <!-- Compare Panos Example - use krpano-layers for the pano-display and sync their view - any two kind of pano images can be used, multires, different resolutions - provide side-by-side / top-bottom / splitscreen / overlap-blending modes - a slider-control for the splitscreen - a blending-control for the overlap-mode --> <!-- the two pano images to compare --> <scene name="pano1"> <image> <preview url="pano1_preview.jpg" /> <cube url="pano1_%s.jpg" if="browser.domain != 'krpano.com'" /> <cube url="https://krpano.com/panos/splitscreen/before.tiles/pano_%s.jpg" if="browser.domain == 'krpano.com'" /> </image> </scene> <scene name="pano2"> <image> <preview url="pano2_preview.jpg" /> <cube url="pano2_%s.jpg" if="browser.domain != 'krpano.com'" /> <cube url="https://krpano.com/panos/splitscreen/after.tiles/pano_%s.jpg" if="browser.domain == 'krpano.com'" /> </image> </scene> <!-- the startup view --> <view hlookat="156" fovtype="dfov" fov="120" /> <layer name="krpano1container" type="container" safearea="false" x="0%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0"> <layer name="krpano1" type="krpano" align="left" width="200%" height="100%" onloaded="krpano.actions.loadxml(('<krpano>' + scene[0].content + '</krpano>'),null,IMAGEONLY);" /> </layer> <layer name="krpano2container" type="container" safearea="false" x="50%" width="50%" height="100%" maskchildren="true" enabled="false" zorder="0"> <layer name="krpano2" type="krpano" align="right" width="200%" height="100%" onloaded="krpano.actions.loadxml(('<krpano>' + scene[1].content + '</krpano>'),null,IMAGEONLY);" /> </layer> <events onresize="resize_viewers();" onviewchange="sync_viewers();" /> <action name="resize_viewers" scope="local"> w = stagewidth; h = stageheight; if(display.safearea_inset, // iPhone 'notch' fullscreen mode support w = display.safearea_inset.sw; h = display.safearea_inset.sh; ); layer[krpano1].width = w; layer[krpano1].height = h; layer[krpano2].width = w; layer[krpano2].height = h; </action> <action name="sync_viewers" type="js"> var viewFrom = krpano.view; var viewTo1 = krpano.layer.getItem("krpano1").krpano.view; var viewTo2 = krpano.layer.getItem("krpano2").krpano.view; viewTo1.hlookat = viewTo2.hlookat = viewFrom.hlookat; viewTo1.vlookat = viewTo2.vlookat = viewFrom.vlookat; viewTo1.camroll = viewTo2.camroll = viewFrom.camroll; viewTo1.fovtype = viewTo2.fovtype = viewFrom.fovtype; viewTo1.fov = viewTo2.fov = viewFrom.fov; viewTo1.fisheye = viewTo2.fisheye = viewFrom.fisheye; viewTo1.architectural = viewTo2.architectural = viewFrom.architectural; viewTo1.pannini = viewTo2.pannini = viewFrom.pannini; viewTo1.tx = viewTo2.tx = viewFrom.tx; viewTo1.ty = viewTo2.ty = viewFrom.ty; viewTo1.tz = viewTo2.tz = viewFrom.tz; viewTo1.ox = viewTo2.ox = viewFrom.ox; viewTo1.oy = viewTo2.oy = viewFrom.oy; viewTo1.oz = viewTo2.oz = viewFrom.oz; viewTo1.rx = viewTo2.rx = viewFrom.rx; viewTo1.ry = viewTo2.ry = viewFrom.ry; </action> <style name="button" type="text" zorder="2" css="text-align:center;" padding="4 8" bgborder="4 0xFFFFFF 1" bgroundedge="1" bgshadow="0 1 4 0x000000 1.0" onover="set(bgcolor, 0xC7E4FC);" onout="calc(bgcolor, pressed ? 0x90CAF9 : 0xFFFFFF);" ondown="set(bgcolor, 0x90CAF9);" onup="calc(bgcolor, hovering ? 0xC7E4FC : 0xFFFFFF);" /> <style name="button_selected" css="text-align:center; text-decoration:underline;" /> <layer name="info" type="text" html="Select Mode:" bg="false" align="bottom" y="130" css="color:#FFFFFF;" txtshadow="0 1 2 0x000000 1.0" enabled="false" zorder="2" /> <layer name="button_side_by_side" style="button" align="bottom" x="-60" y="60" width="100" html="Side-by-Side" onclick="side_by_side(tween);" /> <layer name="button_top_bottom" style="button" align="bottom" x="+60" y="60" width="100" html="Top-Bottom" onclick="top_bottom(tween);" /> <layer name="button_split_screen" style="button|button_selected" align="bottom" x="0" y="20" width="100" html="Split-Screen" onclick="split_screen(tween,0.5);" /> <layer name="button_left_only" style="button" align="bottom" x="-120" y="20" width="100" html="Left only" onclick="left_only(tween);" /> <layer name="button_right_only" style="button" align="bottom" x="+120" y="20" width="100" html="Right only" onclick="right_only(tween);" /> <layer name="button_overlap_blending" style="button" align="bottom" x="0" y="100" width="100" html="Overlapped" onclick="overlap_blending(tween);" /> <action name="set_active_button" scope="local" args="activebutton"> layer[button_overlap_blending].loadstyle(button); layer[button_side_by_side].loadstyle(button); layer[button_top_bottom].loadstyle(button); layer[button_left_only].loadstyle(button); layer[button_split_screen].loadstyle(button); layer[button_right_only].loadstyle(button); layer[get(activebutton)].loadstyle(button|button_selected); </action> <!-- Actions for changing the modes - the first argument (%1) can be either 'set' for instant changes or 'tween' for animated changes. --> <action name="side_by_side"> set_active_button('button_side_by_side'); %1(layer[blend_slider].alpha, 0.0); %1(layer[split_slider].alpha, 0.0); %1(layer[split_slider].x, 50%); %1(layer[krpano1container].alpha, 1.0); %1(layer[krpano1container].x, 0%); %1(layer[krpano1container].y, 0%); %1(layer[krpano1container].width, 50%); %1(layer[krpano1container].height, 100%); %1(layer[krpano1].x, -50%); %1(layer[krpano2container].alpha, 1.0); %1(layer[krpano2container].x, 50%); %1(layer[krpano2container].y, 0%); %1(layer[krpano2container].width, 50%); %1(layer[krpano2container].height, 100%); %1(layer[krpano2].x, -50%); </action> <action name="top_bottom"> set_active_button('button_top_bottom'); %1(layer[blend_slider].alpha, 0.0); %1(layer[split_slider].alpha, 0,0); %1(layer[split_slider].x, 50%); %1(layer[krpano1container].alpha, 1.0); %1(layer[krpano1container].x, 0%); %1(layer[krpano1container].y, 0%); %1(layer[krpano1container].width, 100%); %1(layer[krpano1container].height, 50%); %1(layer[krpano1].x, 0%); %1(layer[krpano2container].alpha, 1.0); %1(layer[krpano2container].x, 0%); %1(layer[krpano2container].y, 50%); %1(layer[krpano2container].width, 100%); %1(layer[krpano2container].height, 50%); %1(layer[krpano2].x, 0%); </action> <action name="set_split_screen" scope="local" args="mode, split"> %1(layer[krpano1container].alpha, 1.0); %1(layer[krpano1container].x, 0%); %1(layer[krpano1container].y, 0%); %1(layer[krpano1container].width, ((1-split) * 100 + '%')); %1(layer[krpano1container].height, 100%); %1(layer[krpano1].x, 0%); %1(layer[krpano2container].alpha, 1.0); %1(layer[krpano2container].x, ((1-split) * 100 + '%')); %1(layer[krpano2container].y, 0%); %1(layer[krpano2container].width, ((split * 100 + '%'))); %1(layer[krpano2container].height, 100%); %1(layer[krpano2].x, 0%); </action> <action name="split_screen"> set_active_button('button_split_screen'); %1(layer[blend_slider].alpha, 0.0); %1(layer[split_slider].alpha, 1.0); %1(layer[split_slider].x, 50%); set_split_screen(%1, 0.5); </action> <action name="left_only"> set_active_button('button_left_only'); %1(layer[blend_slider].alpha, 0.0); %1(layer[split_slider].alpha, 0.0); %1(layer[split_slider].x, 100%); set_split_screen(%1, 0.0); </action> <action name="right_only"> set_active_button('button_right_only'); %1(layer[blend_slider].alpha, 0.0); %1(layer[split_slider].alpha, 0.0); %1(layer[split_slider].x, 0%); set_split_screen(%1, 1.0); </action> <action name="overlap_blending"> set_active_button('button_overlap_blending'); %1(layer[blend_slider].alpha, 1.0); %1(layer[blend_grip].x, 50%); set(layer[blend_grip].text, '50:50'); %1(layer[split_slider].alpha, 0.0); %1(layer[split_slider].x, 50%); %1(layer[krpano1container].alpha, 1.0); %1(layer[krpano1container].x, 0%); %1(layer[krpano1container].y, 0%); %1(layer[krpano1container].width, 100%); %1(layer[krpano1container].height, 100%); %1(layer[krpano1].x, 0%); %1(layer[krpano2container].alpha, 0.5); %1(layer[krpano2container].x, 0%); %1(layer[krpano2container].y, 0%); %1(layer[krpano2container].width, 100%); %1(layer[krpano2container].height, 100%); %1(layer[krpano2].x, 0%); </action> <layer name="split_slider" type="container" safearea="false" zorder="1" x="50%" edge="top" width="20" height="100%" bgcapture="true" cursor="ew-resize" enablechildren="false" autoalpha="true" ondown="asyncloop(pressed, x=(mouse.x/stagewidth * 100) + '%'; set_split_screen(set, (1-mouse.x/stagewidth),true) );" > <layer type="container" align="top" width="3" height="100%" bgcolor="0xFFFFFF" bgshadow="0 0 16 0x000000 1.0" bgalpha="1" /> </layer> <layer name="blend_slider" type="container" zorder="1" autoalpha="true" alpha="0" align="bottom" y="200" width="200" height="16" bgalpha="0.5" bgcolor="0xFFFFFF" bgborder="1 0xFFFFFF 0.2" bgroundedge="9" bgblur="5" > <layer name="blend_grip" align="left" edge="center" style="button" width="48" height="28" bgroundedge="20" padding="0" textalign="center" text="50%" x="50%" ondown.addevent="asyncloop(pressed, pos = (mouse.stagex - parentobject.stagex) / parentobject.pixelwidth; clamp(pos,0,1); x = 100*pos + '%'; text = (100-floor(100*pos)) + ':' + floor(100*pos); layer[krpano2container].alpha = pos; );" /> </layer> <!-- Here a special and optional hack: - The example is created with WebGL disabled (by webgl=false in the html). - That's because the panos are in sub-layers (with WebGL) and so no WebGL-layer in the main viewer is required. - This safes a few computer resources (but is normally not noticeable). - And to have still the context-menu items for the distorted views, which are only available with WebGL, here temporary the device.webgl setting is enabled and then restored again. --> <set var="backup_device_webgl" val="device.webgl" /> <set var="device.webgl" val="true" /> <include url="%VIEWER%/plugins/contextmenu.xml" /> <set var="device.webgl" val="backup_device_webgl" /> <!-- select the startup mode --> <action autorun="onstart"> //side_by_side(set); //top_bottom(set); split_screen(set,0.5); //overlap_blending(set); </action> </krpano> |
先来看行13-27，这是两个scene，分别放两个全景图，这里对image标签里的内容没有任何限制。
行31是view标签，是设置初始视角。
行34-44是两个用于呈现krpano场景的layer，也就是将刚才两个scene分别放进两个layer里。如果你有多个场景需要对比，注意layer中onloaded部分。
|
1 |
onloaded="krpano.actions.loadxml(('<krpano>' + scene[0].content + '</krpano>'),null,IMAGEONLY);" |
其中scene[0]的数字0代表了主xml中加载的第一个scene标签，数字1代表加载的第二个scene标签，以此类推，当然也可以直接在方括号里写scene的name。
行47-88是设置两个全景图视角同步的，不需要更改，全盘复制。
官方案例中提供了多个比较方式，可根据自己的需要保留对应的按钮。
|
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 |
<layer name="info" type="text" html="Select Mode:" bg="false" align="bottom" y="130" css="color:#FFFFFF;" txtshadow="0 1 2 0x000000 1.0" enabled="false" zorder="2" /> <layer name="button_side_by_side" style="button" align="bottom" x="-60" y="60" width="100" html="Side-by-Side" onclick="side_by_side(tween);" /> <layer name="button_top_bottom" style="button" align="bottom" x="+60" y="60" width="100" html="Top-Bottom" onclick="top_bottom(tween);" /> <layer name="button_split_screen" style="button|button_selected" align="bottom" x="0" y="20" width="100" html="Split-Screen" onclick="split_screen(tween,0.5);" /> <layer name="button_left_only" style="button" align="bottom" x="-120" y="20" width="100" html="Left only" onclick="left_only(tween);" /> <layer name="button_right_only" style="button" align="bottom" x="+120" y="20" width="100" html="Right only" onclick="right_only(tween);" /> <layer name="button_overlap_blending" style="button" align="bottom" x="0" y="100" width="100" html="Overlapped" onclick="overlap_blending(tween);" /> |
例如我只保留重叠滑动，则只需要保留上面代码中的最后一个layer（删掉前面六个layer的代码）。
|
1 2 3 4 |
<layer name="button_overlap_blending" style="button" align="bottom" x="0" y="100" width="100" html="Overlapped" onclick="overlap_blending(tween);" /> |
然后把行321的action改成：
|
1 2 3 |
<action autorun="onstart"> overlap_blending(set); </action> |
动作overlap_blending中的参数set代表切换是立即的，如果写的是tween则表示有一个过渡效果。
其它动作left_only、right_only、top_bottom、side_by_side同理。
这样启动全景后就会变成这样子：
其余代码中的action、style部分全盘复制即可。
特别说一下两个场景重叠的代码。
点击按钮Overlapped，也就是触发了动作
|
1 |
onclick="overlap_blending(tween);" |
可以看到两个全景图以50%的透明度重叠在一起。
然后下面是实现滑动重叠的。关键代码
|
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 |
<action name="overlap_blending"> set_active_button('button_overlap_blending'); %1(layer[blend_slider].alpha, 1.0); %1(layer[blend_grip].x, 50%); set(layer[blend_grip].text, '50:50'); %1(layer[split_slider].alpha, 0.0); %1(layer[split_slider].x, 50%); %1(layer[krpano1container].alpha, 1.0); %1(layer[krpano1container].x, 0%); %1(layer[krpano1container].y, 0%); %1(layer[krpano1container].width, 100%); %1(layer[krpano1container].height, 100%); %1(layer[krpano1].x, 0%); %1(layer[krpano2container].alpha, 0.5); %1(layer[krpano2container].x, 0%); %1(layer[krpano2container].y, 0%); %1(layer[krpano2container].width, 100%); %1(layer[krpano2container].height, 100%); %1(layer[krpano2].x, 0%); </action> <layer name="split_slider" type="container" safearea="false" zorder="1" x="50%" edge="top" width="20" height="100%" bgcapture="true" cursor="ew-resize" enablechildren="false" autoalpha="true" ondown="asyncloop(pressed, x=(mouse.x/stagewidth * 100) + '%'; set_split_screen(set, (1-mouse.x/stagewidth),true) );" > <layer type="container" align="top" width="3" height="100%" bgcolor="0xFFFFFF" bgshadow="0 0 16 0x000000 1.0" bgalpha="1" /> </layer> <layer name="blend_slider" type="container" zorder="1" autoalpha="true" alpha="0" align="bottom" y="200" width="200" height="16" bgalpha="0.5" bgcolor="0xFFFFFF" bgborder="1 0xFFFFFF 0.2" bgroundedge="9" bgblur="5" > <layer name="blend_grip" align="left" edge="center" style="button" width="48" height="28" bgroundedge="20" padding="0" textalign="center" text="50%" x="50%" ondown.addevent="asyncloop(pressed, pos = (mouse.stagex - parentobject.stagex) / parentobject.pixelwidth; clamp(pos,0,1); x = 100*pos + '%'; text = (100-floor(100*pos)) + ':' + floor(100*pos); layer[krpano2container].alpha = pos; );" /> </layer> |
1.20下载包位置
你电脑的路径\krpano-1.20.9\viewer\examples\slider-blend-cubes
1.20演示
1.20步骤
素材准备
我们看案例所在的文件夹的截图：
首先需要融合两个场景的全景图是由各自的6张立方体切片组成，分别是前后左右上下，你可以使用krpano下载文件夹中的
Convert SPHERE to CUBE droplet.bat
或者是较新版本中的
Convert SPHERE CUBE Droplet.exe
因默认会生成tif图片，所以在下载包的templates文件夹的convertdroplets.config文件中的下面的高亮行
|
1 2 3 4 |
[Convert SPHERE to CUBE] cubeformat=CUBE cubesize=auto outputformat=tif |
改为
|
1 2 3 4 |
[Convert SPHERE to CUBE] cubeformat=CUBE cubesize=auto outputformat=jpg |
这样生成的立方体切片就是jpg图片。保存convertdroplets.config文件。
把球面全景图（第一张全景图命名为pano1.jpg第二张全景图命名为pano2.jpg）拖拽到对应的droplet。然后把12张切片图片和案例中slider_background.png以及slider_grip.png两个图片都放在你的文件夹vtour里。
代码修改
假设你是针对tour.xml里众多scene标签中的其中一个进行滑条融合。我们找到这个scene，默认生成的scene里面的内容，应该有image标签。image标签定义了该场景的全景图。我们把整段image标签删掉。
|
1 2 3 |
<image> …… </image> |
把image标签内以及image标签删除以后，我们下面所做的复制粘贴内容都是从范例文件夹里的slider.xml到我们自己的xml进行。
首先我们把scene标签里的onstart里加上
onstart=”setblend(0);”
然后我们把下面所有的代码都放在这个scene标签内
点击代码窗口最右侧按钮，在新窗口打开后复制代码
|
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 |
<layer name="slider_bg" url="slider_background.png" align="bottom" x="0" y="30" handcursor="false" width.mobile="220" /> <layer name="slider_grip" url="slider_grip.png" align="left" edge="center" parent="slider_bg" x="0" ondown="copy(drag_currentx, x); copy(drag_stagex, mouse.stagex); asyncloop(pressed, calc(newx, drag_currentx + (mouse.stagex - drag_stagex)); clamp(newx, 0, get(layer[slider_bg].pixelwidth)); copy(x, newx); setblend(calc(newx / layer[slider_bg].pixelwidth)); );" /> <style name="cubeface" distorted="true" width="1000" height="1000" enabled="false" alpha="0.0" /> <hotspot name="pano1_f" style="cubeface" url="pano1_f.jpg" ath="0" atv="0" /> <hotspot name="pano1_l" style="cubeface" url="pano1_l.jpg" ath="-90" atv="0" /> <hotspot name="pano1_r" style="cubeface" url="pano1_r.jpg" ath="+90" atv="0" /> <hotspot name="pano1_u" style="cubeface" url="pano1_u.jpg" ath="0" atv="-90" /> <hotspot name="pano1_d" style="cubeface" url="pano1_d.jpg" ath="0" atv="+90" /> <hotspot name="pano1_b" style="cubeface" url="pano1_b.jpg" ath="+180" atv="0" /> <hotspot name="pano2_f" style="cubeface" url="pano2_f.jpg" ath="0" atv="0" /> <hotspot name="pano2_l" style="cubeface" url="pano2_l.jpg" ath="-90" atv="0" /> <hotspot name="pano2_r" style="cubeface" url="pano2_r.jpg" ath="+90" atv="0" /> <hotspot name="pano2_u" style="cubeface" url="pano2_u.jpg" ath="0" atv="-90" /> <hotspot name="pano2_d" style="cubeface" url="pano2_d.jpg" ath="0" atv="+90" /> <hotspot name="pano2_b" style="cubeface" url="pano2_b.jpg" ath="+180" atv="0" /> <action name="setblend"> set(blend1, %1); sub(blend2, 1.0, %1); copy(hotspot[pano1_f].alpha, blend1); copy(hotspot[pano1_l].alpha, blend1); copy(hotspot[pano1_r].alpha, blend1); copy(hotspot[pano1_b].alpha, blend1); copy(hotspot[pano1_u].alpha, blend1); copy(hotspot[pano1_d].alpha, blend1); copy(hotspot[pano2_f].alpha, blend2); copy(hotspot[pano2_l].alpha, blend2); copy(hotspot[pano2_r].alpha, blend2); copy(hotspot[pano2_b].alpha, blend2); copy(hotspot[pano2_u].alpha, blend2); copy(hotspot[pano2_d].alpha, blend2); </action> |
修改以下代码中的x、y以及align属性可以改变滑条的位置。
|
1 |
<layer name="slider_bg" url="slider_background.png" align="bottom" x="0" y="30" handcursor="false" width.mobile="220" /> |
场景的无缝过渡
我们的需求很简单，好比现在有一个简约型装修的样板间，然后我们点击某个按钮，场景无缝融合到一个豪华型装修的样板间。也好比，这个场景是夏天，点击按钮后，场景无缝融合到冬天的场景。
在这样的需求下，首先相机的拍摄位置，包括三脚架的位置，镜头的高度，也就是节点在空间中的位置应该是一致的。你在拍摄这两个场景的时候就要注意点。就好比是拍摄户外的场景，需要明显的天气或气候对比时，利用其它工具记录好镜头的位置，以便下次拍摄第二个场景时保持在相同的位置。
在拼接的时候保证两张图片是一样的X位移，也就是如果有一个物体是两张图共有的，那么它应该出现在这两个球体全景图的相同的平面坐标上。
接下来就是我们需要实现的krpano的功能。我们只需要在场景1的按钮layer中加上一个简单的代码。
|
1 |
onclick="loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1));" |
KEEPVIEW是保持相同的视角，包括切换前的hlookat以及vlookat和fov，KEEPMOVING blend(1)则保证了融合的速度有一秒的时间
下面是关于loadscene的详细说明：