记录Krpano在3D全景上的初次试探

简介: 突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。经过一番调查,最终锁定了以前从未接触过的krpano。
最近在学习虚拟漫游,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些图片,然后预览啥的,效果还是要全景的效果。

经过一番调查,最终锁定了以前从未接触过的krpano.

Krpano 是目前比较流行、传播比较广的关于制作虚拟漫游的一款软件,当然这个也是一个框架,算是工具和框架集合的一个东西。

至于通过krpano做出来的效果,先放个链接:Krpano Demo ,大家可以看下这个demo ,了解下具体的一些能够实现的效果,当然,例子不仅仅只有这一个,还有很多。不过对于我来说,这个就足够了。

下面简单记录下自己了解和初步实现的步骤:

准备

  1. 需要简单了解下全景方面的只是
  2. 有一款xml编辑器,当然个人使用的是sublime
  3. 对前台开发稍微了解一点点就行,主要是用来改别人的东西的时候能大体知道是做什么的

下载Krpano

官网下载地址:https://krpano.com/download/

当然,官网下载的是最新的,需要license,本人苦逼一个,还是去CSDN自己找了下其他版本的下载用的,不过后面发现无所谓。

了解Krpano

下载下来后,可以发现一堆的批处理,并且是不需要安装的。

具体的目录如下:

Krpano解压目录

然后我们可以通过这几个批处理来实现我们的第一个简易全景。

这里提供一张全景素材:点击下载

实现第一个虚拟漫游场景

打开两个窗口,一个是krpano的目录,一个是你的全景素材的目录,然后将图片拖动到批处理文件上,会自动生成一系列的文件等等,这个时候,打开生成目录下的tour_testingserver.exe 文件(该程序相当于本地开启了一个web服务),就可以直接浏览刚刚生成的全景漫游了,是不是很酷....

然鹅,这只是最简单的,如果你想实现一个放上多张不同的图片,然后可以点击查看,目前的这些还是不够的(后面有坑,还未爬出...)

热点布置

在全景中,包括图片、场景跳转都算是一个热点hotspot,所以我们需要把这些热点布置到场景中。

先来看一个简单的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="false"
                   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="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_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"
                   />

    <!-- 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>


    
    <scene name="scene_a" title="a" onstart="" thumburl="panos/a.tiles/thumb.jpg" lat="" lng="" heading="">

        <view hlookat="-71.752" vlookat="17.959" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="range" vlookatmin="-89.648" vlookatmax="89.648" />

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

        <image>
            <cube url="panos/a.tiles/pano_%s.jpg" />
        </image>

    </scene>


</krpano>

具体的里面是啥意思,复杂的我就不说了,目前还处于刚研究了一天的样子,理解的也不到位。这里简单说下能看懂的地方,scene是一个场景,场景中通过一个缩略图和立方体图片构成,然后可以设置默认的观察点(定义可能不对,个人的理解)。

然后就可以在scene中添加hotspot热点,然后设置热点的位置,3d渲染等等,让图片更加适配场景。

<hotspot name="spot1" style="skin_hotspotstyle" ath="-37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_b" />

以上的热点是krpano自动生成的,我直接拿过来用下,下面贴一个图片的xml配置:

<hotspot name="dyn_img1" style="pichotspot" url="img/1.jpg" ath="45.939" atv="-6.966" zoom="1" distorted="1" edge="center" rx="-6.97" ry="44.06" rz="-0.0" width="125.90" height="127.26" capture="0" scale="0.828" />

定义了一个图片的路径(url)、样式(style)、ath(应该是在球面中的水平位置)、atv(球面中的垂直位置)、scale(图片的缩放比例) 、zoom(是否伴随场景缩放)、distorted(是否在3D场景中扭曲,该值伴随着rx ry rz的变化)、width/height(图片宽高)

其他的属性都没怎么看,英文也不是很好,有很多地方都理解不到位。

一个多场景多图片的代码

至于html中的代码我就不放了,基本上都是生成的,主要是xml的配置。

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

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

    <!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
    <skin_settings maps="false"
                   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="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_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"       /> -->
    <textstyle name="hotspottextstyle" font="Arial" fontsize="12" bold="false" italic="false" textcolor="16775151" background="false" backgroundcolor="16777215" border="false" bordercolor="0" alpha="1" blendmode="layer" effect="glow(0x000000,0.5,4,3);dropshadow(4,45,0x000000,4,0.66);" origin="cursor" edge="bottom" textalign="center" xoffset="0" yoffset="-15" noclip="true" showtime="0.1" fadetime="0.25" fadeintime="0.1"/>
    <style name="pichotspot"  onclick="js(showpic(get(url)));"/>
    <style name="pichotspot2"  onclick="js(showpic2(get(url)));"/>
    <!-- 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>
    

    <scene name="scene_a" title="第一展厅" onstart="" thumburl="panos/a.tiles/a_thumb.jpg" lat="" lng="" heading="">

        <view hlookat='0' vlookat='0' fovtype='MFOV' fov='120' fovmin='40' fovmax='120' limitview='lookat'  vlookatmin='15' vlookatmax='-15' />

        <preview url='panos/a.tiles/a_preview.jpg' />

        <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
            <cube url="panos/a.tiles/a_%s.jpg" />
        </image>

        <hotspot name="spot1" style="skin_hotspotstyle" ath="-37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_b" />
        <hotspot name="spot2" style="skin_hotspotstyle" ath="37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_c"/>

        <hotspot name="node_10020111_t" url="media/img/2.png"  onhover="showtext(去往第二展厅,hotspottextstyle)" ath="-37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />
        <hotspot name="node_10020113_t" url="media/img/3.png"  onhover="showtext(去往第三展厅,hotspottextstyle)" ath="37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />

        <!-- <hotspot name='dyn_text2' url="img/banner1.jpg" enabled="false" preload="true" edge="center" handcursor="false"
             ath="0" atv="-6.4" zoom="true" distorted="true" rx="0" ry="-6.4" rz="0" width="800" height="160" scale="0.46"
            /> -->

        <hotspot name="dyn_img1" style="pichotspot" url="img/1.jpg" ath="45.939" atv="-6.966" zoom="1" distorted="1" edge="center" rx="-6.97" ry="44.06" rz="-0.0" width="125.90" height="127.26" capture="0" scale="0.828" />
        <hotspot name="dyn_img2" style="pichotspot" url="img/2.jpg" ath="57.063" atv="-8.202" zoom="1" distorted="1" edge="center" rx="-8.20" ry="32.94" rz="-0.0" width="186.95" height="188.97" capture="0" scale="0.640" />
        <hotspot name="dyn_img3" style="pichotspot" url="img/3.jpg" ath="71.593" atv="-9.142" zoom="1" distorted="1" edge="center" rx="-9.14" ry="18.41" rz="-0.0" width="186.95" height="188.97" capture="0" scale="0.715" />
        <hotspot name="dyn_img4" style="pichotspot" url="img/4.jpg" ath="88.909" atv="-9.728" zoom="1" distorted="1" edge="center" rx="-9.73" ry="1.09" rz="-0.0" width="188.24" height="190.27" capture="0" scale="0.752" />
        <hotspot name="dyn_img5" style="pichotspot" url="img/5.jpg" ath="106.894" atv="-9.146" zoom="1" distorted="1" edge="center" rx="-9.15" ry="-16.89" rz="-0.0" width="188.24" height="190.27" capture="0" scale="0.723" />
        <hotspot name="dyn_img6" style="pichotspot" url="img/6.jpg" ath="121.796" atv="-8.113" zoom="1" distorted="1" edge="center" rx="-8.11" ry="-31.80" rz="-0.0" width="189.95" height="192.00" capture="0" scale="0.642" />
        <hotspot name="dyn_img7" style="pichotspot" url="img/7.jpg" ath="133.199" atv="-6.940" zoom="1" distorted="1" edge="center" rx="-6.94" ry="-43.20" rz="-0.0" width="171.56" height="173.41" capture="0" scale="0.609" />
        <hotspot name="dyn_img8" style="pichotspot" url="img/8.jpg" ath="149.674" atv="-6.406" zoom="1" distorted="1" edge="center" rx="-6.41" ry="30.33" rz="-0.0" width="155.39" height="157.07" capture="0" scale="0.721" />
        <hotspot name="dyn_img9" style="pichotspot" url="img/9.jpg" ath="163.444" atv="-7.265" zoom="1" distorted="1" edge="center" rx="-7.27" ry="16.56" rz="-0.0" width="171.56" height="173.41" capture="0" scale="0.713" />
        <hotspot name="dyn_img10" style="pichotspot" url="img/10.jpg" ath="179.224" atv="-7.481" zoom="1" distorted="1" edge="center" rx="-7.48" ry="0.78" rz="-0.0" width="135.31" height="136.77" capture="0" scale="0.937" />
        <hotspot name="dyn_img11" style="pichotspot" url="img/11.jpg" ath="-164.657" atv="-7.335" zoom="1" distorted="1" edge="center" rx="-7.33" ry="344.66" rz="-0.0" width="129.87" height="131.27" capture="0" scale="0.918" />
        <hotspot name="dyn_img12" style="pichotspot" url="img/12.jpg" ath="-150.785" atv="-6.624" zoom="1" distorted="1" edge="center" rx="-6.62" ry="330.78" rz="-0.0" width="123.77" height="125.11" capture="0" scale="0.882" />
        <hotspot name="dyn_img13" style="pichotspot" url="img/13.jpg" ath="-133.729" atv="-7.561" zoom="1" distorted="1" edge="center" rx="-7.56" ry="43.73" rz="-0.0" width="129.03" height="130.42" capture="0" scale="0.839" />
        <hotspot name="dyn_img14" style="pichotspot" url="img/14.jpg" ath="-122.690" atv="-8.850" zoom="1" distorted="1" edge="center" rx="-8.85" ry="32.69" rz="-0.0" width="164.65" height="166.43" capture="0" scale="0.752" />
        <hotspot name="dyn_img15" style="pichotspot" url="img/15.jpg" ath="-107.440" atv="-10.078" zoom="1" distorted="1" edge="center" rx="-10.08" ry="17.44" rz="-0.0" width="182.06" height="184.03" capture="0" scale="0.772" />
        <hotspot name="dyn_img16" style="pichotspot" url="img/16.jpg" ath="-89.643" atv="-10.477" zoom="1" distorted="1" edge="center" rx="-10.48" ry="-0.36" rz="-0.0" width="174.21" height="176.09" capture="0" scale="0.819" />
        <hotspot name="dyn_img17" style="pichotspot" url="img/17.jpg" ath="-72.311" atv="-10.050" zoom="1" distorted="1" edge="center" rx="-10.05" ry="-17.69" rz="-0.0" width="175.39" height="177.29" capture="0" scale="0.792" />
        <hotspot name="dyn_img18" style="pichotspot" url="img/18.jpg" ath="-57.853" atv="-8.862" zoom="1" distorted="1" edge="center" rx="-8.86" ry="-32.15" rz="-0.0" width="171.46" height="173.31" capture="0" scale="0.745" />
        <hotspot name="dyn_img19" style="pichotspot" url="img/19.jpg" ath="-46.381" atv="-7.546" zoom="1" distorted="1" edge="center" rx="-7.55" ry="-43.62" rz="-0.0" width="171.46" height="173.31" capture="0" scale="0.613" />
    </scene>

    <scene name="scene_b" title="第二展厅" onstart="" thumburl="panos/b.tiles/a_thumb.jpg" lat="" lng="" heading="">

        <view hlookat='0' vlookat='0' fovtype='MFOV' fov='120' fovmin='40' fovmax='120' limitview='lookat'  vlookatmin='15' vlookatmax='-15' />

        <preview url='panos/b.titles/a_preview.jpg' />

        <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
            <cube url="panos/b.tiles/a_%s.jpg" />
        </image>

        <hotspot name="spot1" style="skin_hotspotstyle" ath="-37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_a" />
        <hotspot name="spot2" style="skin_hotspotstyle" ath="37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_c"/>

        <hotspot name="node_10020111_t" url="media/img/1.png"  onhover="showtext(去往第一展厅,hotspottextstyle)" ath="-37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />
        <hotspot name="node_10020113_t" url="media/img/3.png"  onhover="showtext(去往第三展厅,hotspottextstyle)" ath="37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />


        <hotspot name="dyn_img1" style="pichotspot" url="img/b1.jpg" ath="53.643" atv="-3.716" zoom="1" distorted="1" edge="center" rx="-3.72" ry="36.36" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.283" />
        <hotspot name="dyn_img2" style="pichotspot" url="img/b2.jpg" ath="61.347" atv="-4.208" zoom="1" distorted="1" edge="center" rx="-4.21" ry="28.65" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.268" />
        <hotspot name="dyn_img3" style="pichotspot" url="img/b3.jpg" ath="70.221" atv="-4.195" zoom="1" distorted="1" edge="center" rx="-4.19" ry="19.78" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.321" />
        <hotspot name="dyn_img4" style="pichotspot" url="img/b4.jpg" ath="80.385" atv="-4.640" zoom="1" distorted="1" edge="center" rx="-4.64" ry="9.61" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.316" />
        <hotspot name="dyn_img5" style="pichotspot" url="img/b5.jpg" ath="91.971" atv="-4.893" zoom="1" distorted="1" edge="center" rx="-4.89" ry="-1.97" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.322" />
        <hotspot name="dyn_img6" style="pichotspot" url="img/b6.jpg" ath="102.419" atv="-4.781" zoom="1" distorted="1" edge="center" rx="-4.78" ry="-12.42" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.310" />
        <hotspot name="dyn_img7" style="pichotspot" url="img/b7.jpg" ath="111.916" atv="-4.567" zoom="1" distorted="1" edge="center" rx="-4.57" ry="-21.92" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.306" />
        <hotspot name="dyn_img8" style="pichotspot" url="img/b8.jpg" ath="120.732" atv="-4.378" zoom="1" distorted="1" edge="center" rx="-4.38" ry="-30.73" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.286" />
        <hotspot name="dyn_img9" style="pichotspot" url="img/b9.jpg" ath="142.377" atv="-4.217" zoom="1" distorted="1" edge="center" rx="-4.22" ry="37.62" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.281" />
        <hotspot name="dyn_img10" style="pichotspot" url="img/b10.jpg" ath="151.369" atv="-4.840" zoom="1" distorted="1" edge="center" rx="-4.84" ry="28.63" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.295" />
        <hotspot name="dyn_img11" style="pichotspot" url="img/b11.jpg" ath="161.706" atv="-5.504" zoom="1" distorted="1" edge="center" rx="-5.50" ry="18.29" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.283" />
        <hotspot name="dyn_img12" style="pichotspot" url="img/b12.jpg" ath="172.794" atv="-5.948" zoom="1" distorted="1" edge="center" rx="-5.95" ry="7.21" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.339" />
        <hotspot name="dyn_img13" style="pichotspot" url="img/b13.jpg" ath="-174.190" atv="-5.681" zoom="1" distorted="1" edge="center" rx="-5.68" ry="354.19" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.316" />
        <hotspot name="dyn_img14" style="pichotspot" url="img/b14.jpg" ath="-162.067" atv="-5.461" zoom="1" distorted="1" edge="center" rx="-5.46" ry="342.07" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.313" />
        <hotspot name="dyn_img15" style="pichotspot" url="img/b15.jpg" ath="-152.070" atv="-5.295" zoom="1" distorted="1" edge="center" rx="-5.30" ry="332.07" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.327" />
        <hotspot name="dyn_img16" style="pichotspot" url="img/b16.jpg" ath="-142.791" atv="-4.885" zoom="1" distorted="1" edge="center" rx="-4.88" ry="322.79" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.234" />
        <hotspot name="dyn_img17" style="pichotspot" url="img/b17.jpg" ath="-120.373" atv="-4.229" zoom="1" distorted="1" edge="center" rx="-4.23" ry="30.37" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.262" />
        <hotspot name="dyn_img18" style="pichotspot" url="img/b18.jpg" ath="-111.434" atv="-4.731" zoom="1" distorted="1" edge="center" rx="-4.73" ry="21.43" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.277" />
        <hotspot name="dyn_img19" style="pichotspot" url="img/b19.jpg" ath="-102.491" atv="-4.557" zoom="1" distorted="1" edge="center" rx="-4.56" ry="12.49" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.305" />
        <hotspot name="dyn_img20" style="pichotspot" url="img/b20.jpg" ath="-91.598" atv="-4.713" zoom="1" distorted="1" edge="center" rx="-4.71" ry="1.60" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.268" />
        <hotspot name="dyn_img21" style="pichotspot" url="img/b21.jpg" ath="-80.297" atv="-4.277" zoom="1" distorted="1" edge="center" rx="-4.28" ry="-9.70" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.275" />
        <hotspot name="dyn_img22" style="pichotspot" url="img/b22.jpg" ath="-70.286" atv="-4.366" zoom="1" distorted="1" edge="center" rx="-4.37" ry="-19.71" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.308" />
        <hotspot name="dyn_img23" style="pichotspot" url="img/b23.jpg" ath="-61.002" atv="-3.952" zoom="1" distorted="1" edge="center" rx="-3.95" ry="-29.00" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.259" />
        <hotspot name="dyn_img24" style="pichotspot" url="img/b24.jpg" ath="-54.096" atv="-3.912" zoom="1" distorted="1" edge="center" rx="-3.91" ry="-35.90" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.247" />
    </scene>

    <scene name="scene_c" title="第三展厅" onstart="" thumburl="panos/c.tiles/a_thumb.jpg" lat="" lng="" heading="">

        <view hlookat='0' vlookat='0' fovtype='MFOV' fov='120' fovmin='40' fovmax='120' limitview='lookat'  vlookatmin='15' vlookatmax='-15' />

        <preview url='panos/c.titles/a_preview.jpg' />

        <image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled">
            <cube url="panos/c.tiles/a_%s.jpg" />
        </image>

        <hotspot name="spot1" style="skin_hotspotstyle" ath="-37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_a" />
        <hotspot name="spot2" style="skin_hotspotstyle" ath="37.753" atv="0" scale="0.3" zoom="1" linkedscene="scene_b"/>

        <hotspot name="node_10020111_t" url="media/img/1.png"  onhover="showtext(去往第一展厅,hotspottextstyle)" ath="-37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />
        <hotspot name="node_10020113_t" url="media/img/2.png"  onhover="showtext(去往第二展厅,hotspottextstyle)" ath="37.753" atv="-2" alpha="1" scale="0.5" zoom="1"  />


        <hotspot name="dyn_img1" style="pichotspot2" url="img/c1.png" ath="52.407" atv="-4.698" zoom="1" distorted="1" edge="center" rx="-4.70" ry="37.59" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.201" />
        <hotspot name="dyn_img2" style="pichotspot2" url="img/c2.png" ath="62.426" atv="-5.247" zoom="1" distorted="1" edge="center" rx="-5.25" ry="27.57" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.243" />
        <hotspot name="dyn_img3" style="pichotspot2" url="img/c3.png" ath="73.892" atv="-5.569" zoom="1" distorted="1" edge="center" rx="-5.57" ry="16.11" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.261" />
        <hotspot name="dyn_img4" style="pichotspot2" url="img/c4.png" ath="87.916" atv="-5.850" zoom="1" distorted="1" edge="center" rx="-5.85" ry="2.08" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.274" />
        <hotspot name="dyn_img5" style="pichotspot2" url="img/c5.png" ath="101.811" atv="-5.422" zoom="1" distorted="1" edge="center" rx="-5.42" ry="-11.81" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.277" />
        <hotspot name="dyn_img6" style="pichotspot2" url="img/c6.png" ath="113.888" atv="-5.361" zoom="1" distorted="1" edge="center" rx="-5.36" ry="-23.89" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.265" />
        <hotspot name="dyn_img7" style="pichotspot2" url="img/c7.png" ath="123.824" atv="-4.729" zoom="1" distorted="1" edge="center" rx="-4.73" ry="-33.82" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.217" />
        <hotspot name="dyn_img8" style="pichotspot2" url="img/c8.png" ath="143.015" atv="-4.278" zoom="1" distorted="1" edge="center" rx="-4.28" ry="36.98" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.239" />
        <hotspot name="dyn_img9" style="pichotspot2" url="img/c9.png" ath="153.062" atv="-4.586" zoom="1" distorted="1" edge="center" rx="-4.59" ry="26.94" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.248" />
        <hotspot name="dyn_img10" style="pichotspot2" url="img/c10.png" ath="165.347" atv="-5.355" zoom="1" distorted="1" edge="center" rx="-5.35" ry="14.65" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.277" />
        <hotspot name="dyn_img11" style="pichotspot2" url="img/c11.png" ath="179.079" atv="-5.393" zoom="1" distorted="1" edge="center" rx="-5.39" ry="0.92" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.283" />
        <hotspot name="dyn_img12" style="pichotspot2" url="img/c12.png" ath="-167.085" atv="-5.143" zoom="1" distorted="1" edge="center" rx="-5.14" ry="347.09" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.270" />
        <hotspot name="dyn_img13" style="pichotspot2" url="img/c13.png" ath="-154.587" atv="-4.779" zoom="1" distorted="1" edge="center" rx="-4.78" ry="334.59" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.231" />
        <hotspot name="dyn_img14" style="pichotspot2" url="img/c14.png" ath="-144.212" atv="-4.239" zoom="1" distorted="1" edge="center" rx="-4.24" ry="324.21" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.243" />
        <hotspot name="dyn_img15" style="pichotspot2" url="img/c15.png" ath="-124.423" atv="-4.024" zoom="1" distorted="1" edge="center" rx="-4.02" ry="34.42" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.221" />
        <hotspot name="dyn_img16" style="pichotspot2" url="img/c16.png" ath="-113.463" atv="-4.330" zoom="1" distorted="1" edge="center" rx="-4.33" ry="23.46" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.265" />
        <hotspot name="dyn_img17" style="pichotspot2" url="img/c17.png" ath="-101.016" atv="-4.846" zoom="1" distorted="1" edge="center" rx="-4.85" ry="11.02" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.277" />
        <hotspot name="dyn_img18" style="pichotspot2" url="img/c18.png" ath="-86.574" atv="-4.921" zoom="1" distorted="1" edge="center" rx="-4.92" ry="-3.43" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.283" />
        <hotspot name="dyn_img19" style="pichotspot2" url="img/c19.png" ath="-72.724" atv="-4.811" zoom="1" distorted="1" edge="center" rx="-4.81" ry="-17.28" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.275" />
        <hotspot name="dyn_img20" style="pichotspot2" url="img/c20.png" ath="-61.259" atv="-4.283" zoom="1" distorted="1" edge="center" rx="-4.28" ry="-28.74" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.247" />
        <hotspot name="dyn_img21" style="pichotspot2" url="img/c21.png" ath="-51.957" atv="-3.797" zoom="1" distorted="1" edge="center" rx="-3.80" ry="-38.04" rz="-0.0" width="240.00" height="240.00" capture="0" scale="0.226" />

    </scene>
    
    



    


</krpano>

问题

到目前为止,还是没有理解rx ry rz 是如何计算出来的,如果你想问我这个是怎么来的..我只能说这是抄的别人的,我只是个搬运工...

如果有大神了解这方面的知识,希望给小白讲解下,感谢。

案例和参考

我实现的DEMO : 多场景多图片的DEMO

参考资料:http://www.krpano360.com/choosekrpano/

官网资料:https://krpano.com/docu/

动态加载XML : krpano动态加载设置热点

相关文章
|
4月前
|
存储 安全 Java
"Java编码魔法:揭秘图片与文件的Base64神秘转换术,让数据在指尖跳跃!"
【8月更文挑战第16天】Base64编码在Java开发中常用于将二进制数据如图片转换为ASCII字符串以便传输。编码使用64个字符及等号填充,每3字节数据编码为4个字符。Java利用`java.util.Base64`类实现此功能:读取图片或文件为字节数组后进行编码。解码时将Base64字符串还原为字节数组并写入文件。需注意编码效率降低、不提供安全性及特殊字符兼容性等问题。掌握这些技巧有助于解决Web开发中的数据传输需求。
116 4
|
6月前
|
算法 Java
连通组件标记算法–算法修正版
连通组件标记算法–算法修正版
25 0
|
编解码 计算机视觉 Python
2023年电赛---运动目标控制与自动追踪系统(E题)关于网友的问题回复
2023年电赛---运动目标控制与自动追踪系统(E题)关于网友的问题回复
442 0
|
API UED
推特「崩了」:不登录不让看、推文数量严格设上限,马斯克反复横跳
推特「崩了」:不登录不让看、推文数量严格设上限,马斯克反复横跳
496 0
|
机器学习/深度学习 人工智能 算法
TPAMI 2022 | 寻找属于你的影子,港中文等提出实例阴影检测任务
TPAMI 2022 | 寻找属于你的影子,港中文等提出实例阴影检测任务
135 0
|
Web App开发 Rust 安全
解雇拒绝打开摄像头员工被罚 51 万;推送损坏的更新,导致数千网站瘫痪;PHP 存在不受控制的递归漏洞|思否周刊
解雇拒绝打开摄像头员工被罚 51 万;推送损坏的更新,导致数千网站瘫痪;PHP 存在不受控制的递归漏洞|思否周刊
145 0
|
算法 安全 C++
科学家小蓝来到了一个荒岛,准备对这个荒岛进行探测考察。 小蓝使用了一个超声定位设备来对自己进行定位。为了使用这个设备,小蓝需要在不同的点分别安装一个固定的发射器和一个固定的接收器。小蓝手中还有一个移
科学家小蓝来到了一个荒岛,准备对这个荒岛进行探测考察。 小蓝使用了一个超声定位设备来对自己进行定位。为了使用这个设备,小蓝需要在不同的点分别安装一个固定的发射器和一个固定的接收器。小蓝手中还有一个移
285 0
科学家小蓝来到了一个荒岛,准备对这个荒岛进行探测考察。 小蓝使用了一个超声定位设备来对自己进行定位。为了使用这个设备,小蓝需要在不同的点分别安装一个固定的发射器和一个固定的接收器。小蓝手中还有一个移
|
编解码 算法 应用服务中间件
全景自动切片技术-krpano初识
接之前的文章,基于Three.js的全景展示框架-TPano,之前的分享中留了一个问题,如何在线展示高清大图,基于TPano技术,虽然可以实时看到全景,但是随着摄像头的分辨率越来越高,文件大小也会越来越大。
636 0
全景自动切片技术-krpano初识
ctfshow-网络迷踪-新手上路 ( 使用百度搜图收集景点信息)
ctf.show 网络迷踪模块第1关, 只有一座桥的图片, 拿到桥的名字即可, 推荐使用百度搜图
470 0
ctfshow-网络迷踪-新手上路 ( 使用百度搜图收集景点信息)