krpano简单操作，当前位置添加热点，加载某xml文件,设置随机视图，跟踪鼠标位置等。例如

最新推荐文章于 2023-10-11 20:13:18 发布

码农-Python小高

最新推荐文章于 2023-10-11 20:13:18 发布

阅读量2.4k

点赞数 2

分类专栏： Krpano

本文链接：https://blog.csdn.net/weixin_44541001/article/details/104027625

版权

Krpano 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

具体详看，https://blog.csdn.net/weixin_44541001/article/details/104027496，包括文件来源等
例子：
在这里插入图片描述

Krpano.hml文件内容，里边路径根据自己情况修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>krpano Javascript API Examples</title>
	<meta name="viewport" content="width=500, initial-scale=0.64, minimum-scale=0.64" />
	<style>
		body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; -webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none; }
		.button{ display:inline-block; border:1px solid gray; border-radius:1px; cursor:pointer; padding:4px 8px; margin:4px 0; user-select:none; -moz-user-select:none; }
		.button:hover{ background-color:#EEEEEE; }
	</style>
</head>
<body>

<div id="pano" style="width:480px; height:320px; border:1px solid gray;"></div>


<div class="button" onclick="loadpano('tour.xml');">加载 tour.xml</div>
<div class="button" onclick="loadpano('tour1.xml');">加载  tour1.xml</div>
<div class="button" onclick="loadxmlstring();">加载 xml string</div><br>
<div class="button" onclick="randomview_set();">设置随机视图</div><br>
<div class="button" onclick="randomview_lookto();">动画外观到随机视图</div><br>
<div class="button" onclick="get_current_view();">获取当前视图</div> <span id="currentview" style="padding-left:16px; font-family:monospace;"></span><br>
<div class="button" onclick="add_hotspot();">在当前位置添加热点</div>
<div class="button" onclick="remove_all_hotspots();">删除所有热点</div><br>
<div class="button" onclick="track_mouse();">跟踪鼠标位置</div> <span id="mousepos" style="padding-left:16px; font-family:monospace;"></span><br>


<script src="./viewer/krpano.js"></script>

<script>

	var krpano = null;

	embedpano({
		swf : "krpano.swf",
		id : "krpanoSWFObject",
		xml : "tour.xml",
		target : "pano",
		consolelog : true,
		passQueryParameters : true,
		onready : krpano_onready_callback
	});


	function krpano_onready_callback(krpano_interface)
	{
		krpano = krpano_interface
	}



	function loadpano(xmlname)
	{
		// if (krpano)
		// {
		// 	krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));");
		// }
        krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));");
        krpano.call("loadscene('scene_1575078862')");
	}

	function loadxmlstring()
	{
		if (krpano)
		{
			var xmlstring =
				'<krpano>'+
				'<preview type="grid(cube,64,64,512,0xCCCCCC,0xF6F6F6,0x999999);" />'+
				'<view hlookat="0" vlookat="0" fov="100" distortion="0.0" />'+
				'</krpano>';

			krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");
		}
	}

	function randomview_set()
	{
		if (krpano)
		{
			krpano.set("view.hlookat", Math.random() * 360.0 - 180.0 );
			krpano.set("view.vlookat", Math.random() * 180.0 - 90.0 );
			krpano.set("view.fov", 80.0 + Math.random() * 100.0 );
			krpano.set("view.distortion", Math.random() * 1.0 );
		}
	}

	function randomview_lookto()
	{
		if (krpano)
		{
			krpano.call("lookto(" + (Math.random() * 360.0 - 180.0) + "," + (Math.random() * 180.0 - 90.0) + "," + (80.0 + Math.random() * 100.0) + ")");
		}
	}

	function get_current_view()
	{
		if (krpano)
		{
			var hlookat = krpano.get("view.hlookat");
			var vlookat = krpano.get("view.vlookat");
			var fov = krpano.get("view.fov");
			var distortion = krpano.get("view.distortion");
			document.getElementById("currentview").innerHTML =
				'hlookat="' + hlookat.toFixed(2) + '" '+
				'vlookat="' + vlookat.toFixed(2) + '" '+
				'fov="' + fov.toFixed(2) + '" '+
				'distortion="' + distortion.toFixed(2) + '"';
		}
	}

	function add_hotspot()
	{
		if (krpano)
		{
			var h = krpano.get("view.hlookat");
			var v = krpano.get("view.vlookat");
			var hs_name = "hs" + ((Date.now() + Math.random()) | 0);	// create unique/randome name
			krpano.call("addhotspot(" + hs_name + ")");
			krpano.set("hotspot["+hs_name+"].url", "vtour.png");
			krpano.set("hotspot["+hs_name+"].ath", h);
			krpano.set("hotspot["+hs_name+"].atv", v);
			krpano.set("hotspot["+hs_name+"].distorted", true);

			if ( krpano.get("device.html5") )
			{
				// for HTML5 it's possible to assign JS functions directly to krpano events
				krpano.set("hotspot["+hs_name+"].onclick", function(hs)
				{
					alert('hotspot "' + hs + '" clicked');

				}.bind(null, hs_name));
			}
			else
			{
				// for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
				krpano.set("hotspot["+hs_name+"].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
			}
		}
	}

	function remove_all_hotspots()
	{
		if (krpano)
		{
			krpano.call("loop(hotspot.count GT 0, removehotspot(0) );");
		}
	}

	var track_mouse_enabled = false;
	var track_mouse_interval_id = null;

	function track_mouse_interval_callback()
	{
		var mx = krpano.get("mouse.x");
		var my = krpano.get("mouse.y");
		var pnt = krpano.screentosphere(mx,my);
		var h = pnt.x;
		var v = pnt.y;
		document.getElementById("mousepos").innerHTML = 'x="' + mx + '" y="' + my + '" ath="' + h.toFixed(1) + '" atv="' + v.toFixed(1) + '"';


		var hlookat = krpano.get("view.hlookat");
		var vlookat = krpano.get("view.vlookat");
		var fov = krpano.get("view.fov");
		var distortion = krpano.get("view.distortion");
		document.getElementById("currentview").innerHTML =
			'hlookat="' + Math.abs(hlookat.toFixed(2))%360 + '" '+
			'vlookat="' + vlookat.toFixed(2) + '" '+
			'fov="' + fov.toFixed(2) + '" '+
			'distortion="' + distortion.toFixed(2) + '"';

	}

	function track_mouse()
	{
		if (krpano)
		{
			if (track_mouse_enabled == false)
			{
				// enable - call 60 times per second
				track_mouse_interval_id = setInterval(track_mouse_interval_callback, 1000.0 / 60.0);

				track_mouse_enabled = true;
			}
			else
			{
				// disable
				clearInterval(track_mouse_interval_id);
				document.getElementById("mousepos").innerHTML = "";

				track_mouse_enabled = false;
			}
		}
	}

</script>


</body>
</html>

码农-Python小高

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
krpano简单操作，当前位置添加热点，加载某xml文件,设置随机视图，跟踪鼠标位置等。例如

具体详看，https://blog.csdn.net/weixin_44541001/article/details/104027496，包括文件来源等例子：Krpano.hml文件内容，里边路径根据自己情况修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫