Krpano-全景

全景图漫游制作引擎操作手册

强依赖文件(不可缺失)

/

tour.js 渲染引擎
tour.xml 配置文件

panos/**

该路径下存放所有场景切图

style/

style.xml 主题配置文件
hotspot.png 热点图

页面载入

相关依赖

1
2
// 渲染引擎
<script src="vtour/tour.js"></script>

初始化

1
2
// 基础配置参数
embedpano({xml: "vtour/tour.xml", target: "pano", html5: "only"});
  • xml 全景配置文件
  • target 寄存DOM节点
  • html5:only 只允许WEBGL渲染方式

配置文件

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
<krpano version="1.19" title="Virtual Tour">
<!--引入菜单配置文件-->
<include url="skin/vtourskin.xml"/>

<!-- 生命周期回调-加载第一个场景 -->
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>

<!--场景1相关-->
<scene name="scene_hongkong" title="hongkong" havevrimage="true"
thumburl="panos/hongkong.tiles/thumb.jpg" >

<view hlookat="177.349" vlookat="27.330" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70"
fovmax="140" limitview="auto"/>

<preview url="panos/hongkong.tiles/preview.jpg"/>

<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
<level tiledimagewidth="1280" tiledimageheight="1280">
<cube url="panos/hongkong.tiles/%s/l2/%v/l2_%s_%v_%h.jpg"/>
</level>
<level tiledimagewidth="640" tiledimageheight="640">
<cube url="panos/hongkong.tiles/%s/l1/%v/l1_%s_%v_%h.jpg"/>
</level>
</image>

<image if="webvr.isenabled">
<cube url="panos/hongkong.tiles/vr/pano_%s.jpg"/>
</image>

<!--热点-->
<hotspot name="spot1" style="skin_hotspotstyle" ath="177.199" atv="15.974" onclick="jscall(link())"/>
<hotspot name="spot2" style="skin_hotspotstyle_go" ath="16.403" atv="12.259" onclick="jscall(toast())"/>
<hotspot name="spot3" style="skin_hotspotstyle_go" ath="-32.358" atv="-0.267" linkedscene="scene_test2"/>
</scene>

<!--场景2相关-->
<scene name="scene_test2" title="test2" thumburl="panos/test2.titles/thumb.jpg">
<!--视窗配置-->
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2" fovmin="70" fovmax="140"
limitview="auto"/>
<!--预览配置-->
<preview url="panos/test2.tiles/preview.jpg"/>
<!--全景视图配置-->
<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
<!--高分辨率-->
<level tiledimagewidth="1280" tiledimageheight="1280">
<cube url="panos/test2.tiles/%s/l2/%v/l2_%s_%v_%h.jpg"/>
</level>
<!--低分辨率-->
<level tiledimagewidth="640" tiledimageheight="640">
<cube url="panos/test2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg"/>
</level>
</image>
<!--vr视图配置-->
<image if="webvr.isenabled">
<cube url="panos/test2.tiles/vr/pano_%s.jpg"/>
</image>
<!--热点-->
<hotspot name="spot1" style="skin_hotspotstyle" ath="-17.258" atv="9.196" linkedscene="scene_hongkong" />
</scene>
</krpano>

常见问题

plugins 路径错误

自动生成的皮肤管理配置中的plugins路径被设置为静态的绝对路径,类似于 url.html5="%SWFPATH%/plugins/scrollarea.js"
可通过修改这里的参数重定向插件路径或者删除不需要的插件引用

隐藏默认菜单

1
2
<!-- tourskin.xml -->
layout_width="0%"

热点回调函数

1
2
<!-- tour.xml -->
<hotspot name="spot1" style="skin_hotspotstyle" ath="177.199" atv="15.974" onclick="jscall(link())"/>

自动旋转

1
2
3
4
5
6
7
<!-- tour.xml -->
<autorotate enabled="true"
waittime="5.0"
speed="1.0"
horizon="0.0"
tofov="360.0"
/>

星球入场

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
<!-- tour.xml -->
<events name="skin_events" keep="true" onxmlcomplete="set(events[skin_events].onxmlcomplete,null); littleplanetintro();"/>

<action name="littleplanetintro">
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(lp_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(events[skin_events].onxmlcomplete,null);