具体详看,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>