##360全景制作笔记
###1、制作项目启动画面
项目封面设置
<!-- 启动画面开始 -->
<layer name="intro_jpg"
url.normal="common/sw.jpg" //PC端启动画面图
url.mobile="common/sw.jpg" //移动端启动画面图
preload="true"
handcursor="false"
enabled="true"
children="true"
visible=""
zorder="90"
maskchildren="true"
keep="true"
width="100%"
height="100%"
>
<layer name="skin_title_logo3"
zorder="100"
keep="true"
enabled="false"
visible="false"
x="14%" //图标位置偏移
y="30%"
alpha="0"
align="center"
url="skin/vtourskin_hotspot.png" //箭头、logo图，点击可进入项目
crop=""
scale.normal="0.9"
scale.mobile="0.5"
onclick="
tween(layer[intro_jpg].ox,-2500,2);
delayedcall(2,set(layer[intro_jpg].enabled,false));
"
onover="stoptween(alpha);set(alpha,1);"
onout="tweenintrobuttonalpha(0.35);"
/>
</layer>
<action name="tweenintrobuttonalpha" >
if(%1 == 0.35,
set(alphavalue,1),
set(alphavalue,0.35)
);
tween(layer[skin_title_logo3].alpha,%1,1,default,tweenintrobuttonalpha(get(alphavalue)));
</action>
<events name="startlogoevents" keep="true"
onloadcomplete="
set(layer[skin_title_logo3].enabled,true);
set(layer[skin_title_logo3].visible,true);
tweenintrobuttonalpha(1);
"
onnewpano="
set(layer[navi_title].visible,false);
set(layer[navi_title].visible,true);"
onresize="
if(stagewidth GT stageheight, //窗口大小改变时
set(layer[intro_jpg].url,common/sw.jpg), //窗口变大时图
set(layer[intro_jpg].url,common/sw.jpg) //窗口变小时图
);
"
/>
<!-- 启动画面结束 -->
###2、个别场景小行星开场动画
设置skin_settings中的
littleplanetintro="false"
然后在tour.xml的scene标签外找个位置写：
<events name="littleplanetintro_control" keep="true"
onnewpano="
if(scene[get(xml.scene)].index == 0 OR scene[get(xml.scene)].index == 4,
stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);
skin_setup_littleplanetintro()
)"
/>
index是场景序号，0是第一个场景，4是第五个场景，也就是在第一个和第五个场景执行小行星，如果有更多的场景需要小行星，则继续OR，例如第三个场景也需要小行星。
###3、给场景添加雨雪掉落特效
1，找到krpano-1.19-pr13文件夹下的krpano-1.19-pr13\viewer\examples\snow路径下的snow.xml文件，把snow.xml文件复制到项目中与tour.xml同一目录下。
2，找到krpano-1.19-pr13\viewer\plugins路径下的snow.swf和snow.js文件，复制到vtour文件夹的plugins文件夹中。
3，然后在你想要的scene里的onstart中添加onstart=”snowballs();” 即选择了雪球特效。然后在该scene里面写上，如下面代码所示：
<scene name="scene_achilleion-hof-unten" title="Achilleion - Garden" onstart="snowballs();" thumburl="panos/achilleion-hof-unten.tiles/thumb.jpg" lat="39.563340" lng="19.904324" heading="0.0">
<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />
<preview url="panos/achilleion-hof-unten.tiles/preview.jpg" />
<image>
<cube url="panos/achilleion-hof-unten.tiles/mobile_%s.jpg" />
</image>
<include url="snow.xml" />
</scene>
<action name="girls">
set(plugin[snow].mode, image);
set(plugin[snow].imageurl, '%CURRENTXML%/snow_image/girl.png');
set(plugin[snow].blendmode, normal);
set(plugin[snow].flakes, 250);
set(plugin[snow].imagescale, 0.5);
set(plugin[snow].speed, 1.0);
set(plugin[snow].shake, 4.0);
set(plugin[snow].speedvariance, 2.0);
set(plugin[snow].spreading, 1.5);
set(plugin[snow].wind, 0.0);
</action>
自定义需要自己配置
###4、插入热点视频和平面视频
插入热点视频，在某个场景scene下添加以下代码
<hotspot name="videospot"
url.html5="%SWFPATH%/plugins/videoplayer.js"
url.flash="%SWFPATH%/plugins/videoplayer.swf"
videourl="cats.mp4|cats.webm" //视频路径
posterurl="cats-poster.jpg" //视频封面图路径
distorted="true"
ath="0"
atv="0"
edge="center"
scale="1.0"
rx="0"
ry="0"
rz="0"
ox="0"
oy="0"
loop="true"
pausedonstart="true"
onclick="togglepause();"
/>
###krpano代码
#####action标签用于存放逻辑代码
<action name="image_layer">
addlayer(button); //动态添加图层 button为name
set(layer[button].url,image2.jpg);
set(layer[button].align,bottom); //添加属性
set(layer[button].x,10);
set(layer[button].y,20);
set(layer[button].onhover,showtext('hovering the new button')); //在图层中添加事件
set(layer[button].onclick, removelayer(button) );
set(layer[button].onover, set(iszoom, true);set(startzoom, true);copy(copy_mousefovchange, control.mousefovchange);copy(copy_touchzoom, control.touchzoom);set(control.mousefovchange, 0);set(control.touchzoom, false); );
set(layer[button].onout, set(iszoom, false);copy(control.mousefovchange, copy_mousefovchange);copy(control.touchzoom, copy_touchzoom); );
</action>
events（事件集合）的name没有特殊含义，events里的事件都是全局事件，可在里面加判断以作用于局部▲
<events onenterfullscreen="" 切换到全屏显示执行
onexitfullscreen="" 从全屏切换回普通视图时执行
onxmlcomplete="" XML文件加载完成时执行
onpreviewcomplete="" 预览图加载完成时执行
onloadcomplete="" 全景切片图片加载完毕时执行
onnewpano="" 当启动新的全景场景时执行
onremovepano="" 当前场景被关闭时执行（加载新场景前）
onnewscene="" 新场景加载完成时执行
onloaderror="" 加载错误时执行，执行被设置后，屏幕将不显示默认的错误信息
onkeydown="" 当某个键盘被按下时执行
onkeyup="" 当某个键盘松开时执行
onclick="" 当鼠标点击全景场景时执行
onmousedown="" 当鼠标按下时执行
onmouseup="" 当鼠标松开时执行
onmousewheel="" 当鼠标滚轮滚动时执行
onidle="" 当无用户操作在设定秒数后执行
onviewchange="" 当场景转变时执行（渲染开始时）
onviewchanged="" 当场景转变时执行（渲染完成时）
onresize="" 当浏览器大小改变时执行
/>
<!-- 针对鼠标滚轮缩放的事件 -->
<events name="image_zoom_events" onmousewheel="image_onmousewheel();" />
<!-- 通过手势或鼠标滚轮实现图片缩放 -->
<action name="image_onmousewheel">
if(iszoom,
if(wheeldelta_touchscale GT 0,
<!-- 触屏缩放 -->
if(startzoom,
set(startzoom,false);
copy(start_wheeldelta_touchscale, wheeldelta_touchscale);
copy(start_imagescale, layer[image].scale);
);
div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale);
mul(layer[image].scale, start_imagescale, tmp);
,
<!-- 鼠标滚轮缩放 -->
mul(sit,get(wheeldelta),0.05);
mul(sit,layer[image].scale);
add(layer[image].scale,sit);
);
);
</action>
###传参：▲▲
copy(layer[radar].x, layer[%1].x);set(layer[radar].heading,%2);
%1：第一个参数，%2：第二个参数，。。。如此类推
参数代入： οnclick=”test(abc,100)”
即执行：copy(layer[radar].x,layer[abc].x);set(layer[radar].heading,100);
####distorted=“true” 让热点适应手机端
设置动态热点和单行文本
在scene标签外，空白处添加如下action用以定义动态热点的fanction
<!-- 添加动态热点 -->
<action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate">
<!-- 定义局部变量 -->
calc(local.xframes, (caller.imagewidth /framewidth) BOR 0);
calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0));
def(local.frame, integer, 0);
<!-- 设置第一帧 -->
calc(caller.crop, '0|0|' + framewidth + '|' + frameheight);
<!-- 动画部分 -->
setinterval(calc('crop_anim_' + caller.name), calc(1.0 / framerate),
if(caller.loaded,
inc(frame);
if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
mod(xpos, frame, xframes);
div(ypos, frame, xframes);
Math.floor(ypos);
mul(xpos, framewidth);
mul(ypos, frameheight);
calc(caller.crop, xpos + '|' + ypos + '|' + framewidth + '|' + frameheight);
,
<!-- 当热点移除时停止动画 -->
clearinterval(calc('crop_anim_' + caller.name));
);
);
</action>
并在需要添加动态热点的热点处添加 onloaded="do_crop_animation(128,128, 60);"和url
<!-- 普通热点 -->
<hotspot name="spot6" style="skin_hotspotstyle" ath="-114.001" atv="14.956" linkedscene="scene_vr_g2" />
<!-- 动态热点 -->
<hotspot name="spot5" style="skin_hotspotstyle" ath="-57.045" atv="18.228" linkedscene="scene_vr_d1" onloaded="do_crop_animation(128,128, 60);" url="common/right.png" />
<!-- 添加热点单行文本 -->
<action name="add_all_the_time_tooltip_for_VR">
txtadd(tooltipname, 'vrtooltip_', get(name));
addhotspot(get(tooltipname));
set(hotspot[get(tooltipname)].type,text);
copy(hotspot[get(tooltipname)].edge,hotspot[get(name)].edge);
copy(hotspot[get(tooltipname)].distorted,hotspot[get(name)].distorted);
copy(hotspot[get(tooltipname)].ath,hotspot[get(name)].ath);
copy(hotspot[get(tooltipname)].atv,hotspot[get(name)].atv);
set(hotspot[get(tooltipname)].oy,-50);
set(hotspot[get(tooltipname)].ox,0);
set(hotspot[get(tooltipname)].vcenter,true);
<!-- pr11版本不能将vcenter设置为true -->
set(hotspot[get(tooltipname)].padding,10);
set(hotspot[get(tooltipname)].mipmapping,true);
set(hotspot[get(tooltipname)].oversampling,2);
set(hotspot[get(tooltipname)].bg,true);
set(hotspot[get(tooltipname)].bgcolor,0x000000);
set(hotspot[get(tooltipname)].bgroundedge,5);
set(hotspot[get(tooltipname)].bgalpha,0.65);
set(hotspot[get(tooltipname)].bgborder,0);
set(hotspot[get(tooltipname)].bgshadow,'0 0 0 0x000000 0');
set(hotspot[get(tooltipname)].css,'text-align:left; color:#FFFFFF; font-family:MicrosoftYahei; font-size:16px;');
if(device.mobile,set(hotspot[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:16px;');
);
set(hotspot[get(tooltipname)].txtshadow,'0 0 0 0x000000 0');
if(text == '' OR text === null,
copy(hotspot[get(tooltipname)].html,scene[get(linkedscene)].title),
copy(hotspot[get(tooltipname)].html,text);
);
set(hotspot[get(tooltipname)].enabled,false);
if(lp_running == false,
set(hotspot[get(tooltipname)].visible,true);
,
if(!webvr.isenabled,
if(lp_running == true,
set(hotspot[get(tooltipname)].visible,false);
set(hotspot[get(tooltipname)].mark2,true);
);
);
);
if(hotspot[get(name)].normal == false,
set(hotspot[get(tooltipname)].normal,false);
set(hotspot[get(tooltipname)].onloaded,
if(webvr.isenabled,
set(visible,false);
,
if(lp_running == false OR lp_running == null OR lp_running === null,
set(visible,true);
);
);
);
);
</action>
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
