版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq379682421/article/details/78973102
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：第二个参数，。。。如此类推
参数代入： onclick=”test(abc,100)”
即执行：copy(layer[radar].x,layer[abc].x);set(layer[radar].heading,100);