一、认识Krpano
Krpano是一款全景图像和虚拟现实的制作工具和展示引擎，通过它可以创建高质量的全景虚拟现实体验。使用Krpano可以构建交互式全景图片和视频，添加导航和注释，创建虚拟旅游和景观介绍等等。Krpano支持多种输出格式，包括Flash、HTML5、iOS和Android等平台，并且可以在各种设备上流畅运行。
1、链接导航🧭
Gigapixel / Multiresolution超高画质像素/多少分辨率
News新闻 • Examples例子 • Documentation文档 • Download下载 • Buy购买 • Forum论坛 • Contact联系
2、Krpano技术栈说明
- HTML5和CSS3：krpano使用HTML5和CSS3进行页面渲染和布局。
- JavaScript：krpano主要使用JavaScript实现交互和动态效果。
- WebGL：krpano使用WebGL进行实时渲染和图形加速。
- XML：krpano使用XML语言来定义虚拟全景场景中的各种元素和属性。
- AJAX和JSON：krpano使用AJAX和JSON进行异步加载和交互。
- CSS3D和WebXR：krpano利用CSS3D和WebVR技术来实现虚拟全景场景的3D显示和虚拟现实体验。
- Canvas：krpano使用Canvas技术来创建图形和渲染场景。
- 跨平台：krpano可以运行在不同的平台上，包括Windows、Mac、Linux、iOS、Android等。
3、Krpano软件的实现原理
图像切片：将全景图像切割成多个小图像，减小单个图像的大小，提高加载速度。
控制器：通过控制器实现用户对全景图像的交互，包括鼠标拖拽、缩放、视角切换等。
XML配置文件：通过XML配置文件来描述全景图像的显示信息，包括初始视角、切片大小、缩放比例等。
渲染引擎：通过渲染引擎将切片图像拼接为完整的全景图像，并将其显示在用户界面上。
插件扩展：可以通过插件扩展来实现更多的功能，如视频播放、音频播放、热点添加等。
总体来说，krpano的实现原理是通过图像切片、控制器、XML配置文件、渲染引擎和插件扩展等技术，实现了一款基于Flash和h5技术的全景图像展示引擎。
4、Krpano软件的安装和使用流程
Krpano的安装和使用流程如下：
1.下载Krpano软件包，截止2023年5月5日，最新版本为1.21，支持：Windows、MacOS、Liunx Krpano官网下载地址
2.解压软件包(我使用的MacOS)
将下载的krpano-1.21.dmg文件解压缩到本地计算机上的任何目录中，安装后目录如下：
- docu：说明书 图片、插件、工具、说明文件
- templates：模版 主要包含了krpano里面的配置文件, 比如以 .config结尾的配置文件、.xml 皮肤的一些模版文件
- plugins：插件
- viewer：观察者、观看
- examples：案例
- plugins：案例中用到的一些插件
- krpano.js 、krpano.swf：是krpano的内核文件、krpano.xml 是主 xml文件
- Convert SPHERE CUBE Droplet：转换 球面全景/面积全景 批处理文件
- documentation.html：官方文档文件
- examples.html：案例文件
- krpano Testing Server krpano：测试服务器
- krpano Tools：可视化的图形操作界面，修饰、添加热点、更改皮肤等。
- krpanotools.exe：在命令行中使用
- license.txt：版本 版权
- MAKE VTOUR Droplet：是krpano生成vr虚拟漫游的批处理工具
2、创建全景图
进入解压后的软件包的目录，可以在MacOS中双击krpano Tools.app文件打开Krpano软件，窗口如下：
在打开Krpano软件后，点击“Open Images”按钮选择拍摄好的全景图，注意：将全景图放到某个特定的文件夹中，后续会默认在改文件夹中生成名称为“vtour”的文件夹，该文件夹中内容即为全景项目工程，可通过该项目进行全景项目的定制化开发。
1、关于vtour文件夹目录下的各文件介绍：
vtour 文件夹结构
vtour/
| -- panos/ #存放全景切片图片的文件夹
| -- skin/ #存放皮肤相关文件
| -- plugins/ #用来存放插件
| -- tour.js #内核文件，包含了全景漫游中常用的Js函数，用于实现交互和其他功能。
| -- tour.xml #生成全景的相关配置,可以将多个跳转的场景包含到这个主场景里面。
| -- tour.html #用来浏览全景的页面，需要本地服务环境
| -- tour_testingserver.exe #windows系统中打开测试服务器并打开html文件进行本地浏览。
| -- tour_testingserver_macos #mac系统中打开测试服务器并打开html文件进行本地浏览。
2、查看全景图
双击vtour文件夹中的tour_testingserver_macos文件可自动在浏览器中执行全景浏览效果。
可视化的图形操作界面，修饰、添加热点、更改皮肤等
load tour.xml # 加载文件 tour.xml
Set as startup view # 设置为启动试图
Add hotspot # 添加热点
Edit hotspot # 编辑热点
Edit tour.xml # 编辑 tour.xml
Save tour.xml # 保存 tour.xml
Open tour folder # 打开访问文件夹
vtour 运作机制
Krpano 是通过viewer引擎来实现浏览静态图片时产生“三维”效果，而这一切则是通过tour.html这个入口文件。
过滤掉一些没用的代码，可以看到入口文件主代码如下：
<div id="pano"></div> // 创建嵌入容器
<script src="tour.js"></script> // 引入脚本（html5渲染器）
<script>
embedpano({
swf: "tour.swf", //有则表示加载flash引擎，如果设置html5:only则不需要该值
xml: "tour.xml", //启动时的配置文件
target: "pano", //要渲染到的目标容器ID
html5: "only", //如果有需要用到flash，可设置为auto
//id: "krpanoSWFObject", //默认的krpano对象，每一个viewer对应唯一id，与JS交互时要用到
mobilescale: 1.0, //移动设备缩放，1表示不缩放，默认0.5
passQueryParameters: false //是否接受URL传参，例如：tour.html?html5=only&startscene=scene2
});
</script>
创建对象及配置参数
embedpano({
swf:"krpano.swf", // flash渲染器
xml:"krpano.xml", // 主配置文件 缺省的时候会调用krpano.xml和krpano.swf 不加载设置0即可
target:"pano", // 嵌入容器id
id:"krpanoSWFObject", // 当前全景id，javascript接口调用会使用此id
bgcolor:"#000000",// 背景颜色
html5:"auto", // html5模式（auto：自动；prefer：优先使用html5；fallback：优先flash；only：只使用html5；always：始终使用html5-仅用于测试；never：始终使用flash；可加上webgl或css3d渲染技术，如auto+css3d）
flash："auto",// flash模式（auto,prefer,fallback,only,never和html设置类似）
wmode:"window",// flash模式设置（window：窗口；opaque：不透明；opaque-flash：不透明，仅限flash；transparent：透明的；transparent-flash：透明的，仅限flash；direct：最佳性能，但可能不兼容旧系统和浏览器）
localfallback:"http://localhost:8090",
vars:{},// 在xml加载解析后设置启动变量
initvars：{},// 在xml加载解析前设置启动变量，可以在地址进行查询（our.html?initvars.variable=value）
basepath:...// 基本路径 （相对于krpano.swf）
consolelog:false,// 是否在浏览器控制台打印日志信息
mwheel:true,// 是否启用鼠标滚轮
focus:true,// 获得焦点
webglsettings:{preserveDrawingBuffer:false, depth:false, stencil:false},//webgl设置
mobilescale:0.5, // 移动设备缩放
fakedevice:"",// "mobile", "tablet", "desktop"；模拟设备 （仅限测试）
onready:function(){},// 准备就绪回调函数，一般当javascript调用krpano接口的时候，需要在此方法内
onerror:function(){},// 错误回调函数
passQueryParameters:true, // 启用url查询参数（ html5, flash, wmode, mobilescale, fakedevice, initvars）作为变量传递，如tour.html?html5=only&startscene=scene2&initvars.design=flat
});
krpano根标签
<krpano
version="1.20.11"
title="皮肤标签"
debugmode="true"
logkey="true"
stagescale="1"
bgcolor="0x0fffff"
>
...
</krpano>
<!-- krpano 整个标签根标签，所有标签都要写在里面
xmlversion="" xml的版本
version="1.20.11" 版本号； 一般新版本都会兼容老版本
title="皮肤标签" 皮肤标签
onstart="" 自动运行 加载和解析完成之后自动调用
basedir="" 相对路径根目录
bgcolor="0x0fffff" 查看器的背景色 默认是黑色 值是16进制
idletime="3" 空闲时间；没有交互时调用
strict="false" 严格模式；
showerrors="" 程序发生错误时候，显示错误提示；
logkey="true" 启动日志快捷键 1旁边的按键 波浪线·
debugmode="true" 调试模式
debugkeys="" 调试的快捷键
debugjsactions="true" 调试type动作的快捷键 true krpano不会捕获jsbug，会被浏览器处理
debugjsplugins="" 调试插件动作的快捷键 和上面一样
-->
include标签，插件引入
在当前的xml文件引入一个外部的xml文件
url引入文件的地址 占位符
%VIEWER% 查看器根据经
%ROOT% 根路径
%SWFPATH% swf结尾的根据经
%HTMLPSTH% html结尾的根路径
%FIRSTXLM% 第一个加载的主xml文件 一般第一个加载的就是主xml
%BASEDIR% 试用basedir路径作为参考
%$VARIABLE% 变量的路径作为参考
<include url="skin/vtourskin.xml" />
如果使用插件的话 h5需引入这个插件 在vtourskin.xml中引入这个插件，
样式插件
<include url="../plugins/showtext.xml" />
showtext(text, textstyle); 有两个参数, 第一个文本, 第二个是文本的样式名称,如果不传显示默认样式
如果使用html标签格式化显示的文本
html 标签是尖括号, xml也是尖括号,为了防止冲突, 在xml里 html标签是 中括号 [html]
如果本身就用到中括号，那就再嵌套一层 [[html]]
比如字体加粗 [b]字体加粗[b]
textstyle 可选
url="../plugins/showtext.xml样式插件里文本样式可以修改
textstyle ：
name="DEFAYLT" 名称
origin="cursor/left\top\right ..." 文本的显示位置，cursor 鼠标在哪里文本显示位置就在哪里 或者位置
edge="bottom" 瞄点位置
xoffset="0" 定义文本样式显示在什么位置 x偏移位置
yoffset="-3" y偏移位置
fadeintime="0.0" 文本开始的淡入时间
showtime="0.1" 文本的显示时间
fadetime="0.0" 文本的淡出时间
font="Times" 定义的字体
fontsize="12.0" 字体大小字体大小
bold="true" 文字是否粗体
italic="false" 文字是否倾斜体
textcolor="0x000000" 文字颜色
textalign="none" 对齐方式
padding="1" 字体的边框边距
css="" 使用css会用到
width="" 文本大小 默认取决于文本内容
height="" 文本大小
vcenter="" 给定的垂直居中位置
background="true" 背景是否显示
backgroundcolor="0xFFFFFF" 背景颜色
backgroundalpha="1.0" 背景透明度
border="true" 是否设置边框
bordercolor="0x000000" 边框颜色
borderalpha="1.0" 边框透明度
borderwidth="1.0" 边框宽度
roundedge="0" 圆角边框的圆角
shadow="0.0" 文本后面阴影
shadowrange="4.0" 边框的界限，阴影的模糊范围
shadowangle="45" 阴影的角度
shadowcolor="0x000000" 阴影的颜色阴影的颜色
shadowalpha="1.0" 阴影的透明度
textshadow="0.0" 文本的阴影 下面的文本的阴影内容
textshadowrange="4.0" 文本
textshadowangle="45"
textshadowcolor="0x000000"
textshadowalpha="1.0"
alpha="1.0" 透明度整个文本样式的透明度
parent="" 自定义某一个层的父元素
noclip="truel" 是否剪切文本内容
菜单皮肤主题样式，可以选择自己喜欢的主题菜单，也可以自定义自己菜单样式
<include url="skin/vtourskin_design_flat_light.xml" />
<include url="skin/vtourskin_design_glass.xml" />
<include url="skin/vtourskin_design_ultra_light.xml" />
<include url="skin/vtourskin_design_117.xml" />
<include url="skin/vtourskin_design_117round.xml" />
<include url="skin/vtourskin_design_black.xml" />
layer标签
layer 标签表示层的意思，vr全景图和浏览器页面元素一样 通过html css 可以一层一层添加上去 一个一个叠加上去就是漫游，在以前的版本中叫plugin, 后来的版本中 功能越来越多，改名叫layer。
name: 每个层的名字，字母和字符开头，不区分大小写 不可以重复
type: 每个层的类型，默认是 image 或者 plugin， 如果是image 或者plugin 可以不加type.
image：表示加载一个图片
image 需要加一个url
<layer name="" type="image" url="././11.png" keep="true" />
还需要加一个keep 是否保留，
visible="true" 是否隐藏，
enabled="true" 元素是否启用，true表示元素启用可以添加鼠标事件，false 表示元素不启用，不可加鼠标事件
handcursor="true" 鼠标手型光标， true是小手，false是鼠标光标
cursor="help" 鼠标的光标类型
zorder="1" Z轴的层级排序1-100，数字越大越在上面 和 css z-index一样
align="center" 对齐 默认是center 又9个位置， 上下左右 中间 左上右上。。。。
让两张图片组成一个整体，操作一个图片，另一个图片也可以跟着动，这时候用到parent 属性
parent="" 设置父属性，是哪个layer 的 name， 如果设置了parent， 这个层会随着父级layer一起移动
width="100" 宽 height="200" 高
scale="0.5" 缩放 0-1 0.5表示缩小一半
x="100" y="200" x和y表示设置偏远位置，
rotate="90" 旋转 0-360
maskchildren="true" 超出父元素所有的子元素全部被隐藏掉
scalechildren="true" 缩放父元素，所有子元素也会跟着缩放
children="true" 是否启用当前层的子元素，true当前层的子元素也会有鼠标事件
capture="true" 鼠标点击的时候，是否捕获当前层的鼠标事件，true表示捕获，false表示底层也会捕，比如设置true，在图片上拖动，层下面的漫游也会移动，false 在图片上不会拖动漫游
capturefocus="true" 点击 触摸捕获焦点
nativecontextmenu="true" 当启用使用浏览器自带的右键菜单，true表示使用浏览器自带的右键菜单，false表示使用自定义的右键菜单
preload="true" 预加载，true表示预加载，false表示不预加载 表示在加载全景图之前来加载这个层 layer
blendmode="normal" 混合模式 两个图层的叠加方式，默认是normal 正常的
style 引入一些公共css样式 比如
<style name="mystyle1" url="././mystyle.css" />
<layer name="layer1" style="mystyle1" keep="true" />
<layer name="layer2" style="mystyle1" keep="true" x="100" />
这样就出现两个层 style 主要就是引入一些公共的样式特征 同时可以引入多个样式
<layer name="layer2" style="mystyle1|mystyle2|mystyle3" keep="true" x="100" />
edge="center" 锚点 也是9个值 上下左右 左上右上... 表示这个层的内容以哪个位置为初始点 类似line-height:center
safearea="true" 边缘安全区域 还是全屏区域，true表示开启，false表示关闭
ox="" oy="" x和y轴偏移量
scale9grid="20|20|40|40" 缩放九宫格 拆分9宫格 xy 宽高 主要对棱角分明的图片缩放
crop="x|y|width|height" 拆剪
onovercrop="x|y|width|height" 鼠标移入的时候，拆剪
ondowncrop="x|y|width|height" 鼠标点击的时候，拆剪
---------------------------------------------------------------------------
plugin：表示加载一个插件，
container：一个容器，容器层可以设置其他元素，
width="100"
height="100"
bgalpha="0.5" 背景透明度 0 - 1
bgcolor="0x000000" 背景颜色
keep="true" 是否保留
bgborder="20 oxffffff 1" 边框 width color alpha 三个值 第一个值 可以最多是4个值 比如 上 下 左 右 颜色 透明度 20, 20, 40, 50 #FFFFFF 0.3 和 css border类似
bgroundedge="20" 边框的圆角 和 border-radius 最多4个值
bgshadow="20|20|20|20" 背景阴影 五个值 x轴 y轴偏移 模糊程度 颜色 透明度
bgcapture="true" 鼠标点击的时候，是否捕获当前层的鼠标事件，true表示捕获，false表示不捕获，比如设置true，在图片上拖动，层下面的漫游也会移动，false 在图片上不会拖动漫游 前提条件type必须是container 并且bgalpha透明度大于0
type：文本层，
krpano：表示当前层内嵌一个新的krpano查看器
ifream：当前这个可以内嵌一个ifream页面
html：可以添加一个html
-----------------------------
onover.addevent="" 鼠标移入的时候，执行添加事件
onhover.addevent="" 鼠标移入停留悬停的时候，执行事件
onout.addevent="" 鼠标移出，执行事件
onclick.addevent="" 鼠标点击的时候，执行事件
ondown.addevent="" 鼠标按下的时候，执行事件
onup.addevent="" 鼠标抬起的时候，执行事件
onloaded.addevent="" 当加载全景图之后，执行事件
hotspot热点标签
表示全景图中标记出来的区域，引导用户点击，吸引用户关注
hotspot 图片类型的热点 图片 动画 视频
name：热点名字
type：热点类型 image/text 图片热点和文本热点
url：图片地址
keep="true" 是否保留
renderer="" webgl/css3d 渲染方式 默认会根据浏览器选择
visible="true" 是否隐藏
enabled="true" 元素是否启用，true表示元素启用可以添加鼠标事件，false 表示元素不启用，不可加鼠标事件
handcursor="true" 鼠标手型光标， true是小手，false是鼠标光标
cursor="help" 鼠标的光标类型
maskchildren="true" 超出父元素所有的子元素全部被隐藏掉
scalechildren="true" 缩放父元素，所有子元素也会跟着缩放
zorder="1" Z轴的层级排序1-100，数字越大越在上面 和 css z-index一样
capture="true" 鼠标点击的时候，是否捕获当前层的鼠标事件，true表示捕获，false表示底层也会捕获，比如设置true，在图片上拖动，层下面的漫游不会移动，false 在图片拖动漫游也会拖动漫游
capturefocus="true" 点击 触摸捕获焦点 默认true
children="true" 是否启用当前层的子元素，true表示启用，false表示不启用，true表示当前层的子元素也会有鼠标事件
nativecontextmenu="true" 当启用使用浏览器自带的右键菜单，true表示使用浏览器自带的右键菜单，false表示使用自定义的右键菜单
这个属性生效前提必须设置renderer="css3d" 并且 capture="true" 才会生效
blendmode="normal/add" 混合模式 两个图层的叠加方式，默认是normal 正常的 add会把阴影去掉
distorted="true/false" 启用/禁用 扭曲效果" 全景图旋转两边扭曲的时候 热点元素是否也发生扭曲
rx="0" ry="0" rz="90" 旋转角度 x y z 生效的前提distorted="true
rotationorder="yzx" 旋转顺序 y z x
inverserotation="true/false" 反向旋转
alphachannel="auto" 启用/禁用透明度通道 表示图片的透明度
auto表示禁用jpg图片的通道,启动其他图片的通道比如png gif
inline 表示总是启用通道
sbs 启用右侧并排的通道
tb表示启用上下并排的通道
none表示禁用通道
chromakey="" 色度键,主要是扣像 比如图片存绿色 扣成透明通道
mipmapping="" 是否开启地图映射 地图放大分辨率适配
ath="" atv="" 表示热点元素在球面全景图中的位置 经度和纬度
edge="" 设置热点元素的参考点 如同css 文字英文是上对齐 还是下对齐 也是9个值 上下左右 左上右上...
style="" 引入公共的样式
ox="" oy="" 热点元素的偏移
oref="1/2" 偏移的参考设置 1 表示旋转之前偏移 2 表示旋转之后的偏移
zoom="true" 是否开启缩放 热点元素和漫游是否也跟着缩放
depth="1000" 深度,值约大热点距离全景图 约远, 值越小距离越大
depthbuffer="true" 是否开启深度缓冲区 可以与其他热点较差渲染
tx="0" ty="0" tz="0" 热点元素在全景中移动的距离
torigin="view/image/world" 热点元素旋转的参考点 view 表示相对于view视角, image表示参考全景图片移动的, world相对于世界坐标
prealign="true" 是否开启自动对齐 热点元素和漫游是否跟着对齐
flying="0.5" 是否开启自动飞行 热点元素和漫游是否跟着飞行 1一直在中心点 如同cf枪口位置" 0-1
width="100" height="100" 热点的宽和高
scale="1" 热点的缩放倍数
rotate="" 热点图标旋转
accurate="0-1" 热点的精确度
alpha="1" 热点的透明度
autoalpha="0" 自动热点的透明 如果透明度是0
scale9grid="0" 热点的九宫格
stereo="sbs/tb" 是否开启立体热点 sbs 左眼图像 tb 上下图像
crop="" 热点的裁剪"
onovercrop="" 热点的裁剪 鼠标悬停的时候 显示裁剪
ondowncrop="" 热点的裁剪 鼠标点击的时候 显示裁剪
scalechildren="true" 热点的子元素是否跟着缩放
---------------------------------------------------------------
hotspot 多边形热点 描绘一些点 连起来形成一个多边形
<point ath="" atv="" /> ath atv 表示这个点在全景图的位置
<hotspot name="myPoint" keep="true" visiable="true" enabled="true" >
<point ath="0" atv="0" />
<point ath="15" atv="0" />
<point ath="0" atv="15" />
</hotspot>
polyline="true" 线段热点 描绘一些点 连起来形成一个线段 不闭合的线段
fillcolor="" 多边形 填充颜色
fillalpha="0.5" 多边形 填充透明度
borderwiddth="1" 多边形线的宽度
bordercolor="" 多边形线的颜色
borderzoom="0" 多边形线的宽度是否随着放大缩小 0 放多大不会随着全景图缩放改变 0.5 是跟着变大变粗
borderhittest="true" 多边形线的是否可以点击 true边框也算到热点里面 默认关闭false
subdiv="" 表示是否启用多变性细分 一般不启用 false
skin_settings标签，对漫游皮肤进行设置
<skin_settings
maps="false" 是否显示地图按钮；
maps_type="google" 地图类型；
maps_bing_api_key="" bing地图授权key；
maps_google_api_key="" 谷歌地图授权key；
maps_zoombuttons="false" 地图是否显示缩放按钮；
maps_loadonfirstuse="true" 首次使用时是否加载地图
gyro="true" 是否默认打开重力陀螺仪；
gyro_keeplookingdirection="false" 开启陀螺仪在移动端是否保持一个固定的方向
webvr="true" 是否显示webvr按钮，false不显示webvr按钮
webvr_keeplookingdirection="true" 移动端webvr是否保持固定的方向
webvr_prev_next_hotspots="true" 是否webvr状态下显示上下场景按钮；将光标移动上下就会切换场景
autotour="false" 是否自动旋转场景；可以在vtourskin里设置等待多长时间自动旋转
littleplanetintro="false" 是否启动小行星效果；
followmousecontrol="false" 是否根据鼠标移动发生相应的动
title="true" 是否显示标题
thumbs="true" 是否显示缩略图按钮
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" 缩略图的宽高，padding，裁剪区域
thumbs_opened="false" 是否自动打开缩略图
thumbs_text="false" 是否显示缩略图文字名称
thumbs_dragging="true" 是否缩略图支持滚动条拖动；
thumbs_onhoverscrolling="false" 是否缩略图支持鼠标移到上方时滚动；
thumbs_scrollbuttons="false" 是否显示缩略图左右滚动按钮
thumbs_scrollindicator="false" 是否显示滚动条底部控制条；
thumbs_loop="false" 是否缩略图循环滚动；
tooltips_buttons="false" 是否显示按钮上的提示信息（鼠标在上方时）自定义会显示提示；
tooltips_thumbs="false" 是否显示缩略图提示信息（鼠标在上方时）；
tooltips_hotspots="false" 是否显示热点提示信息（鼠标在上方时）；
tooltips_mapspots="false" 是否显示地图热点提示信息（鼠标在上方时）；
deeplinking="false" 是否显示深层链接；
loadscene_flags="MERGE" 设置场景切换标记；
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" 场景默认切换过渡效果（混合时间 混合形状 混合模糊程度 混合缩放 混合动画）；
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" 进入前一场景过渡效果；
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" 进入下一场景过渡效果；
--------------------------------------------------
linear：线性变化，速度均匀，无加速度变化。
easeInQuad：二次方缓入，开始时速度较慢，然后逐渐加速。
easeOutQuad：二次方缓出，开始时速度较快，然后逐渐减速。
easeInOutQuad：二次方缓入缓出，开始和结束时速度较慢，中间阶段速度较快。
easeInCubic，easeOutCubic，easeInOutCubic：三次方缓动函数，类似二次方缓动，但加速度变化更为明显。
easeInQuart，easeOutQuart，easeInOutQuart：四次方缓动函数，加速度变化进一步增强。
easeInQuint，easeOutQuint，easeInOutQuint：五次方缓动函数，提供非常强烈的加速度变化。
easeInSine，easeOutSine，easeInOutSine：正弦缓动，速度变化类似正弦波形，平滑且自然。
easeInExpo，easeOutExpo，easeInOutExpo：指数缓动，开始和结束时速度变化极其迅速，中间阶段较平稳。
easeInCirc，easeOutCirc，easeInOutCirc：圆形缓动，速度变化类似于圆的弧度，具有平滑的加速和减速。
easeInElastic，easeOutElastic，easeInOutElastic：弹性缓动，模仿物体受弹性约束的运动，开始和结束时有明显的摆动效果。
easeInBack，easeOutBack，easeInOutBack：回退缓动，运动过程中有轻微的回弹效果。
easeInBounce，easeOutBounce，easeInOutBounce：弹跳缓动，如同物体在某一阈值处反复弹跳。
--------------------------------------------------
loadingtext="加载的文本" 设置读取中状态的提示文字信息；
layout_width="100%" 系统皮肤默认宽度；
layout_maxwidth="814" 系统皮肤最大宽度；
controlbar_width="-24" 控制工具条宽度 导航条两端距离两边的距离 相当于 导航条 margin：0 24px；
controlbar_height="40" 控制工具条高度 导航条的高度；
controlbar_offset="20" 控制工具条偏移量 导航条距离底部的距离；
controlbar_offset_closed="-40" 控制工具条关闭时偏移量 让导航条隐藏掉 移动到底部-40 因为 高度就是40；
controlbar_overlap.no-fractionalscaling="10" 电脑端 控制工具条重叠非比例缩放值；
controlbar_overlap.fractionalscaling="0" 移动端 控制工具条重叠比例缩放值；
design_skin_images="vtourskin.png" design_skin皮肤默认皮肤图片文件；
design_bgcolor="0x2D3E50" design_skin皮肤背景颜色；
design_bgalpha="0.8" design_skin皮肤背景透明度；
design_bgborder="0" design_skin皮肤边框宽度；
design_bgroundedge="1" design_skin皮肤圆角值；
design_bgshadow="0 4 10 0x000000 0.3" design_skin皮肤背景阴影参数 （阴影倾斜角度 范围 模糊程度 颜色 透明度）；
design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_skin皮肤缩略图边框样式；
design_thumbborder_padding="2" design_skin皮肤缩略图内边距值；
design_thumbborder_bgroundedge="0" design_skin皮肤缩略图圆角值；
design_text_css="color:#FFFFFF; font-family:Arial;" design_skin皮肤文字样式；
design_text_shadow="1" design_skin皮肤文字阴影偏移值；
/>
control标签，对鼠标和键盘控制
<control
bouncinglimits="calc:image.cube ? true : false" draginertia="0.1"
usercontrol="all"
mode="drag"
dragrelative="true"
dragfriction="0.9"
fovfriction="0.9"
dragaccelerate="0.9"
invert="false"
mousefovchange="0.9"
zoomtocursor="false"
zoomoutcursor="false"
keycodesin="187"
keycodesout="17,89,90,109"
keydownrepeat="true"
/>
usercontrol="all" 用户可以使用那些方式控制
all所有 鼠标键盘触摸屏
mouse 只能鼠标和触摸屏 键盘不行
keyb只能键盘
off 鼠标键盘触摸屏都不能控制拖动
mode="drag" 控制漫游的模式
drag 用鼠标拖动
follow 和drag类似，拖动有惯性划到到指定位置
moveto 移动到指定位置 往上拖就往上走往下拖往下走
draginertia="0.1" 拖动控件的惯性 数值越大 惯性越大 mode="drag|follow" 生效 1 - 0.001 0没有惯性
dragrelative="true" 视图移动和鼠标移动是相对的, false 是鼠标拖动 鼠标拖动点和视图一样，
movetorelative="true" 和上面一样mode="moveto" 图移动和鼠标移动是相对的, false 是鼠标拖动 鼠标拖动点和视图一样
dragfriction="0.9" 摩擦力 视图移动的摩擦力
movetofriction="0.8" mode="moveto"的摩擦力
Keybfriction="0.9" 键盘移动的摩擦力
fovfriction="0.9" 视角变化移动的摩擦力 鼠标滚轮
movetoyfriction="1.0" mode="moveto" 垂直轴移动的摩擦力
dragaccelerate="0.9" mode="drag的加速度 拖动 前面慢后面快
movetoaccelerate="1.0" mode=不通 使用不同当时 和dragaccelerate类似
frictionstop="0.01" 运动停止的摩擦力
Keybaccelerate="0.5' 键盘移动的加速度
movetospeed="10.0" mode="moveto"最大运动速度
Keybspeed=".10.0" 键盘运动最大速度
Fovspeed="3.0" 视野发生变化的最大速度
drag_oldmode="false" 拖动模式 旧模式
invert="false" mode="drag" 反转
Keybinvert"false" 键盘控制是否反转
keybfovchange="0.1" 鼠标滚轮控制视角变化速度
mousefovchange="0.9" 鼠标滚轮控制视角变化速度
zoomtocursor="false" 鼠标滚轮控制光标位置变化放大 true以鼠标光标位子为中心， false 以视角为中心
zoomoutcursor="false" 鼠标滚轮控制光标位置变化缩小 true以鼠标光标位子为中心， false 以视角为中心
disablewheel="false" 鼠标滚轮是否禁用 true 禁用
ltouchzoom="true" 触摸屏双手启用缩放
keycodesleft="37" 键盘控制上下左右的键码 左边是37 右边是39 上边是38 下边是40
keycodesright="39" 键盘控制上下左右的键码 左边是37 右边是39 上边是38 下边是40
keycodesup="38" 键盘控制上下左右的键码 左边是37 右边是39 上边是38 下边是40
keycodesdown="40" 键盘控制上下左右的键码 左边是37 右边是39 上边是38 下边是40
keycodesleft="65" a 左 65
keycodesright="68" d 右 68
keycodesup="87" w 上 87
keycodesdown="83" s 下 83
keycodesin="16,65,107" 键盘控制放大的键码 shift a 加号 (mac电脑加号是187)
keycodesout="17,89,90,109" 键盘控制缩小的键码 cmd y z 减号 (mac电脑减号是173)
keydownrepeat="true" 按住某个键时触发 事件 布尔值
bouncinglimits="true" 拖动限制 操作漫游到达限制时是否反弹 false 不反弹
view标签，包含都是关于场景视图的内容 设置场景启动的视图
<view
hlookat="-21.526"
distortion="0"
vlookat="34.330"
fovtype="MFOV"
fov="140.000"
maxpixelzoom="2.0"
fovmin="70"
fovmax="140"
limitview="range"
hlookatmin="90"
hlookatmax="-90"
vlookatmin="45"
vlookatmax="-45"
/>
hlookat="0" 水平视角 球面坐标中水平的坐标方向 正直中心点就是0 0 水平和垂直都是 0
如果值是90 全景图就会向水平方向移动了90度
vlookat="0" 垂直视角 球面坐标中垂直的坐标方向
如果值是90 全景图就会向水平方向移动了90度
hlookatmin="-180" 水平视角最小值
hlookatmax="180" 水平视角最大值
vlookatmin="-90" 垂直视角最小值
vlookatmax="90" 垂直视角最大值
camroll="30" 控制试图 相机旋转视角
fov="80" 视角 表示视野角度 眼睛看到的角度 值越大从上面看到的范围越大
fovmin="10" 最小视角
fovmax="180" 最大视角
fovtype="MFOV" 视角类型,有很多类型
MFOV 最大视野 VFOV 垂直视野的类型 HFOV水平视野角度 SFOV屏幕对角线的视野角度 DFOV 视窗的对角线
mfovratio="1.0" 设置fovtype="MFOV"最大视野比例 最大视野计算比例尺寸
maxpixelzoom="10" 最大像素缩放
distortion="0" 视距扭曲 0-1
stereographic="true" 是否开启立体鱼眼投影 distortion从0-1 鱼眼投影效果是不同的
limitview="true" 限制视角
distortionfovlink="0" 是否开启视距扭曲与最大视野比例的关联，扭曲会更具缩放程度值相关 0-1
panning="0" 平移视角 0-1 帕尼尼视角
architectural="0" 是否开启建筑视角
architecturalonlymiddle="true" 是否只在中间部分开启水晶球效果 建筑全景模式是不是在中间
limitview="auto" 限制视角
auto 自动限制 拖动最上面和最下面不可以拖动只能180度
off 关闭限制360度可以旋转拖动
lookat 锁定视角 限制这四个值范围里面内拖动
hlookatmin="90"
hlookatmax="-90"
vlookatmin="45"
vlookatmax="-45"
range 界限 和 lookat类似 range 是界限 loogat 是中间线
hlookatmin="90"
hlookatmax="-90"
vlookatmin="45"
vlookatmax="-45"
fullrange 和range类似，可以缩小
offrange 和range类似，不可以缩小
如果设置了limitview 没有设置hlookatmin、hlookatmax 会根据全景图自动设置四个值
水晶球效果
<view hlookat="-21.526" distortion="1" stereographic="false" vlookat="34.330" fovtype="MFOV" fov="140.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
小行星效果
<view hlookat="-21.526" distortion="1" stereographic="true" vlookat="34.330" fovtype="MFOV" fov="140.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
限制拖动区域
<view hlookat="-21.526" distortion="0" vlookat="34.330" fovtype="MFOV" fov="140.000" maxpixelzoom="2.0" fovmin="70" fovmax="140"
limitview="range"
hlookatmin="90"
hlookatmax="-90"
vlookatmin="45"
vlookatmax="-45"
/>
禁止缩放
<view hlookat="-21.526" vlookat="34.330" fovtype="MFOV" fov="140.000" maxpixelzoom="" fovmin="140" fovmax="140" limitview="auto" />
scene场景标签，导航菜单每一个图片方格就是一个场景
<scene name="scene_demo1" title="第一个场景" onstart="" thumburl="panos/demo1.tiles/thumb.jpg" lat="" lng="" heading="">
name：每一个漫游可以有多个场景 需要一个唯一标识 name
title：场景标题
onstart：场景加载完的第一个调用的事件
thumburl：缩略图的路径（导航菜单里的小图），可以修改图片
preview标签，预览图
引入一张预览图，主要用于预览图的过度
<preview url="panos/demo1.tiles/preview.jpg" />
memory标签，内存设置，程序占用最大内存
<memory />
maxmen 最大内存 kb
devise 在哪些设备设备 可以用多个设备 + | ！
比如移动和平板电脑分配50兆内存 devise="mobile|tablet" maxmen="50"
security标签，安全设置 一般解决跨域问题
<security cors="" />
cors="" 跨域资源共享 在服务器需要设置
off 不使用 anonymous 没有证书标识的跨域设置 use-credentials 使用证书标识的跨域设置
network标签，网络设置
一般用不到默认设置就可以
<network/>
retrycount="3" 重试次数 默认2 加载全景图出现错误的加载次数 超过2次就会报错
cachesize="7.0" 文本缓存内容大小 单位kb兆 默认是7.0
maxdownloads="20" 最大下载数量 数量多下载慢 默认20
maxrequests="9" 最大请求次数 每帧下载请求次数默认9 一帧最多可以发出9次下载请求
maxdecodes="4" 一帧可以解码多少个切片 默认4
maxdecodetime_moving="0.0" 移动状态下每帧解码时间限制 默认0.0"
maxdecodetime_still="0.0" 静止状态下每帧解码时间限制 默认0.0
debug查看器屏幕设置
stagewidth|stageheight 查看器的宽度和高度 漫游所在的宽度和高度,浏览器发生变化的时候,这两个值会发生变化
<debug trace="stagewidth" />
<debug trace="stageheight" />
<debug trace="bgcolor" /> 查看背景颜色 默认颜色是黑色
<!-- 设备信息变量 -->
浏览器相关
browser.useragent 浏览器-用户代理 使服务器能够识别浏览器相关内容信息
browser.platform 浏览器的平台 操作系统
browser.location 浏览器的url地址
browser.domain 网页的域名 没有域名返回的是 null
browser.protocol 网页的协议
browser.chrome 是不是谷歌浏览器
browser.chromeversion 谷歌浏览器版本号
device.firefox 是不是火狐浏览器
device.firefoxversion 火狐浏览器版本号
device.ie 是不是ie浏览器
device.ieversion ie浏览器版本号
device.safari 是不是safari浏览器
device.safariversion safari浏览器版本号
device.edge 是不是edge浏览器
device.newedge 是不是edge浏览器最新版
设备相关的变量
device.desktop 是不是在台式机上面运行的
device.tablet 是不是平板电脑
device.mobile 是不是移动端
device.normal 是否运行在desktop或者tablet上面的
device.mobilevr 是不是虚拟现实的浏览器
device.multiressupport 能否支持多分辨率的图像
device.panovideosupport 能否支持全景视频
device.depthmapsupport 能否支持3d深度图
device.fullscreensupport 能否支持html全屏支持
device.pixelratio 物理像素和css像素比率 不同设备比率不一样
device.fractionalscaling 是否是分数值, 剋呀解决布局
device.maxtexturesize 检测当前webgl纹理最大值 画好的模型贴上去的图片就相当于纹理
device.mouse 检测当前的设备是否支持鼠标
device.touch 是否支持触摸
device.iframe 检测当前的网页是否被嵌入到其他的网页当中
device.ios 当前设备是不是ios系统
device.iosversion 当前设备是ios系统 什么版本
device.iosdesktop ios的桌面设备
device.iphone 是不是在iphone上面运行的
device.ipad 是不是在ipad上面运行的
device.android 是不是在android上面运行的
device.androidversion 是不是在android上面运行的 版本号
device.windows 是不是在windows系统上面运行的
device.mac 是不是在mac系统上面运行的
device.linux 是不是在linux系统上面运行的
渲染技术相关
device.css3d 是否支持css3d技术
device.webgl 是否支持webgl技术
device.webgl2 是否支持webgl第二代技术
<debug trace="device.chrome" />
<debug trace="device.chromeversion" />
<debug trace="device.safari" />
<debug trace="device.safariversion" />
...
text样式层内容设置
textfield plugin 提供了各种文本，与container共享了一些功能
可以设置一些宽高 文本，如果没有设置会默认自适应一个宽高
文本插件 1.20版本之后集成到了krpano当中
text="这是一个文本内容" 文本的内容 在老版本中叫 html="这是一个文本内容"
rawhtml="true" 是否是解析html文本，true不解析 默认是false 解析html" 1.20版本后生效
txtshadow 文本设置阴影
css="" 设置样式 css 优先级高于 cssclass 原生class
<layer name="mytext"
type="text"
keep="true"
html="[b]这是一个文本字段[b]"
rawhtml="true"
txtshadow="2 2 5 0X000000 0.5"
css="font-size: 16px;"
cssclass="mycss"
y="300"
/>
<cssstyles>
.mycss{font-family: kaiti; color: #333333;font-size: 20px;}
</cssstyles>
/plugins/scrollarea.js滚动插件
设置父元素中的子元素 可以滚动， 给一个大小和对齐方式，拖动子元素或者滚动滚轮来控制父元素中的子元素滚动，作用在层里面的，所以需要定义一个layer层
老版本1.21之前的老版本需要通过url 引入这个插件
<layer name="scrollarea" url="%VIEWER%/plugins/scrollarea.js">
新版本1.21之后不需要 直接给type
<layer name="scrollarea" type="scrollarea">
必须作为其他层元素的子元素 所以需要给他一个父元素
type="scrollarea" 的属性
direction="all/v/h" 方向 控制滚动的方向 默认是all所有方向都可以滚动 v 只能垂直方向滚动 h水平方向滚动
mwheel="true" 鼠标滚轮是否可以滚动， 默认是true
scrolltype="" 滚动类型 inertia 默认值惯性滚动 smooth光滑平坦滚动 step 阶梯正产滚动没有惯性
dragable="true" 是否可以被拖动 默认是true
capturechildren="true" 鼠标点击子元素能不能拖动， 默认是true， 设置方式不能拖动
parentmaskchildren="true" 将遮罩元素内的子元素应用在父元素中， 如果设置false， 子元素会超出父元素，如同css overflow:hidden;失效
autoscrollbars="hscrollbar|vscrollbar|padding" 设置自动控制滚动条，需要单独写了一个layer hscrollbar 水平滚动条 | vscrollbar 垂直滚动条 | padding 边距
onhover_autoscrolling="true" 鼠标悬停的时候是否自动滚动， 默认是false
overscroll="0" 是否可以滚动到超出范围， 默认是true 0是没有过滚， 1是超过滚动数值
momentum="0.5" 动量的加速度，惯性滚动的数值， 默认是0.5 数值越小停下来越快，数值越大停下来越慢
frication="" 摩擦力， 默认是0.5 数值越小越难摩擦，数值越大越难摩擦
acceleration 加速度， 默认是0.5 数值越小越难加力，数值越大越难加力
stepsize 滚动的步长， 默认是10 scrolltype="inertia" 才会生效
<layer name="box" type="container" keep="true" width="400" height="100" bgalpha="0.4" align="righttop">
<layer name="scrollarea" url="%VIEWER%/plugins/scrollarea.js" width="600" height="100" align="left"
direction="h"
mwheel="true"
scrolltype="inertia"
dragable="true"
capturechildren="true"
parentmaskchildren="true"
autoscrollbars="autoscrollbar"
onhover_autoscrolling="false"
overscroll="1"
momentum="0.5"
frication="0.5"
acceleration="0.5"
stepsize="10"
>
<layer name="box1" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="10" />"
<layer name="box2" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="110" />"
<layer name="box3" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="210" />"
<layer name="box4" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="310" />"
<layer name="box5" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="410" />"
<layer name="box6" type="container" height="80" width="80" bgalpha="1" bgcolor="0xFFFFFF" align="left" x="510" />"
</layer>
<!-- 滚动条 -->
<layer name="autoscrollbar" keep="true" type="container" height="5" width="20" bgalpha="1" bgcolor="0xffffff" align="leftbottom" />
</layer>
autorotate标签，播放支持
自动旋转 用户和漫游没有发生交互就会自动旋转
<autorotate enabled="calc:skin_settings.autotour == true" waittime="5.0" accel="0.7" speed="4.0" tofov="80" oneroundrange="360" />
enabled="true" 是否启用自动旋转
waittime="5.0" 旋转等待时间
accel="0.7" 加速度 运动的过程快慢
speed="4.0" 旋转速度 每秒旋转多少度
horizon="0" 旋转到水平 沿着哪条线旋转 0是水平旋转 负数就会向上选择
tofov="80" 旋转到FOV 视野的缩放 如果设置off 就不会缩放
oneroundrange="360" 发生一个事件的时候自动旋转 一圈旋转多少度
zoomslowdown="true" 视野发生变化，速度也会发生变化 视觉变化
interruptionevent="userviewchange|layers|keyboard" userviewchange用户改变视角打断视角 layers 与漫游层和热点交互就会打断旋转 keyboard键盘打断旋转
display标签，标签设置全景图显示模式
<display safearea="h-only" />
display: 标签设置全景图显示模式
autofullscreen="true" 自动全屏
stereo=“true” 是否开启立体模式 vr显示当中
stereooverlay="0-1" 是否开启立体模式中间重叠 vr显示当中 0-1 调节瞳距
stereoscale="0-1" 是否开启立体模式缩放
monoside="1/2" 是否开启单眼模式 vr显示当中 1表示左侧单视角 2表示右侧单视角
anaglyph="false" 启动3d立体图像
safearea="h-only" 安全区域 如何处理显示设备显示安全区域
h-only表示只处理水平安全区域
auto 自动 off 关闭,没有安全区域
test: trbl 四个位置
mipmapping="auto" 映射不同分辨率 auto 自动 force 强制 off 关闭
loadwhilemoving="true" 在视图移动加载漫游层和热点的时候是否加载图片 true 加载 auto 自动 false 任何移动中不加载
framebufferscale="1.0" 帧缓冲区缩放 数字越小 分辨率越低
hotspotvrrendering="screenspace" 热点vr渲染模式 screenspace 保持设备朝向的旋转, natural 调整观看者的眼睛旋转
hotspotworldscale="2.0" 全局热点缩放的比例, 2热点大小使用双倍
depthmaprendermode="depthmap/3dmodel" 深度映射渲染模式 depthmap用来3d模型图像 3dmodel 用来3d模型图像
depthbuffer="false" 深度缓冲区渲染
depthrange="0.1,100000" 深度范围 厘米为单位, 超出范围会截切掉
surfacesubdiv="100" 表面细分 控制曲面细分程度, 曲面程度渲染
contextmenu 上下文菜单 鼠标右键菜单
<contextmenu
fullscreen="true"
versioninfo="true"
touch="true"
customstyle=""
enterfs=""
exitfs=""
>
<item name="kr" caption="KRPANO" />
<item name="fs" caption="FULLSCREEN" />
<item name="cc" caption="Change Controlmode" onclick="cm_changecontrolmode();" separator="above" />
<item name="nv" caption="Normal View" onclick="cm_normal_view();" showif="view.vlookatrange == 180" separator="above" />
<item name="fv" caption="Fisheye View" onclick="cm_fisheye_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="sv" caption="Stereographic View" onclick="cm_stereographic_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="av" caption="Architectural View" onclick="cm_architectural_view();" showif="view.vlookatrange == 180" />
<item name="pv" caption="Pannini View" onclick="cm_pannini_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
<item name="lp" caption="Little Planet View" onclick="cm_littleplanet_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
</contextmenu>
定义和设置
fullscreen="" 是否启用全屏 布尔值
versioninfo="" 版本信息 默认true
touch="true" 触摸屏是否在触摸设备上启用 移动端 或者大屏
customstyle="" 自定义自己的样式
enterfs="true" 是否启用全屏按钮"
exitfs="true" 是否启用退出全屏按钮"
item 设置内容的
name="名称" 该项的名称
caption="显示的内容" 显示的内容
enabled="true" 是否启用该项
visible="true" 是否显示该项
separator="true" 是否显示分割线 false 没有 true above 显示在上面 below 显示在下面 both 显示在上面和下面 none 不显示
showif="true" 条件为true是否显示该项"
onclick="onclick" 点击事件
event动作事件
1、全局事件 没有name属性的的event元素 只能有一个，如果出现相同的 后定义的会覆盖前面定义的
2、本地事件 有name属性的event元素，
name：名称
keep：加载的时候是否保留如果设置false 加载的时候会被删除
onenterfullscreen="" 全屏模式的时候会被调用
onexitfullscreen="" 全屏模式退出会被调用
onxmlcomplete="" 场景xml解析完成会被调用
onpreviewcomplete="" 预览图模式完成会被调用
onloadcomplete="" 全景图像场景加载完成会被调用
onblendcomplete="" 场景切换完成会被调用
onnewpano="" 加载一个新的场景切换完成会被调用
onremovepano="" 移除一个场景完成会被调用
onnewscene="" 加载一个新的场景切换完成会被调用
onxmlerror="" xml解析错误会被调用
onloaderror="" 图像加载错误的时候调用，全景图相或者layer图
onkeydown="" 键盘按下时候被调用
onkeyup="" 键盘按下按键释放抬起时候被调用
onclick="" 全景图点击时候
onsingleclick="" 单击的时候出发
ondoubleclick="" 鼠标双击时候触发
onmousedown="" 按下鼠标的时候触发
onmouseup="" 按下鼠标抬起的时候调用
onmousewheel_"" 鼠标滚轮 触摸缩放调用
oncontextmenu="" 打开上下文菜单调用
onidle="" 没有用户交互的时候再设置的时间内调用
onviewchange="" 全景图位置改变时候触发
onviewchanged_"" 全景图位置改变完成时候触发
onresize="" 窗口大小改变时候触发 每次加载新的全景图也会调用
onframebufferresize="" 当帧渲染缓存区大小改变时候触发
onautorotatestart=" 开始自动旋转的时候触发
onautorotatestop="" 停止自动旋转的时候触发
onautorotateoneround="" 一圈自动旋转完成时候触发
onautorotatechange="" 自动旋转位置改变时候触发
oniphonefullscreen="" iphone全屏时候触发
gyro_onavailable="" 陀螺仪可用时候触发
gyro_onunavailable="" 陀螺仪不可用时候触发
gyro_onenable="" 陀螺仪启用时候触发
gyro_ondisable="" 陀螺仪禁用时候触发
gyro_ondenied="" 陀螺仪被拒绝时候触发 使用失败时候
webvr_onavailable="" webvr可用时候触发
webvr_onunavailable="" webvr不可用时候触发
webvr_onunknowndevice="" webvr未知设备时候触发
webvr_onentervr="" webvr进入vr时候触发
webvr_onexitvr="" webvr退出vr时候触发
webvr_ondenied="" webvr被拒绝时候触发 使用失败时候
和声音有关的插件
和声音有关的插件 soundinterface plugin
preload="true" 预加载
rootpath="" 表示加载声音文件的根路径
volume="" 声音全局的音量 0 - 1 0是静音 1是默认
mute 布尔值 true 关闭声音 false 开启声音
panningmodle 3d空间中定位声音算法 默认值
simple 简单的模型平移和音量 官方默认推荐
equalpower 浏览器模型计算
hrtf 更复杂的模型 基本不用
worldscale 3d空间中声音的缩放比例
outopause="true" 是否暂停声音播放时停止声音"
autounlock true 启动自动解锁 false 不启动自动解锁 第一次点击 或者触摸 自动解锁声音播放
<plugin name="soundinterface" url="./plugins/soundinterface.js" keep="true" preload="true"
rootpath=""
volume="0.2"
mute="true"
panningmodle="simple"
worldscale="1.0"
outopause="true"
autounlock="true"
/>
<!-- 事件
onnewpano 新全景加载完成会调用
playsound 播放声音方法 id：
-->
<events onnewpano="playsound(bgmusic,'./mp3/2.mp3' )" />
一些其他配置
vtourskin.xml 标题 logo
<!-- 标题 -->
<layer name="zgc-title" type="text" keep="true" html="我是标题" css="font-weight: 700;font-family:Arial;font-size:20px;color:#FFFFFF;text-shadow: 3px 3px 5px #000000;" bgalpha="0" x="26" y="78" onclick.addevent="openUrl('https://www.baidu.com/')" ></layer>
<layer name="browse" type="text" keep="true" html="浏览量：445" css="font-family:Arial;font-size:20px;color:#FFFFFF;text-shadow: 3px 3px 5px #000000;" bgalpha="0" x="130" enabled="false" y="78" ></layer>
<!-- 设置logo -->
<layer name="logo-img" type="image" url="%VIEWER%/img/logo.png" keep="true" width="210" height="42"
y="30" x="24" align="lefttop"
onclick.addevent="toggle(layer[banner].visible)"
/>
<!-- 点击事件 1、多次点击执行多次 2、鼠标点击显示隐藏 -->
<!-- onclick.addevent="switch(layer[banner].alpha,1, 0.5, 0)" -->
<!-- 鼠标滑入 滑出事件 -->
<!-- onover.addevent="set(layer[logocon].visible, true)" onout.addevent="set(layer[logocon].visible, false)" -->
<!-- 设置首页内容banner图 -->
<!-- 用到了文字皮肤插件 -->
<include url="%VIEWER%/plugins/showtext.xml" />
<layer name="banner" type="container" keep="true" width="550" height="400"
bgcolor="0x000000" bgalpha="0.5" align="center" bgroundedge="20"
bgborder="2 0xffffff 1" visible="true"
>
<layer name="banner-img" width="90%" height="90%" bgroundedge="20" align="center" url="%VIEWER%/img/banner1.jpg" keep="true" onclick.addevent="set(layer[banner].visible, false)" onhover.addevent="showtext(提示信息提示信息提示信息)" />
</layer>
<!-- cssstyle 样式标签 设置css样式
也需要加入CDATA
<![CDATA[
...
]]>
-->
<cssstyle>
<![CDATA[
.title{
font-size: 30px;
color: #fff;
text-align: center;
}
]]>
</cssstyle>
<!-- set 设置特殊变量的标签
var="变量名" val="变量值"
-->
<set var="a" val="测试变量" />
