文章目录

更新于 2022.3.7 krpano 1.20.11

krpano 1.19 pr3之后版本的默认皮肤有小行星功能，就是在skin_settings中可以设置是否启用小行星开场，如下：

开场场景实现小行星

下面以默认皮肤tour.xml为例，

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<skin_settings maps="false"
               ……
               littleplanetintro="false"
               ……
               />

<skin_settings maps="false"

……

littleplanetintro="false"

……

将

点击代码窗口最右侧按钮，在新窗口打开后复制代码

littleplanetintro="false"

1	littleplanetintro="false"

的false设为true，

则项目打开时的第一个场景会有小行星开场的效果。

实际上控制小行星开场的动作代码在skin文件夹的vtourskin.xml文件中，用Ctrl+F找到skin_setup_littleplanetintro这个action

下面分1.20.9、1.19 pr14-pr16和pr13之前的代码进行讲解

1.20版本的代码方法

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="skin_setup_littleplanetintro" scope="local">
	skin_hideskin(instant);
	set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview) );
	set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);
	lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);
	set(events[lp_events].onloadcomplete,
		delayedcall(0.5,
			if(lpinfo.scene === xml.scene,
				set(control.usercontrol, off);
				set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
				tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0), 3.0, easeOutQuad);
				delayedcall(3.0,
					set(control.usercontrol, all);
					tween(view.fovmax, get(lpinfo.fovmax));
					skin_deeplinking_update_url();
					delete(global.lpinfo);
					skin_showskin();
				);
			  ,
				delete(global.lpinfo);
			);
		);
	);
</action>

skin_hideskin(instant);

set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview) );

set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);

lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lpinfo.scene === xml.scene,

set(control.usercontrol, off);

set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);

delayedcall(3.0,

set(control.usercontrol, all);

tween(view.fovmax, get(lpinfo.fovmax));

skin_deeplinking_update_url();

delete(global.lpinfo);

skin_showskin();

);

delete(global.lpinfo);

);

</action>

首先找到delayedcall(0.5, 这里将0.5改为其它数字，这是小行星效果持续的时间。这里默认是0.5秒，你如果希望效果持续时间长点，可以改为3秒，如果要短点，可以改得更小。

另外我们需要处理以下问题：

保证热点hotspot不会在小行星视图中出现，等到小行星结束后再出现。

因此我们找到上面skin_setup_littleplanetintro这段action，整体替换为：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="skin_setup_littleplanetintro" scope="local">
	skin_hideskin(instant);
	set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview) );
	set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);
	set_hotspot_visible(false);
	lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);
	set(events[lp_events].onloadcomplete,
		delayedcall(0.5,
			if(lpinfo.scene === xml.scene,
				set(control.usercontrol, off);
				set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
				tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0), 3.0, easeOutQuad);
				delayedcall(3.0,
					set(control.usercontrol, all);
					tween(view.fovmax, get(lpinfo.fovmax));
					skin_deeplinking_update_url();
					delete(global.lpinfo);
					skin_showskin();
					set_hotspot_visible(true);
				);
			  ,
				delete(global.lpinfo);
			);
		);
	);
</action>

<action name="set_hotspot_visible">
	for(set(i,0),i LT hotspot.count,inc(i),
	   if(%1 == false,
	   	if(hotspot[get(i)].visible == true,
	   		set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
	   		);
	   	,
	   	if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
	   		set(hotspot[get(i)].visible,%1);
	   		);
	   	);
	  
	);
</action>

skin_hideskin(instant);

set(global.lpinfo, scene=get(xml.scene), hlookat=get(view.hlookat), vlookat=get(view.vlookat), fov=get(view.fov), fovmax=get(view.fovmax), limitview=get(view.limitview) );

set(view, fovmax=170, limitview=lookto, vlookatmin=90, vlookatmax=90);

set_hotspot_visible(false);

lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lpinfo.scene === xml.scene,

set(control.usercontrol, off);

set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);

delayedcall(3.0,

set(control.usercontrol, all);

tween(view.fovmax, get(lpinfo.fovmax));

skin_deeplinking_update_url();

delete(global.lpinfo);

skin_showskin();

set_hotspot_visible(true);

);

delete(global.lpinfo);

);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

if(%1 == false,

if(hotspot[get(i)].visible == true,

set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);

);

if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,

set(hotspot[get(i)].visible,%1);

);

</action>

1.19 pr14-pr15的代码方法

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="skin_setup_littleplanetintro" scope="local">
	set(global.lpinfo, 
		scene=get(xml.scene), 
		hlookat=get(view.hlookat), 
		vlookat=get(view.vlookat), 
		fov=get(view.fov), 
		fovmax=get(view.fovmax), 
		limitview=get(view.limitview) );
	set(view, 
		fovmax=170, 
		limitview=lookto, 
		vlookatmin=90, 
		vlookatmax=90);
	lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);
	set(events[lp_events].onloadcomplete,
		delayedcall(0.5,
			if(lpinfo.scene === xml.scene,
				set(control.usercontrol, off);
				set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
				tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0),
					3.0, easeOutQuad,
					set(control.usercontrol, all);
					tween(view.fovmax, get(lpinfo.fovmax));
					skin_deeplinking_update_url();
					delete(global.lpinfo);
				);
			  ,
				delete(global.lpinfo);
			);
		);
	);
</action>

set(global.lpinfo,

scene=get(xml.scene),

hlookat=get(view.hlookat),

vlookat=get(view.vlookat),

fov=get(view.fov),

fovmax=get(view.fovmax),

limitview=get(view.limitview) );

set(view,

fovmax=170,

limitview=lookto,

vlookatmin=90,

vlookatmax=90);

lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lpinfo.scene === xml.scene,

set(control.usercontrol, off);

set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lpinfo.fovmax));

skin_deeplinking_update_url();

delete(global.lpinfo);

);

delete(global.lpinfo);

);

</action>

另外我们需要处理两个细节

第一个细节，只显示小行星而不显示任何皮肤，包括官方模版的皮肤，只待小行星结束以后，恢复正常视图时我们才让皮肤显示。

第二个细节，保证在HTML5以及Flash下热点hotspot都不会在小行星视图中出现。

因此我们找到上面skin_setup_littleplanetintro这段action，替换为：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="skin_setup_littleplanetintro" scope="local">
	set(global.lpinfo, 
		scene=get(xml.scene), 
		hlookat=get(view.hlookat), 
		vlookat=get(view.vlookat), 
		fov=get(view.fov), 
		fovmax=get(view.fovmax), 
		limitview=get(view.limitview) );
	set(view, 
		fovmax=170, 
		limitview=lookto, 
		vlookatmin=90, 
		vlookatmax=90);
	set_hotspot_visible(false);
	set(layer[skin_layer],visible=false,alpha=0);
	set(layer[skin_control_bar],visible=false,alpha=0);
	set(layer[skin_splitter_bottom],visible=false,alpha=0);
	lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);
	set(global.lp_running,true);
	set(events[lp_events].onloadcomplete,
		delayedcall(0.5,
			if(lpinfo.scene === xml.scene,
				set(control.usercontrol, off);
				set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);
				tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lpinfo.hlookat + '|' + lpinfo.vlookat + '|' + lpinfo.fov + '|' + 0.0),
					3.0, easeOutQuad,
					set(control.usercontrol, all);
					tween(view.fovmax, get(lpinfo.fovmax));
					set(lp_running,false);
					set_hotspot_visible(true);
					set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);
					set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);
					set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);
					skin_deeplinking_update_url();
					delete(global.lpinfo);
				);
			  ,
				delete(global.lpinfo);
			);
		);
	);
</action>

<action name="set_hotspot_visible">
	for(set(i,0),i LT hotspot.count,inc(i),
	   if(%1 == false,
	   	if(hotspot[get(i)].visible == true,
	   		set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
	   		);
	   	,
	   	if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
	   		set(hotspot[get(i)].visible,%1);
	   		);
	   	);
	  
	);
</action>

set(global.lpinfo,

scene=get(xml.scene),

hlookat=get(view.hlookat),

vlookat=get(view.vlookat),

fov=get(view.fov),

fovmax=get(view.fovmax),

limitview=get(view.limitview) );

set(view,

fovmax=170,

limitview=lookto,

vlookatmin=90,

vlookatmax=90);

set_hotspot_visible(false);

set(layer[skin_layer],visible=false,alpha=0);

set(layer[skin_control_bar],visible=false,alpha=0);

set(layer[skin_splitter_bottom],visible=false,alpha=0);

lookat(calc(global.lpinfo.hlookat - 180), 90, 150, 1, 0, 0);

set(global.lp_running,true);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lpinfo.scene === xml.scene,

set(control.usercontrol, off);

set(view, limitview=get(lpinfo.limitview), vlookatmin=null, view.vlookatmax=null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lpinfo.fovmax));

set(lp_running,false);

set_hotspot_visible(true);

set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);

set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);

set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);

skin_deeplinking_update_url();

delete(global.lpinfo);

);

delete(global.lpinfo);

);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

if(%1 == false,

if(hotspot[get(i)].visible == true,

set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);

);

if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,

set(hotspot[get(i)].visible,%1);

);

</action>

1.19 pr13之前的代码方法

点击代码窗口最右侧按钮，在新窗口打开后复制代码

	<action name="skin_setup_littleplanetintro">
		copy(lp_scene, xml.scene);
		copy(lp_hlookat, view.hlookat);
		copy(lp_vlookat, view.vlookat);
		copy(lp_fov, view.fov);
		copy(lp_fovmax, view.fovmax);
		copy(lp_limitview, view.limitview);
		set(view.fovmax, 170);
		set(view.limitview, lookto);
		set(view.vlookatmin, 90);
		set(view.vlookatmax, 90);
		lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
		set(events[lp_events].onloadcomplete,
			delayedcall(0.5,
				if(lp_scene === xml.scene,
					set(control.usercontrol, off);
					copy(view.limitview, lp_limitview);
					set(view.vlookatmin, null);
					set(view.vlookatmax, null);
					tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
						3.0, easeOutQuad,
						set(control.usercontrol, all);
						tween(view.fovmax, get(lp_fovmax));
						);
				  );
			  );
		  );
	</action>

copy(lp_scene, xml.scene);

copy(lp_hlookat, view.hlookat);

copy(lp_vlookat, view.vlookat);

copy(lp_fov, view.fov);

copy(lp_fovmax, view.fovmax);

copy(lp_limitview, view.limitview);

set(view.fovmax, 170);

set(view.limitview, lookto);

set(view.vlookatmin, 90);

set(view.vlookatmax, 90);

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lp_scene === xml.scene,

set(control.usercontrol, off);

copy(view.limitview, lp_limitview);

set(view.vlookatmin, null);

set(view.vlookatmax, null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lp_fovmax));

);

</action>

另外我们在krpano 1.19 pr3之后版本需要处理两个细节

第一个细节，只显示小行星而不显示任何皮肤，包括官方模版的皮肤，只待小行星结束以后，恢复正常视图时我们才让皮肤显示。

第二个细节，保证在HTML5以及Flash下热点hotspot都不会在小行星视图中出现。

因此我们找到上面skin_setup_littleplanetintro这段action，替换为：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="skin_setup_littleplanetintro">
	copy(lp_scene, xml.scene);
	copy(lp_hlookat, view.hlookat);
	copy(lp_vlookat, view.vlookat);
	copy(lp_fov, view.fov);
	copy(lp_fovmax, view.fovmax);
	copy(lp_limitview, view.limitview);
	set(view.fovmax, 170);
	set(view.limitview, lookto);
	set(view.vlookatmin, 90);
	set(view.vlookatmax, 90);
	set_hotspot_visible(false);
	set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);
	set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);
	set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);
	lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
        set(lp_running,true);
	set(events[lp_events].onloadcomplete,
	delayedcall(2.5,
	if(lp_scene === xml.scene,
	set(control.usercontrol, off);
	copy(view.limitview, lp_limitview);
	set(view.vlookatmin, null);
	set(view.vlookatmax, null);
	tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
	3.0, easeOutQuad,
	set(control.usercontrol, all);
	tween(view.fovmax, get(lp_fovmax));
	);
        set(lp_running,false);
	set_hotspot_visible(true);
	set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);
	set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);
	set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);
	);
	);
	);
 
</action>
 
<action name="set_hotspot_visible">
	for(set(i,0),i LT hotspot.count,inc(i),
	   if(%1 == false,
	   	if(hotspot[get(i)].visible == true,
	   		set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
	   		);
	   	,
	   	if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
	   		set(hotspot[get(i)].visible,%1);
	   		);
	   	);
	  
	);
</action>

copy(lp_scene, xml.scene);

copy(lp_hlookat, view.hlookat);

copy(lp_vlookat, view.vlookat);

copy(lp_fov, view.fov);

copy(lp_fovmax, view.fovmax);

copy(lp_limitview, view.limitview);

set(view.fovmax, 170);

set(view.limitview, lookto);

set(view.vlookatmin, 90);

set(view.vlookatmax, 90);

set_hotspot_visible(false);

set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);

set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);

set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

set(lp_running,true);

set(events[lp_events].onloadcomplete,

delayedcall(2.5,

if(lp_scene === xml.scene,

set(control.usercontrol, off);

copy(view.limitview, lp_limitview);

set(view.vlookatmin, null);

set(view.vlookatmax, null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lp_fovmax));

);

set(lp_running,false);

set_hotspot_visible(true);

set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);

set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);

set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);

);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

if(%1 == false,

if(hotspot[get(i)].visible == true,

set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);

);

if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,

set(hotspot[get(i)].visible,%1);

);

</action>

如果你是自定义的皮肤，那么注意参考代码中类似的位置

点击代码窗口最右侧按钮，在新窗口打开后复制代码

set(layer[skin_layer].visible,false);

1	set(layer[skin_layer].visible,false);

复制一行新的，替换一下你自定义的layer的name，例如你有个logo的layer，保证隐藏掉自定义的皮肤。直接放在上面代码的下面开新一行即可。

点击代码窗口最右侧按钮，在新窗口打开后复制代码

set(layer[mylogo].visible,false);

1	set(layer[mylogo].visible,false);

同理，找到

点击代码窗口最右侧按钮，在新窗口打开后复制代码

set(layer[skin_layer].visible,true);

1	set(layer[skin_layer].visible,true);

复制一行，新的替换一下layer的name，保证重新显示自定义的皮肤。

点击代码窗口最右侧按钮，在新窗口打开后复制代码

set(layer[mylogo].visible,true);

1	set(layer[mylogo].visible,true);

下面的action是控制热点的隐藏和显示的。

点击代码窗口最右侧按钮，在新窗口打开后复制代码

set_hotspot_visible

1	set_hotspot_visible

该代码实现避免了VR光标的出现。

只在个别场景中实现小行星

分两种情况：

如果第一个打开的场景（可以是任意一个场景）不需要小行星：

设置skin_settings中的

点击代码窗口最右侧按钮，在新窗口打开后复制代码

littleplanetintro="false"

1	littleplanetintro="false"

然后在tour.xml的scene标签外找个位置写：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

	<events name="littleplanetintro_control" keep="true"
		onnewpano="
		if(scene[get(xml.scene)].index == 1 OR scene[get(xml.scene)].index == 4,
		stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);
                skin_setup_littleplanetintro();
		)"

		/>

<events name="littleplanetintro_control" keep="true"

onnewpano="

if(scene[get(xml.scene)].index == 1 OR scene[get(xml.scene)].index == 4,

stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);

skin_setup_littleplanetintro();

index是场景序号，1是第2个场景，4是第五个场景，也就是在第二个和第五个场景执行小行星，如果有更多的场景需要小行星，则继续OR，例如第三个场景也需要小行星。

点击代码窗口最右侧按钮，在新窗口打开后复制代码

	<events name="littleplanetintro_control" keep="true"
		onnewpano="
		if(scene[get(xml.scene)].index == 1 OR scene[get(xml.scene)].index == 2 OR scene[get(xml.scene)].index == 4,
		stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);
                skin_setup_littleplanetintro()
		)"

		/>

<events name="littleplanetintro_control" keep="true"

onnewpano="

if(scene[get(xml.scene)].index == 1 OR scene[get(xml.scene)].index == 2 OR scene[get(xml.scene)].index == 4,

stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);

skin_setup_littleplanetintro()

如果第一个打开的场景（可以是任意一个场景）需要小行星：

设置skin_settings中设置为true!

点击代码窗口最右侧按钮，在新窗口打开后复制代码

littleplanetintro="true"

1	littleplanetintro="true"

然后在tour.xml的scene标签外找个位置写：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<action name="littleplanetintro_control_custom" autorun="onstart">
	set(lp_c_c,true);
</action>

<events name="littleplanetintro_control" keep="true"
	onnewpano="
	if(!lp_c_c, 
	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();
	);
	,
	set(lp_c_c,false);
	);"
	/>

set(lp_c_c,true);

</action>

<events name="littleplanetintro_control" keep="true"

onnewpano="

if(!lp_c_c,

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();

);

set(lp_c_c,false);

);"

index是场景序号，0是第2个场景，4是第五个场景，也就是在第二个和第五个场景执行小行星，如果有更多的场景需要小行星，则继续OR，方法同上：

1.19-1.20自定义皮肤的小行星开场

简单方法

在你需要进行小行星开场的scene里面放入下面代码

每次进入场景都有小行星：

<scene ...>

    ...

    <action autorun="onstart">
        set(view, hlookat=calc(xml.view.hlookat+180), vlookat=90.0, fisheye=1.0, fov=150.0);
        wait(BLEND);
        delayedcall(0.25,
            tween(view.hlookat, get(xml.view.hlookat), 3.0, easeOutQuad);
            tween(view.vlookat, get(xml.view.vlookat), 3.0, easeOutQuad);
            tween(view.fov, get(xml.view.fov), 3.0, easeOutQuad);
            tween(view.fisheye, 0.0, 3.0, easeOutQuad);
        );
    </action>
    
</scene>

...

set(view, hlookat=calc(xml.view.hlookat+180), vlookat=90.0, fisheye=1.0, fov=150.0);

wait(BLEND);

delayedcall(0.25,

tween(view.hlookat, get(xml.view.hlookat), 3.0, easeOutQuad);

tween(view.vlookat, get(xml.view.vlookat), 3.0, easeOutQuad);

tween(view.fov, get(xml.view.fov), 3.0, easeOutQuad);

tween(view.fisheye, 0.0, 3.0, easeOutQuad);

);

</action>

</scene>

只是第一次进入场景时才有小行星

<scene ...>

    ...

    <action name="intro1" autorun="onstart">
        set(view, hlookat=calc(xml.view.hlookat+180), vlookat=90.0, fisheye=1.0, fov=150.0);
        wait(BLEND);
        delayedcall(0.25,
            tween(view.hlookat, get(xml.view.hlookat), 3.0, easeOutQuad);
            tween(view.vlookat, get(xml.view.vlookat), 3.0, easeOutQuad);
            tween(view.fov, get(xml.view.fov), 3.0, easeOutQuad);
            tween(view.fisheye, 0.0, 3.0, easeOutQuad);
        );
    </action>
    
</scene>

...

set(view, hlookat=calc(xml.view.hlookat+180), vlookat=90.0, fisheye=1.0, fov=150.0);

wait(BLEND);

delayedcall(0.25,

tween(view.hlookat, get(xml.view.hlookat), 3.0, easeOutQuad);

tween(view.vlookat, get(xml.view.vlookat), 3.0, easeOutQuad);

tween(view.fov, get(xml.view.fov), 3.0, easeOutQuad);

tween(view.fisheye, 0.0, 3.0, easeOutQuad);

);

</action>

</scene>

注意，“autorun=onstart”操作将只执行一次，因为这里action有一个给定的name时，该状态将被自动跟踪。如果没有给定的name，将使用一个自动的name，并且这个name每次都会不同，因此每次都会执行该操作。

复杂方法

默认皮肤请勿使用下面代码，必须是自定义皮肤时使用，在scene外加入以下代码

<events name="lp_events_" keep="true"
        onxmlcomplete="set(events[lp_events_].onxmlcomplete,null);
        if(device.webgl OR device.flash,
		skin_setup_littleplanetintro();
	  ); "
         />

<action name="skin_setup_littleplanetintro">
	copy(lp_scene, xml.scene);
	copy(lp_hlookat, view.hlookat);
	copy(lp_vlookat, view.vlookat);
	copy(lp_fov, view.fov);
	copy(lp_fovmax, view.fovmax);
	copy(lp_limitview, view.limitview);
	set(view.fovmax, 170);
	set(view.limitview, lookto);
	set(view.vlookatmin, 90);
	set(view.vlookatmax, 90);
	set_hotspot_visible(false);
	set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);
	set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);
	set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);
	lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
        set(lp_running,true);
	set(events[lp_events].onloadcomplete,
	delayedcall(2.5,
	if(lp_scene === xml.scene,
	set(control.usercontrol, off);
	copy(view.limitview, lp_limitview);
	set(view.vlookatmin, null);
	set(view.vlookatmax, null);
	tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
	3.0, easeOutQuad,
	set(control.usercontrol, all);
	tween(view.fovmax, get(lp_fovmax));
	);
        set(lp_running,false);
	set_hotspot_visible(true);
	set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);
	set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);
	set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);
	);
	);
	);

</action>

<action name="set_hotspot_visible">
	for(set(i,0),i LT hotspot.count,inc(i),
	   if(%1 == false,
	   	if(hotspot[get(i)].visible == true,
	   		set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
	   		);
	   	,
	   	if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
	   		set(hotspot[get(i)].visible,%1);
	   		);
	   	);
	  
	);
</action>

<events name="lp_events_" keep="true"

onxmlcomplete="set(events[lp_events_].onxmlcomplete,null);

if(device.webgl OR device.flash,

skin_setup_littleplanetintro();

); "

copy(lp_scene, xml.scene);

copy(lp_hlookat, view.hlookat);

copy(lp_vlookat, view.vlookat);

copy(lp_fov, view.fov);

copy(lp_fovmax, view.fovmax);

copy(lp_limitview, view.limitview);

set(view.fovmax, 170);

set(view.limitview, lookto);

set(view.vlookatmin, 90);

set(view.vlookatmax, 90);

set_hotspot_visible(false);

set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);

set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);

set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

set(lp_running,true);

set(events[lp_events].onloadcomplete,

delayedcall(2.5,

if(lp_scene === xml.scene,

set(control.usercontrol, off);

copy(view.limitview, lp_limitview);

set(view.vlookatmin, null);

set(view.vlookatmax, null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lp_fovmax));

);

set(lp_running,false);

set_hotspot_visible(true);

set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);

set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);

set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);

);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

if(%1 == false,

if(hotspot[get(i)].visible == true,

set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);

);

if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,

set(hotspot[get(i)].visible,%1);

);

</action>

小行星细节修改

对自定义皮肤和默认皮肤都是一样的，因为使用的都是同一个方法。

小行星结束后的视角

在tour.xml的第一个scene的view元素中修改，小行星结束后都会恢复到该view标签设置的视角

<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />

1	<view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />

设置小行星的视角大小

找到action下面一行

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

1	lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

修改150。

设置小行星的旋转方向

找到下面一行

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

1	lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

修改减号为加号，可改变旋转方向。

自定义小行星结束的时机

<events name="lp_events_" keep="true"
        onxmlcomplete="set(events[lp_events_].onxmlcomplete,null);
        if(device.webgl OR device.flash,
		skin_setup_littleplanetintro();
	  ); "
         />

<action name="skin_setup_littleplanetintro">
	copy(lp_scene, xml.scene);
	copy(lp_hlookat, view.hlookat);
	copy(lp_vlookat, view.vlookat);
	copy(lp_fov, view.fov);
	copy(lp_fovmax, view.fovmax);
	copy(lp_limitview, view.limitview);
	set(view.fovmax, 170);
	set(view.limitview, lookto);
	set(view.vlookatmin, 90);
	set(view.vlookatmax, 90);
	set_hotspot_visible(false);
	set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);
	set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);
	set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);
	lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
        set(lp_running,true);
</action>

<action name="lp_complete">
delayedcall(2.5,
	if(lp_scene === xml.scene,
	set(control.usercontrol, off);
	copy(view.limitview, lp_limitview);
	set(view.vlookatmin, null);
	set(view.vlookatmax, null);
	tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
	3.0, easeOutQuad,
	set(control.usercontrol, all);
	tween(view.fovmax, get(lp_fovmax));
	);
        set(lp_running,false);
	set_hotspot_visible(true);
	set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);
	set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);
	set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);
	);
	);
</action>

<action name="set_hotspot_visible">
	for(set(i,0),i LT hotspot.count,inc(i),
	   if(%1 == false,
	   	if(hotspot[get(i)].visible == true,
	   		set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);
	   		);
	   	,
	   	if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,
	   		set(hotspot[get(i)].visible,%1);
	   		);
	   	);
	  
	);
</action>

<events name="lp_events_" keep="true"

onxmlcomplete="set(events[lp_events_].onxmlcomplete,null);

if(device.webgl OR device.flash,

skin_setup_littleplanetintro();

); "

copy(lp_scene, xml.scene);

copy(lp_hlookat, view.hlookat);

copy(lp_vlookat, view.vlookat);

copy(lp_fov, view.fov);

copy(lp_fovmax, view.fovmax);

copy(lp_limitview, view.limitview);

set(view.fovmax, 170);

set(view.limitview, lookto);

set(view.vlookatmin, 90);

set(view.vlookatmax, 90);

set_hotspot_visible(false);

set(layer[skin_layer].visible,false);set(layer[skin_layer].alpha,0);

set(layer[skin_control_bar].visible,false);set(layer[skin_control_bar].alpha,0);

set(layer[skin_splitter_bottom].visible,false);set(layer[skin_splitter_bottom].alpha,0);

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

set(lp_running,true);

</action>

delayedcall(2.5,

if(lp_scene === xml.scene,

set(control.usercontrol, off);

copy(view.limitview, lp_limitview);

set(view.vlookatmin, null);

set(view.vlookatmax, null);

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lp_fovmax));

);

set(lp_running,false);

set_hotspot_visible(true);

set(layer[skin_layer].visible,true);tween(layer[skin_layer].alpha,1,1);

set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);

set(layer[skin_splitter_bottom].visible,true);tween(layer[skin_splitter_bottom].alpha,1,1);

);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

if(%1 == false,

if(hotspot[get(i)].visible == true,

set(hotspot[get(i)].mark,true);set(hotspot[get(i)].visible,%1);

);

if(hotspot[get(i)].mark == true OR hotspot[get(i)].mark2 == true,

set(hotspot[get(i)].visible,%1);

);

</action>

只有执行lp_complete()才会结束小行星。例如通过鼠标点击某个按钮。

onclick="lp_complete()"

1	onclick="lp_complete()"

1.18及1.17的小行星实现

小行星使用方法

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<scene name="scene_achilleion-hof-unten" title="Achilleion - Garden" onstart="" firsttime="true" 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="littleplanet.xml" />
        	   
    <hotspot name="spot9" style="skin_hotspotstyle" ath="93.776" atv="-0.864" linkedscene="scene_canaldemure5" />

</scene>

<image>

</image>

</scene>

将下载的littleplanet.xml放在根目录下，也就是与tour.xml同一目录。
在自己的第一个scene的代码中增加一个 firsttime=”true”，如上面第一行代码。
在自己的第一个scene的代码中增加 <include url=”littleplanet.xml” />，如上面第12行代码。

源码分析

点击代码窗口最右侧按钮，在新窗口打开后复制代码

   <!-- 检查是否为首次进入，如果是，则执行小行星视图-->  
<krpano onstart="if(
                 scene[0].firsttime,
                   set(layer[skin_scroll_window].visible,false);
                   set(layer[skin_scroll_window].alpha,0);
                   set(layer[skin_control_bar].visible,false);
                   set(layer[skin_scroll_window].alpha,0);
                   set_hotspot_visible(false);
                   littleplanetview();
                   set(scene[0].firsttime,false));
                 ">

     <!-- 小行星视图-->  
  <action name="littleplanetview">
        set(view.stereographic,true);
        set(view.fisheye,1.0); 
        set(view.fov,155); 
        set(view.fovtype,VFOV); 
        set(view.fovmax,150); 
        set(view.hlookat,-60); 
        set(view.vlookat,77); 
  </action>

     <!-- 设置热点可见性-->  
  <action name="set_hotspot_visible">
          for(set(i,0),i LT hotspot.count,inc(i),
               set(hotspot[get(i)].visible,%1);
                );
  </action>
  
    <!-- 检查是否在切换视图期间是否转到其它场景-->  
  <events onloadcomplete="if(view.fisheye == 1,delayedcall(lp_1,2.0, normalview()));" 
          onremovepano="ifnot(view.fisheye == 0,stopdelayedcall(lp_1));" 
          name="littleplanet"  
          keep="false" />  
  
    <!-- 小行星持续2秒后切换至正常视场-->  
  <action name="normalview">  
        tween(view.hlookat, -40, 2.5, easeInOutQuad);  
        tween(view.vlookat, 0, 2.5, easeInOutQuad);  
        tween(view.fov,     85,  2.5, easeInOutQuad);  
        tween(view.fisheye, 0.0, 2.5, easeInOutQuad);  
        wait(2.7);    
        set_hotspot_visible(true);
        set(layer[skin_scroll_window].visible,true);tween(layer[skin_scroll_window].alpha,1,1);
        set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);
  </action>  

</krpano>

<krpano onstart="if(

scene[0].firsttime,

set(layer[skin_scroll_window].visible,false);

set(layer[skin_scroll_window].alpha,0);

set(layer[skin_control_bar].visible,false);

set(layer[skin_scroll_window].alpha,0);

set_hotspot_visible(false);

littleplanetview();

set(scene[0].firsttime,false));

set(view.stereographic,true);

set(view.fisheye,1.0);

set(view.fov,155);

set(view.fovtype,VFOV);

set(view.fovmax,150);

set(view.hlookat,-60);

set(view.vlookat,77);

</action>

for(set(i,0),i LT hotspot.count,inc(i),

set(hotspot[get(i)].visible,%1);

);

</action>

<events onloadcomplete="if(view.fisheye == 1,delayedcall(lp_1,2.0, normalview()));"

onremovepano="ifnot(view.fisheye == 0,stopdelayedcall(lp_1));"

name="littleplanet"

keep="false" />

tween(view.hlookat, -40, 2.5, easeInOutQuad);

tween(view.vlookat, 0, 2.5, easeInOutQuad);

tween(view.fov, 85, 2.5, easeInOutQuad);

tween(view.fisheye, 0.0, 2.5, easeInOutQuad);

wait(2.7);

set_hotspot_visible(true);

set(layer[skin_scroll_window].visible,true);tween(layer[skin_scroll_window].alpha,1,1);

set(layer[skin_control_bar].visible,true);tween(layer[skin_control_bar].alpha,1,1);

</action>

</krpano>

小行星文件下载地址

1.17用户可使用下面的小行星文件

链接：http://pan.baidu.com/s/1pWqgI 密码：uyia

1.18用户可使用下面的小行星文件

链接：http://pan.baidu.com/s/1vxrh8 密码：stbf

移花接木（16）- 小行星开场

开场场景实现小行星

1.20版本的代码方法

1.19 pr14-pr15的代码方法

1.19 pr13之前的代码方法

只在个别场景中实现小行星

1.19-1.20自定义皮肤的小行星开场

简单方法

复杂方法

小行星细节修改

小行星结束后的视角

设置小行星的视角大小

设置小行星的旋转方向

自定义小行星结束的时机

1.18及1.17的小行星实现

小行星使用方法

源码分析

小行星文件下载地址

发表评论取消回复

开场场景实现小行星

1.20版本的代码方法

1.19 pr14-pr15的代码方法

1.19 pr13之前的代码方法

只在个别场景中实现小行星

1.19-1.20自定义皮肤的小行星开场

简单方法

复杂方法

小行星细节修改

小行星结束后的视角

设置小行星的视角大小

设置小行星的旋转方向

自定义小行星结束的时机

1.18及1.17的小行星实现

小行星使用方法

源码分析

小行星文件下载地址

发表评论 取消回复

发表评论取消回复