官方文檔鏈接

• https://krpano.com/docu/js/#top

例子

• https://krpano.com/releases/1.22/viewer/examples/javascript-interface/js-api-examples.html

• https://krpano.com/viewsource.html?releases/1.22/viewer/examples/javascript-interface/js-api-examples.html

注意點

文件路徑

它是以首次獲取的tour.js為根目錄。后面xml里是xml為根目錄

完整代碼

//disasterpano.vue
<template><div><h1>krpano Javascript API Examples (Version 1.22)</h1><div id="localusagenote" style=" display:none;"><b>NOTE:</b>Start this example from a local server like the <a href="https://krpano.com/tools/testingserver/#top" target="_blank" style="color:red;">krpano Testing Server</a>and select the root folder of the krpano Download Package as server folder!<br>If using the example locally on a <u>file://</u> url or with another server folder,it might be not possible to access the files that are used by the examples(depending on the <a href="https://krpano.com/docu/localusage/#top" target="_blank" style="color:red;">Browser settings</a>).</div><div id="content"><div id="pano"></div><div id="buttons" style="pointer-events:none; user-select:none; opacity:0.0; transition:opacity 1.0s ease-out;">Loading panos:<br><div class="button" @click="loadxmlfile()">load xml file</div><br><div class="button" @click="loadxmlstring()">load xml string</div><br><div class="button" @click="loadimage()">load image (single-res)</div><br><div class="button" @click="loadimage_mres()">load image (multi-res)</div><br><div class="button" @click="loadimage_partial()">load image (partial-pano)</div><br><!--        <div class="button" onclick="loadimage_3dmodel()">load image (3D-model)</div><br>--><!--        <br>--><!--        Changing the view:<br>--><!--        <div class="button" onclick="reset_view()">Reset view</div><br>--><!--        <div class="button" onclick="randomview_set()">Set a Random view</div><br>--><!--        <div class="button" onclick="randomview_lookto()">Animated Look-to a Random view</div><br>--><!--        <br>--><!--        Hotspots:<br>--><!--        <div class="button" onclick="add_hotspot()">Add a Hotspot at the looking position</div><br>--><!--        <div class="button" onclick="add_hotspot_on_next_click()">Add a Hotspot at the click position</div><br>--><!--        <div class="button" onclick="add_poly_hotspot()">Add Polygonal Hotspot</div><br>--><!--        <div class="button" onclick="remove_all_hotspots()">Remove all hotspots</div><br>--><!--        <br>--><!--        Layers:<br>--><!--        <div class="button" onclick="textfield_template()">Add a Textfield with a template</div><br>--><!--        <div class="button" onclick="layers_colormixer_demo()">A Simple Color-Mixer as Demo</div><br>--><!--        <br>--><!--        Plugins:<br>--><!--        <div class="button" onclick="plugin_soundinterface_demo()">Soundinterface Demo</div><br>--><!--        <div class="button" onclick="plugin_videoplayer_demo()">Videoplayer Demo</div><br>--><!--        <div class="button" onclick="plugin_postprocessing_demo()">Postprocessing Demo</div><br>--></div></div></div>
</template>
<script setup>
// import { embedpano } from "@/assets/krpano/tour.js"
import {onMounted, ref, markRaw} from "vue";// a global 'krpano' variable (will be set in the embedpano.onready callback)
// open the Browsers developer tools and type 'krpano' for directly playing with it
const krpano = ref(null);const setup = () => {// show a note when opening that example directly from a local file:// urlif ( location.protocol === "file:" ){document.getElementById("localusagenote").style.display = "";}// 檢查embedpano函數是否存在，如果不存在則嘗試從krpanoJS獲取if (typeof window.embedpano !== 'function') {if (typeof window.krpanoJS !== 'undefined' && typeof window.krpanoJS.embedpano === 'function') {window.embedpano = window.krpanoJS.embedpano;} else {console.error('embedpano function not found. Make sure krpano library is loaded.');return;}}// embed the krpano viewerwindow.embedpano({target : document.getElementById("pano"), 	// embed the krpano viewer into the 'pano' div elementconsolelog : true,							// log the krpano messages also to the Browser console//bgcolor : "transparent",					// optionally: use a transparent background (for seeing the webpage behind 3D-models or partial panos)onready : function(krpanointerface){krpano.value = markRaw(krpanointerface);// enable the debugmode and handle all JS errors in the Browsers consolekrpano.value.debugmode = true;krpano.value.debugjsactions = true;krpano.value.debugjsplugins = true;// add a grid pano (with custom colors)krpano.value.image.preview = {type:"grid(cube,64,64,512,0xCCAA00,0x222222)"};// add an intro info textvar info = krpano.value.addlayer();info.setvars({type:"text", align:"center", text:"krpano is ready...", bg:false, css:"color:white;font-size:14px;font-weight:bold;"});info.onclick = function(){// disable the layer to avoid getting additional clicks during the animationinfo.enabled = false;// do an animation and remove the layerkrpano.value.tween(info, {scale:10,alpha:0}, 0.5, "smooth", function(){ info.remove(); });}// enable the example buttons nowvar buttons = document.getElementById("buttons");buttons.style.pointerEvents = "auto";buttons.style.opacity = 1.0;}});
}// examples
const tour = new URL('@/assets/krpano/demotour-corfu/tour.xml', import.meta.url).href
const loadxmlfile= ()=>
{console.log( tour)// load a tour xml fileif (krpano.value && krpano.value.actions) {krpano.value.actions.loadpano(tour, null, "RESET");} else {console.error('krpano not ready or actions not available');}
}const loadxmlstring= ()=>
{// load a xml as stringvar xmlstring =`<krpano><image><preview url="/src/assets/krpano/webvr/panos/intro/preview.jpg" /><cube url="/src/assets/krpano/webvr/panos/intro/pano_%s.jpg" /></image><view hlookat="0" vlookat="0" fov="100" /></krpano>`;if (krpano.value && krpano.value.actions) {krpano.value.actions.loadxml(xmlstring, null, "RESET", "BLEND(0.35)");} else {console.error('krpano not ready or actions not available');}
}const loadimage= ()=>
{if (krpano.value && krpano.value.actions && krpano.value.image) {// load a spherical image directlykrpano.value.image.reset();krpano.value.image.sphere = {url:"/src/assets/krpano/depthmap/depthmap-images/pano1.jpg"};krpano.value.actions.loadpanoimage("RESET", "BLEND(0.35)");krpano.value.actions.lookat(30,0,100);} else {console.error('krpano not ready or actions/image not available');}
}const loadimage_mres= ()=>
{if (krpano.value && krpano.value.actions && krpano.value.image) {// load images directly from the krpano cloudfront tile-serverkrpano.value.image.reset();krpano.value.image.preview = {url:"https://d8d913s460fub.cloudfront.net/tours/paris/panos/a.tiles/preview.jpg"};krpano.value.image.cube = {url:"https://d8d913s460fub.cloudfront.net/tours/paris/panos/a.tiles/l%l_%s_%v_%h.jpg", multires:"512|768|1536|3072|6144|12409"};krpano.value.actions.loadpanoimage("RESET", "BLEND(0.35)");// add a contextmenu with different projection settingskrpano.value.actions.includexml("/src/assets/krpano/plugins/contextmenu.xml");} else {console.error('krpano not ready or actions/image not available');}
}const loadimage_partial= ()=>
{if (!krpano.value || !krpano.value.actions || !krpano.value.image) {console.error('krpano not ready or actions/image not available');return;}if (krpano.value.display.istransparent == false){// unload and embed again with enabled transparent supportvar embeddingparameters = krpano.value.embeddingparameters;var old_onready = embeddingparameters.onready;embeddingparameters.bgcolor = "transparent";embeddingparameters.onready = function(krpanointerface){krpano.value = markRaw(krpanointerface);if(old_onready){ old_onready(krpanointerface); };loadimage_partial();};krpano.value.unload();// 檢查embedpano函數是否存在if (typeof window.embedpano === 'function') {window.embedpano(embeddingparameters);} else {console.error('embedpano function not found during reload.');}return;}// load a 'partial' (non 360x180) panokrpano.value.image.reset();krpano.value.image.preview = {url:"/src/assets/krpano/partialpano/tiles/preview.jpg"};krpano.value.image.sphere = {url:"/src/assets/krpano/partialpano/tiles/l%l/%0v/l%l_%0v_%0h.jpg", multires:"512,3072x928,6144x1854"};krpano.value.image.hfov = 156.0;krpano.value.image.vfov = 47.0;krpano.value.image.voffset = 9.0;krpano.value.actions.loadpanoimage("RESET", "BLEND(0.35)");// disable the viewing limits to better see the partial pano rangeskrpano.value.view.limitview = "off";// add a contextmenu with different projection settingskrpano.value.actions.includexml("/src/assets/krpano/plugins/contextmenu.xml");// add a helper script for changing the partial pano fov settingskrpano.value.actions.includexml("/src/assets/krpano/partialpano/partialpano_helpertool.xml", null, function(){});// add an other krpano viewer behind the current viewer one// to display a grid-pano behind the partial pano and sync its movements{var bg = krpano.value.addlayer();bg.setvars({type:"krpano",width:"100%",height:"100%",parent:"BGLAYER"});bg.onloaded = function(){bg.krpano.image.reset();bg.krpano.image.preview = {type:"grid(cube,64,64,512,0xAA9900,0x222222)"};bg.krpano.actions.loadpanoimage();// sync the viewkrpano.value.events.addListener("onviewchange", function(){bg.krpano.view.syncto( krpano.value.view );})}}
}onMounted(() => {setup()
})
</script>
<style scoped>h1{ color:white; font-size:16px; margin-top:0; }
#localusagenote{ background:white; border:1px solid red; border-radius:5px; color:red; padding:8px; margin:20px 16px 20px 0; }
#content { flex:1; display:flex; overflow:auto; }
#pano { width: 100vw; height: 100vh; flex:auto; border:1px solid #FFF; border-radius:11px; overflow:hidden; box-shadow:0px 3px 14px rgba(0,0,0,0.5); }
#buttons { padding:0 16px; overflow:auto; }
.button{ background:#fff; color:#245; display:inline-block; border:1px solid #333; border-radius:5px; box-shadow:0px 1px 3px rgba(0,0,0,0.3); cursor:pointer; padding:4px 8px; margin:4px 0; user-select:none; -moz-user-select:none; }
.button:hover{ background-color:#EEEEEE; }/* mobile layout */
@media (max-width:500px)
{#content{ flex-direction:column;  }#pano{ min-height:60vh; }#buttons { padding: 0; margin-top:16px;  }
}/* workaround for a Firefox bug:- backdrop-blur effects don't work when the container has a border-radius:- https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox
*/
@-moz-document url-prefix(){ #pano{ border-radius:0px; } }
</style>

...
<script src="/src/assets/krpano/tour2.js"></script>
...

目錄結構