Krpano 全景圖簡單製做

Krpano 全景圖簡單製做

廢話很少說，先來看看官網的demo效果怎麼樣吧

官網demo

全景圖製做要求

• 圖片要求 寬是高的2倍圖
• 航拍圖 地埋圖
• 下載 krpano Tools
• 軟件破解碼

主思路

• 添加熱點
• 主界面的場景跳轉
• 主界面與子界面間的跳轉

VTour Editor 操做：

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		# 打開訪問文件夾
複製代碼

fullscreen			# 全屏幕
Change Controlmode		# 改變控制方式
Normal View			# 標準視圖
Fisheye View			# 魚眼視圖
Stereographic View		# 立體視圖
Architectural View		# 架構視圖
Pannini View			# 局部視圖
Little Planet View		# 小星球視圖
複製代碼

vtour 文件夾簡介：

vtour/
-- panos/			# 存放全景切片圖片的文件夾
-- skin/			# 存放皮膚相關文件
-- plugins/			# 用來存放插件
-- tour.swf			# krpano flash viewer
-- tour.js           		# krpano HTML5 viewer
-- tour.xml             	# 生成全景的相關配置
-- tour.html            	# 用來瀏覽全景的頁面，須要本地服務環境
-- tour_editor.html     	# 添加熱點（hotspot）與初始化視角的設置
複製代碼

vtour 運做機制

<div id="pano"></div>
<script src="tour.js"></script>
<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>
複製代碼

Krpano skin_settings 解釋

<skin_settings maps="false" 是否顯示地圖按鈕； maps_type="google" 地圖類型； maps_bing_api_key="" bing地圖受權key； maps_google_api_key="" 谷歌地圖受權key； maps_zoombuttons="false" 地圖是否顯示縮放按鈕； gyro="true" 是否默認打開重力陀螺儀； webvr="true" 是否顯示vr按鈕； webvr_gyro_keeplookingdirection="false" 是否陀螺儀狀態下默認跟隨場景域默認視角； webvr_prev_next_hotspots="true" 是否vr狀態下顯示上下場景按鈕； littleplanetintro="false" 是否默認啓動小行星效果； title="true" 是否皮膚顯示標題； thumbs="true" 是否顯示縮略圖皮膚； thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" 縮略圖寬高和截取大小； 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)" 進入下一場景過渡效果； loadingtext="loading..." 設置讀取中狀態的提示文字信息； layout_width="100%" 系統皮膚默認寬度； layout_maxwidth="814" 系統皮膚最大寬度； controlbar_width="-24" 控制工具條寬度； controlbar_height="40" 控制工具條高度； controlbar_offset="20" 控制工具條偏移量； controlbar_offset_closed="-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皮膚文字陰影偏移值； />

複製代碼

krpano XML 結構與簡介

<krpano>
    <include>
    <preview>
    <image>
    <view>
    <area>
    <display>
    <control>
    <cursors>
    <autorotate>
    <plugin>
    <layer>
    <hotspot>
    <style> <events> <action> <contextmenu> <network> <memory> <security> <textstyle> <lensflareset> <lensflare> <data> <scene> </krpano> 複製代碼

krpano XML結構目錄（Krpano 內置元素說明）

#1.  krpano
krpano 元素是 krpano xml 文件的根元素，任何一個krpano xml文件的其餘元素都要被krpanoui元素所嵌套

#2.  include
include 元素用來引入其餘 xml 文件的內容。例如咱們常要用到的vtourskin.xml 就是使用 include 嵌入到主 xml 中。

#3.   preview
預覽圖設置，也就是全景圖徹底載入以前的模糊圖像。由於體積較小，所以載入速度較快，會在全景圖以前先載入，避免黑屏。

#4.image
image 元素用來設置全景圖，包括全景圖類型，漸進分辨率切片顯示等。

#5.view
view 元素控制全景的視野，例如起始視角、視角限制與縮放等等。當要設置限制視角或設定特定的初始視角時，須要自行設定或使用插件獲取代碼。

#6.area
area 元素控制全景圖在瀏覽器窗口中顯示區域大小。

#7.display
控制全景圖的顯示品質。

#8.control
設置鼠標、鍵盤以及觸摸設備對全景瀏覽的控制方式。

#9.cursors
設置鼠標光標樣式。

#10.autorotate
控制自動旋轉。

#11.plugin
用來調用插件、插入圖片或生成容器。

#12.layer
與 plugin 做用相同，只是名稱不一樣。

#13.hotspot
熱點，可在 3D 空間中插入圖片，使之隨着 3D 空間一同運動，可製做不少特效。

#14.style
能夠保存其它元素的屬性子集。

#15.events
可調用各種型事件，例如全景載入的不一樣階段以及鼠標觸發的不一樣行爲等。

#16.action
自定義動態代碼。

#17.contextmenu
定義右鍵菜單的內容。

#18.network
控制圖像的下載、緩存與解碼。

#19.menory
控制全景圖在設備中的存儲。

#20.security
Flashplayer 和 HTML5 相關的安全/跨域設置。

#21.lensflareset
鏡頭眩光的設置（目前只能在 flash 下使用）。

#22.lensflare
生成鏡頭眩光（目前只能在 flash 下使用）。

#23.data
可放置任意的數據。

#24.scene
可放置任意 krpano 元素。每一個 scene 元素只有在被 loadscene 時纔會被載入到瀏覽器進行解析。
複製代碼

經常使用設置

• 小行星開場

# 開啓小行星，先找到 tour.xml ，而後搜索 littleplanetintro 將其值設置爲 true 便可。
<skin_settings ... littleplanetintro="true" ... />
複製代碼

• 加載動畫

# 在官方的案例文件夾中找到loading-progress這個文件夾，將須要的文件內容複製到項目中的 skin 文件夾，而後在 tour.xml 文件中引入該文件便可，這樣從新打開就能夠看到有動態的進度條了。
<include url="skin/loadingbar.xml" />
複製代碼

• 修改右鍵菜單

# 找到引入的皮膚文件，默認在 vtourskin.xml ，而後修改下面這些地方便可自定義右鍵菜單，但像版權、全屏菜單即便刪除也會存在。
<contextmenu>
    <item name="fv" caption="魚眼視圖" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" separator="true" />
</contextmenu>
複製代碼

caption    	# 右鍵菜單顯示的文字；
onclick 	# 控制點擊後執行的動做，動做由action 定義；
showif  	# 顯示條目的條件；
devices		# 控制在flash/webgl 哪一個模式中出現；
separator	# 顯示分隔符來分隔菜單；
複製代碼

tour.html

<!DOCTYPE html>
<html>

<head>
  <title>重啓禮嘉智慧公園</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="x-ua-compatible" content="IE=edge" />
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style> @-ms-viewport { width: device-width; } @media only screen and (min-device-width: 800px) { html { overflow: hidden; } } html { height: 100%; } body { height: 100%; overflow: hidden; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; background-color: #000000; } #backDiv { position: absolute; top: 2%; left: 1%; z-index: 100; display: none; } .backC { width: 30%; /* box-shadow: 0px 0px 10px 2px white; */ border-radius: 2rem; /* border: 1px solid white; */ } </style>
</head>

<body id="hehe">
  <script src="tour.js"></script>
  <div id="backDiv" onclick="backFun()">
    <img class="backC" src="./static/img/close_3.png" alt="" />
  </div>
  <div id="pano" style="width:100%;height:100%;">
    <noscript>
      <table style="width:100%;height:100%;">
        <tr style="vertical-align:middle;">
          <td>
            <div style="text-align:center;">
              ERROR:<br /><br />Javascript not activated<br /><br />
            </div>
          </td>
        </tr>
      </table>
    </noscript>
    <script> var krpano = null; var backname = ""; var backxml = "tour.xml"; // 主頁面 var embexml = ""; var embeswf = ""; if (window.location.search.indexOf("krpanoXml") != -1) { let urlname = window.location.search; urlname = urlname.substring( urlname.lastIndexOf("=") + 1, urlname.length ); console.log("全景xml:" + urlname); embexml = urlname + ".xml"; embeswf = urlname + ".swf"; } else { embexml = "tour.xml"; embeswf = "tour.swf"; } embedpano({ swf: embeswf, xml: embexml, target: "pano", html5: "auto", mobilescale: 1.0, passQueryParameters: true, onready: krpano_onready_callback }); function krpano_onready_callback(krpano_interface) { krpano = krpano_interface; } window.onload = function () { console.log("加載完成"); }; function initAddNum() { // 監聽iframe點擊事件 window.parent.postMessage({ //參數是對象 params: 3, }, '*'); }; function loadpano(xmlname, sceneName, parentName) { if (krpano) { // 監聽iframe點擊事件 window.parent.postMessage({ //參數是對象 params: 2, }, '*'); backname = parentName; console.log(parentName); if (xmlname != "back") { // 動態切換xml，xmlname爲tour.xml傳過來的值 IGNOREKEEP krpano.call( "loadpano(" + xmlname + ", null, IGNOREKEEP, BLEND(1));" ); //sceneName爲切換後加載的第一個場景 if ( sceneName != "" && sceneName != null && sceneName != undefined ) { krpano.call("loadscene('" + sceneName + "')"); } document.getElementById("backDiv").style.display = "block"; } else { // 當值爲back時，存儲最新load場景,考慮到在xml中實現點擊事件 console.log("即將要返回:" + backname); backname = ""; document.getElementById("backDiv").style.display = "none"; } } } function backFun() { console.log("即將要返回:" + backname); // 動態切換xml，xmlname爲tour.xml傳過來的值 IGNOREKEEP krpano.call("loadpano(" + backxml + ", null, IGNOREKEEP, BLEND(1));"); krpano.call("loadscene('" + backname + "')"); backname = ""; document.getElementById("backDiv").style.display = "none"; } // 監聽iframe點擊事件 document.body.addEventListener("touchstart", function () { window.parent.postMessage({ //參數是對象 params: 1, }, '*'); }) </script>
  </div>
</body>

</html>
複製代碼

tour.xml

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />

	<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="true" maps_type="google" maps_bing_api_key="" maps_google_api_key="" maps_zoombuttons="false" gyro="true" webvr="true" webvr_gyro_keeplookingdirection="false" webvr_prev_next_hotspots="true" littleplanetintro="true" title="true" thumbs="true" thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" 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)" loadingtext="loading..." layout_width="100%" layout_maxwidth="814" controlbar_width="-24" controlbar_height="40" controlbar_offset="20" controlbar_offset_closed="-40" controlbar_overlap.no-fractionalscaling="10" controlbar_overlap.fractionalscaling="0" design_skin_images="vtourskin.png" design_bgcolor="0x2D3E50" design_bgalpha="0.8" design_bgborder="0" design_bgroundedge="1" design_bgshadow="0 4 10 0x000000 0.3" design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_thumbborder_padding="2" design_thumbborder_bgroundedge="0" design_text_css="color:#FFFFFF; font-family:Arial;" design_text_shadow="1" />

	<!-- For an alternative skin design either change the <skin_settings> values from above or optionally include one of the predefined designs from below. -->
	<!-- <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" /> -->


	<!-- startup action - load the first scene -->
	<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>
	<action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate">
		<!-- 定義局部變量 -->
		calc(local.xframes, (caller.imagewidth /framewidth) BOR 0);
		calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0));
		def(local.frame, integer, 0);
		
		<!-- 設置第一幀 -->
		calc(caller.crop, '0|0|' + framewidth + '|' + frameheight);
		
		<!-- 動畫部分 -->
		setinterval(calc('crop_anim_' + caller.name), calc(1.0 / framerate),
			if(caller.loaded,
				inc(frame);
				if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
				mod(xpos, frame, xframes);
				div(ypos, frame, xframes);
				Math.floor(ypos);
				mul(xpos, framewidth);
				mul(ypos, frameheight);
				calc(caller.crop, xpos + '|' + ypos + '|' + framewidth + '|' + frameheight);
			,
				<!-- 當熱點移除時中止動畫 -->
				clearinterval(calc('crop_anim_' + caller.name));
			);
		);
	</action>
	<!-- 使文字一直顯示 -->
	<action name="add_all_the_time_tooltip">
				txtadd(tooltipname, 'tooltip_', get(name));
				addplugin(get(tooltipname));
				txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
				set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
				set(plugin[get(tooltipname)].align,top);
				set(plugin[get(tooltipname)].edge,bottom);
				set(plugin[get(tooltipname)].x,0);
				set(plugin[get(tooltipname)].y,0);
				set(plugin[get(tooltipname)].autowidth,true);
				set(plugin[get(tooltipname)].autoheight,true);
				set(plugin[get(tooltipname)].vcenter,true);
				set(plugin[get(tooltipname)].background,true);
				set(plugin[get(tooltipname)].backgroundcolor,0x000000);
				set(plugin[get(tooltipname)].roundedge,5);
				set(plugin[get(tooltipname)].backgroundalpha,0.65);
				set(plugin[get(tooltipname)].padding,5);
				set(plugin[get(tooltipname)].border,false);
				set(plugin[get(tooltipname)].glow,0);
				set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
				set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei;  font-size:24px;');
				if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;');
					);
				set(plugin[get(tooltipname)].textshadow,0);
				set(plugin[get(tooltipname)].textshadowrange,6.0);
				set(plugin[get(tooltipname)].textshadowangle,90);
				if(text == '' OR text === null,
				copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title),
				copy(plugin[get(tooltipname)].html,text)
				);    
				set(plugin[get(tooltipname)].enabled,false);	
	</action>


	
	<scene name="scene_5Gguan" title="5Gguan" onstart="" havevrimage="true" thumburl="panos/5Gguan.tiles/thumb.jpg" lat="29.68432289" lng="106.48701158" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/5Gguan.tiles/preview.jpg" />

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6656" tiledimageheight="6656">
				<cube url="panos/5Gguan.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3328" tiledimageheight="3328">
				<cube url="panos/5Gguan.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/5Gguan.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/5Gguan.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/5Gguan.tiles/vr/pano_%s.jpg" />
		</image>
		<!-- js(loadpano('5Gguan_A1.xml','scene_5Gguan_A1','scene_5Gguan');) -->
		<!-- 點擊js裏的loadpano方法，傳入導入的新的場景xml, 和打開後先顯示那張全景圖，父元素 點擊的哪一個全景圖標點 -->
		<!-- onloaded 添加文字 -->
		<hotspot name="spot1" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="藝趣館" style="skin_hotspotstyle" ath="-7.904" atv="5.570" linkedscene="scene_alijishi" />
		<hotspot name="spot2" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G(B館)" onclick="js(loadpano('5Gguan_B1.xml','scene_5Gguan_B1','scene_5Gguan')););" style="skin_hotspotstyle" ath="-13.711" atv="19.631" linkedscene="scene_5gguan" />
		<hotspot name="spot3" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G導覽館" style="skin_hotspotstyle" ath="-28.976" atv="29.409" linkedscene="scene_5gguan" />
		<hotspot name="spot4" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="5G(A)館" onclick="js(loadpano('5Gguan_A1.xml','scene_5Gguan_A1','scene_5Gguan'););" style="skin_hotspotstyle" ath="-41.195" atv="26.151" linkedscene="scene_5gguan" />
		<hotspot name="spot5" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="智慧涼道" style="skin_hotspotstyle" ath="81.056" atv="21.022" linkedscene="scene_5gguan" />
		<hotspot name="spot6" onloaded="onloaded=do_crop_animation(64,64, 60);add_all_the_time_tooltip()" text="南區入口" style="skin_hotspotstyle" ath="111.991" atv="3.309" linkedscene="scene_nanqurukou" />

	</scene>

	<scene name="scene_alijishi" title="alijishi" onstart="" havevrimage="true" thumburl="panos/alijishi.tiles/thumb.jpg" lat="29.68975925" lng="106.47939483" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

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

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/alijishi.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/alijishi.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/alijishi.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/alijishi.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/alijishi.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="-69.359" atv="49.605" linkedscene="scene_alijishi" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="23.137" atv="-2.529" linkedscene="scene_lanshantai" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="161.374" atv="11.457" linkedscene="scene_alijishi" />

	</scene>

	<scene name="scene_lanshantai" title="lanshantai" onstart="" havevrimage="true" thumburl="panos/lanshantai.tiles/thumb.jpg" lat="29.68784572" lng="106.48623036" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

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

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/lanshantai.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/lanshantai.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/lanshantai.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/lanshantai.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/lanshantai.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="82.728" atv="-0.907" linkedscene="scene_nanqurukou" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="90.341" atv="21.947" linkedscene="scene_lanshantai" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="104.469" atv="7.923" linkedscene="scene_lanshantai" />
		<hotspot name="spot4" style="skin_hotspotstyle" ath="112.568" atv="6.765" linkedscene="scene_lanshantai" />
		<hotspot name="spot5" style="skin_hotspotstyle" ath="-130.843" atv="-3.067" linkedscene="scene_alijishi" />

	</scene>

	<scene name="scene_nanqurukou" title="nanqurukou" onstart="" havevrimage="true" thumburl="panos/nanqurukou.tiles/thumb.jpg" lat="29.68277575" lng="106.49037431" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

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

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6656" tiledimageheight="6656">
				<cube url="panos/nanqurukou.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3328" tiledimageheight="3328">
				<cube url="panos/nanqurukou.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/nanqurukou.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/nanqurukou.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/nanqurukou.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="-38.009" atv="12.592" linkedscene="scene_nanqurukou" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="-30.692" atv="28.110" linkedscene="scene_nanqurukou" />
		<hotspot name="spot3" style="skin_hotspotstyle" ath="-20.911" atv="27.386" linkedscene="scene_nanqurukou" />
		<hotspot name="spot4" style="skin_hotspotstyle" ath="-30.077" atv="1.173" linkedscene="scene_nanqurukou" />
		<hotspot name="spot5" style="skin_hotspotstyle" ath="-22.638" atv="0.127" linkedscene="scene_nanqurukou" />

	</scene>

	<scene name="scene_yunshangtiyanzhongxin" title="yunshangtiyanzhongxin" onstart="" havevrimage="true" thumburl="panos/yunshangtiyanzhongxin.tiles/thumb.jpg" lat="29.68852506" lng="106.47723556" heading="0.0">

		<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

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

		<image type="CUBE" prealign="0|0.0|0" multires="true" tilesize="512" if="!webvr.isenabled">
			<level tiledimagewidth="6400" tiledimageheight="6400">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="3200" tiledimageheight="3200">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="1664" tiledimageheight="1664">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
			</level>
			<level tiledimagewidth="768" tiledimageheight="768">
				<cube url="panos/yunshangtiyanzhongxin.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
			</level>
		</image>

		<image prealign="0|0.0|0" if="webvr.isenabled">
			<cube url="panos/yunshangtiyanzhongxin.tiles/vr/pano_%s.jpg" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="63.014" atv="48.629" linkedscene="scene_yunshangtiyanzhongxin" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="104.532" atv="2.607" linkedscene="scene_alijishi" />

	</scene>


</krpano>
複製代碼

做者：遠航
連接：https://juejin.cn/post/6903693990781321230
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。
複製代碼