vr全景krpano + vue3

krpano + vue3

1. 引入

	1.1  index.html中引入 tour.js 

//static 存放krpano生成的vtour文件
<script src="./static/vtour/tour.js"></script>

	1.2 页面中创建pano 输出节点

<div id="pano"></div>

	1.3 在mounted中初始化节点

onMounted(() => {
  embedpano({
    swf: "./static/vtour/tour.swf",
    xml: "./static/vtour/tour.xml",
    target: "pano",
    html5: "auto",
    mobilescale: 1.0,
    passQueryParameters: true,
  })
})

2.操作krpano

	2.1  krpano标签介绍

   // view标签方法 元素控制全景的视野，例如起始位置、视域范围、可缩放范围、是否限制，限制观看的 区域等
fov="90.0"	       					默认视角的缩放						                         
hfov=""								当前水平视野（只读）	
vfov=""								当前垂直视野（只读）						
fovmin="1.0"						默认视角缩放最大值						
fovmax="179.0"						默认视角缩放最小值	
maxpixelzoom=""						默认视角最大缩放倍数	
mfovratio="1.333333"				最大的屏幕尺寸的宽高比例
distortion="0.0"					鱼眼视角失真设置0.0至1.0之间（扭曲程度）
fisheye="0.0"						鱼眼视角设置0.0至1.0之间（扭曲程度）（旧）
distortionfovlink="0.5"				fov值与鱼眼视角的关联值，默认0.5(0.0-3.0之间)	
stereographic="true"				是否启动立体鱼眼投影效果（小行星）
pannini="0.0"						设置“Pannini	/	vedutismo”投影效果
architectural="0.0"					建筑视角设置	0.0	至1.0之间
architecturalonlymiddle="true"		是否只对中间区域的图像实行建筑投影	

   //Include 标签导入其他配置XML，相当于复制其他XML文件内容到主XML。
<include	url=".xml"/> 

   //Preview  预览图设置，指定一张全景预览图，以便在读取过程中，过渡显示，即全景完全载入之前的模糊图像
<preview	url="pano_preview.jpg"	/>
<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999/>
<preview type="SPHERE"  url="preview.jpg" details="16"/>
<preview type="CUBESTRIP"	 url="cspreview.jpg"/>

  //Image 全景图设置，包括全景图类型、渐进分辨率切片显示等。

  //Area 全景图在浏览器中的显示区域大小 定义全景图像展示的区域/窗口。有两种定义区域位置和尺寸的模式： 或通过定义尺寸和位置 (mode=align) 或定义边界边距 (mode=border) 可在onresize事件中动态改变/调整这些设定。如果在onresize事件之外改动了area设置，那 么在下一次屏幕刷新时候将会调用一个onresize事件，对于新的区域/窗口尺寸作出回应。注意 所有的 <layer> /<plugin> 元素都要放在这个区域内。如果要把 <layer>/<plugin> 元素放在区域外面，需设置layer/plugin的STAGE属性。
mode="align"                定义区域的模式，排列align和边界border两种align、border
align="lefttop"             排列对齐时[X,Y]的坐标参考系，可选的值为：lefttop、left、leftbottom、top、center、bottom、righttop、right、rightbottom
x="0"                       基于排列方式偏移的X坐标
y="0"        		        基于排列方式偏移的Y坐标
width="100%"                区域
height="100%"

  //Control  设置鼠标、键盘以及触摸设备对全景浏览的控制方式
usercontrol="all"			用户控制方式（all,mouse,keyb,off）
mouse="drag"				控制方式（drag，moveto，dra g3d（仅限flash））				
touch="drag"				控制方式（drag，moveto，dra g3d（仅限flash））								
dragrelative="true"	        参数设置				
draginertia="0.1"			惯性	
dragfriction="0.9"			摩擦力		
drag_oldmode="false"		旧模式（html5）
movetorelative="true"		参数设置		
movetoaccelerate="1.0"		加速度		
movetospeed="10.0"			最大速度		
movetofriction="0.8"		摩擦力					
movetoyfriction="1.0"		垂直摩擦力	
keybaccelerate="0.5"		加速度		
keybspeed="10.0"			速度		
keybfriction="0.9"			摩擦力	
keybinvert="false"		    反转		
keybfovchange="0.75"	    按钮改变视角		
mousefovchange="1.0"	    鼠标滚轮改变视角	
fovspeed="3.0"		        改变视角速度		
fovfriction="0.9"	        改变摩擦力		
zoomtocursor="false"	    放大			
zoomoutcursor="true"	    缩小		
touchzoom="true"	        手势缩放	
keycodesleft="37"		    左键			
keycodesright="39"	        右键			
keycodesup="38"	            上键				
keycodesdown="40"		    下键		
keycodesin=""	            放大键					
keycodesout=""     	        缩小键			
keydownrepeat="true"	    连续按键			
bouncinglimits="false"	    反弹（仅限html5）									


   //Cursors cursors为鼠标光标样式 html5可以使用standard,draggingandmoving调用系统样式，flash模式可以自定义图片。

standard="default"		标准	
dragging="move"		    拖动			
moving="move"		    移动		
url=""				    光标图片地址		
type="8way"			    光标方向模式，是4个方向移动更换图片，还是8个方向移动都 更换图片（drag，4way，8way）
move=""					设定光标移动时显示图片	
drag=""					设定鼠标按下时显示图片		
arrow_l=""				以下是8个方向移动时对应显示的鼠标图片	
arrow_r=""								
arrow_u=""								
arrow_d=""									
arrow_lu=""									
arrow_ru=""								
arrow_ld=""								
arrow_rd=""								

   //Autorotate 管理与全景图自动旋转的设置。
enabled="false"				是否开启自动旋转	
waittime="1.5"				用户不对屏幕操作后，开始自动旋转的等待时间	
accel="1.0"					旋转加速度：角度/秒			
speed="10.0"			    自动旋转速度：角度/秒		
horizon="0.0"				例如:-45表示向上45度仰视;45表示向下45度俯视;										
tofov="off"					缩放到特定的视区
zoomslowdown="true"			相对于当前的缩放/视场速度，减慢自动旋转速度，以 获得相同的视觉速度在所有的缩放距离		
interruptionevents="userviewchange|layers|keyboard"		定义哪些事件将中断自动旋转(以及 onidle 事件)，可以组合												

  // Plugin  and Layer
name="..."			      定义引入的元素名称
type="image"			  引入元素的类型，可以为image、container、text（textfi eld），container为容器，可在容器内继续引入多个媒体元素		
url="..."				  引入元素的路径（支持格式：SWF,	JPG,	PNG,	GIF.）	
html=""				      显示文字时的内容
keep="false"			  是否在跳入新场景时仍然保留显示该元素							
parent=""				  设置父容器名称，可以直接是plugin的name,也可以是全称： parent="layer[name]"或parent="hotspot[name]"	
alturl=""				  引入元素的路径（支持格式：SWF,JPG,PNG,GIF），只在html5浏览器使用							
devices="all"			  设置显示的设备类型（详见设备列表）			
visible="true"			  设置插入元素是否可见
enabled="true"			  设置插入元素是否接受鼠标事件						
handcursor="true"		  鼠标移动该元素上时，是否变为小手							
maskchildren="false"	  设置是否将子控件变为蒙板，设置为TRUE后，除子控件范围 显示外，子控件边框与父控件边框之间区域将不显示
scalechildren="false"	  设置是否子空间跟随父控件一同缩放							
zorder=""				  插入元素的次序索引，可以是字符也可以是数字，html5输 出必须是0-100整数							
capture="true"		      只是该元素接受事件，false时子元素也可接受事件			
children="true"			  启用当前元素的子元素来接收鼠标事件。
preload="false"	          预加载，在加载pano之前先加载图层/插件的url，然后执行任何 操作。							
blendmode="normal"	      混合/混合模式（normal,layer,screen,add,subtract,difference,multiply,overlay,lighten,darken,hardlight,	invert）仅 flash			
style=""				  调用已在文件中定义好的style的名称			
align=""				  元素在屏幕对齐方  lefttop,left,leftbottom,top,center,bottom,righttop,right,rightbottom								
edge=""					  元素的边缘或描点层对齐方式，lefttop,left,leftbottom,top,center,bottom,righttop,right,rightbottom）							
x=""					  对齐边界到对齐点的X横向距离						
y=""					  对齐边界到对齐点的y横向距离						
ox=""				      偏移							
oy=""				      偏移							
rotate="0.0"			  插入元素显示时旋转度数							
width=""				  插入元素的显示宽度		      
height=""				  插入元素的显示高度
height=""				  插入元素的显示高度			
minwidth="0"		
maxwidth="0"		
minheight="0"		
maxheight="0"							
scale="1.0"				  插入元素的缩放比例							
pixelhittest="false"	  仅flash							
smoothing="true"		  平滑(仅flash)
accuracy="0"			  精度							
alpha="1.0"				  插入元素的不透明度							
autoalpha="false"		  自动透明度							
usecontentsize="false"	  满画布(仅flash)							
scale9grid=""			  定义9格网格（scale9grid="x-position|y-position|widt h|height|prescale*"）							
crop=""					  定义元素坐标及宽高(crop="x-position|y-positio n|width|height")
onovercrop=""			  设置元素鼠标移到上方后的坐标及宽高	
ondowncrop=""			  设置元素鼠标按下状态后的坐标及宽高	
mask=""				      遮罩(仅flash)							
effect=""				  位图效果适用于层/插件的形象(仅flash)
bgcolor="0x000000"		  type="container"状态下的背景颜色，非container 状态下无效
bgalpha="0.0"			  背景不透明度							
bgborder="0"			 （bgborder="widths  color  alpha"）	
bgroundedge="0"							
bgshadow=""				  （bgshadow="xoffset  yoffset  blur  color  alpha"）
bgcapture="false"		  是否捕抓在背景容器上事件（type="container"状态 下生效）	
onover=""				  鼠标在经过上方时执行动作
onhover=""				  鼠标停在上方时执行动作	
onout=""				  鼠标停移出范围时时执行动作		
onclick=""				  鼠标停点击时执行动作					
ondown=""				  鼠标按下时执行动作						
onup=""					  鼠标按键松开时执行动作							
onloaded=""				  加载元素完成后执行动作							

复制：copy(date,scene[get(xml.scene)].date);

连接符：calc(‘crop_anim_’ + date)；

取值：get(view.hlookat)；

赋值：set(hotspot[yehuag].rx, %1)；