zoukankan      html  css  js  c++  java
  • 通过JS动态切换大场景xml

    我们在利用krpano去制作720全景图的时候,通常会遇到需要在两个大场景下切换的情况,或许我们可以通过不同链接去跳转,但是这样用户的体验效果极差,因此我们可以通过JS动态切换大场景xml,具体步骤如下:

    第一步:将需要切换的场景**.xml、panos里面的文件复制到相应目录下

    第二步:在tour.xml下的scene标签内定义一个可点击的热点

    <hotspot name="video" url="skin/vtourskin_mapspotactive.png" scale="0.4" ath="-162.243" atv="40.839" onclick="js(loadpano('zhongye.xml','scene_lqc'););" />

    第三步:在tour.html 内定义点击事件

    <div id="pano" style="100%;height:100%;">
        <noscript><table style="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;
                    embedpano({
                        swf: "tour.swf",
                        xml: "tour.xml",
                        target: "pano",
                        html5: "auto",
                        mobilescale: 1.0,
                        passQueryParameters: true,
                        onready: krpano_onready_callback
                    });
    
                function krpano_onready_callback(krpano_interface) {
                    krpano = krpano_interface;
                }
    
                function loadpano(xmlname,sceneName) {
                        if(krpano) {    
                                                     //动态切换xml,xmlname为tour.xml传过来的值 
                                                     krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));"); 
                                                      //sceneName为切换后加载的第一个场景
                                                     krpano.call("loadscene('" + sceneName + "')"); 
                                           } 
                            } 
                  </script>
      </div>

    注: loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1)一共有四个参数

    第一参数:

    name = 名称可以是编号

    第二参数:
    载入附带参数(如果没有则使用null)。可以通过&符号合并多个var1=val1的设置形

    sphere=image.jpg&amp;view.fov=120&amp;view.fisheye=0.35

    第三个参数:

    无缝融合相似场景

    onclick="loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1));"

    KEEPVIEW 是保持相同的视角,包括切换前的hlookat以及vlookat和fov,blend(1)则保证了融合的速度有一秒的时间

    载入时额外的标签(如果没有则使用null)。
    可以使用 | 字符整合多个标签。
    可用的标签:
    MERGE (推荐使用)
    将当前全景与新全景的所有设定相融。
    如果新全景中有plugins和hotspots与需要保留的重名,则新元素不会被载入。
    对于虚拟漫游推荐使用该设置。
    KEEPIMAGE – 保留当前图像(仅HTML5)
    KEEPVIEW – 保留当前view设置
    KEEPMOVING – 在混合过程保持运动 (仅HTML5)
    KEEPSCENES – 保留当前场景 (仅loadpano)
    KEEPDISPLAY – 保留当前display设置
    KEEPCONTROL – 保留当前control设置
    KEEPPLUGINS – 保留当前已经载入的plugins
    KEEPHOTSPOTS – 保留当前已经载入的hotspots
    NOPREVIEW – 忽略新xml的<preview>标签
    KEEPBASE – 预定义组合:
    KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
    KEEPALL – 预定义组合:
    KEEPVIEW | KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
    REMOVESCENES – 移除所有当前定义了的scene元素 (与 set(scene.count,0);作用一样 )
    IGNOREKEEP – 忽略keep设定,移除所有keep=”true”的元素
    IMAGEONLY – 只加载全景图像(以及预览图)(仅HTML5,不能用于loadpanoscene)

    第四参数
    混合淡入到下一个全景 – 转场动画。
    可用的混合模式:

    NOBLEND 无混合,直接切换到下一个全景(默认)。

    BLEND(time, tweentype) 混合 / 淡入淡出当前全景与下一个全景。time – 以秒为单位的混合时间 (默认=2.0)。
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。

    COLORBLEND(time, color, tweentype)混合至某种颜色,然后从该颜色转到下一个全景。
    time – 以秒为单位的混合时间 (默认=2.0)。
    color – 转场时两个全景之间的颜色,十六进制颜色值 (默认=0x000000 = 黑色)。
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。

    LIGHTBLEND(time, color, colorscale, tweentype)添加或减去某种颜色,然后交叉淡化到下一个全景。
    time – 以秒为单位的混合时间 (默认=2.0)。
    color – 添加的颜色,十六进制颜色 (默认=0xFFFFFF = 白色)。
    colorscale – 颜色的比例系数,使用负数表示减去 (默认=2.0)。
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。

    SLIDEBLEND(time, angle, smooth, tweentype)在当前和下一个全景之间的幻灯片动画。
    time – 以秒为单位的混合时间 (默认=2.0)。
    angle – 幻灯片切换的角度 (默认=0.0)。
    smooth – 转场线条的平滑/模糊程度 (0.0到 1.0, 默认=0.2)。
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。

    (仅WebGL)OPENBLEND(time, shape, smooth, zoom, tweentype)在当前和下一个全景之间的展开动画。
    time – 以秒为单位的混合时间 (默认=2.0)。
    shape – 定义展开形状 (-1.0 到 +1.0) – 0.0=圆圈展开, -1.0=垂直展开, +1.0=水平展开 (默认=0.0)。
    smooth – 转场线条的平滑/模糊程度 (0.0 到 1.0, 默认=0.2)。
    zoom – 对旧全景的放大。 (0.0 到 1.0, 默认=0.0).。
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。
    (Flash或仅WebGL)

    ZOOMBLEND(time, zoom, tweentype)放大到当前视域,交叉淡化到下一个全景。
    time – 以秒为单位的混合时间 (默认=2.0)。
    zoom – 缩放因子 (默认=2.0).
    tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。

  • 相关阅读:
    Qt4.7.4下单独编译QtWebkit
    CronHowto Community Ubuntu Documentation
    菜鸟学Python(9):给文件添加内容,得到文件信息
    yet another software souring company based on san franciso
    Get Started With Chickenfoot
    Berkeley DB(四) DB Environment
    搭建SSH框架链接Oracle数据库
    Linux下手动编译安装Apache2.x
    Errore HTTP 404.2 Not Found" IIS 7.5 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理
    关于二分法中取中间值时向下和向上取整的问题(由大白LA3971想到的)
  • 原文地址:https://www.cnblogs.com/lijiapeng/p/9816486.html
Copyright © 2011-2022 走看看