ITPub博客

首页 > 应用开发 > Javascript > 制作网页并嵌入一个全景,ThingJS教你使用iframe标签

制作网页并嵌入一个全景,ThingJS教你使用iframe标签

原创 Javascript 作者:ThingJS 时间:2020-08-06 20:16:55 0 删除 编辑

我们在制作某个页面时,希望特定的一部分显示全景,在图文并茂中还能嵌入一个全景,这时候可以使用iframe标签,进行ThingJS项目控制。

 

在使用 ThingJS 制作物联网可视化项目时,需要使用 ThingJS CamBuilder 园区搭建工具去搭建场景、使用 ThingJS 在线开发平台去开发场景、对接数据、发布项目,有的人是直接利用 ThingJS 去写所有的设置项,有的是在自己项目中通过链接直接跳转到 ThingJS 项目中去,更多的人则选择使用 iframe 的方式,直接将 ThingJS 嵌入到他们自己的项目中去。

ThingJS 项目是如何通过 Iframe 嵌入到我们的项目中去的呢?或者说,我 iframe 嵌入后,怎么去写脚本进行交互呢?本篇随笔将写一个简单的示例告诉大家,如何在自己项目中去控制 ThingJS 项目,达到交互的功能。


ThingJS
官方示例中有许多的功能代码,在这里就不为大家一一讲解,直接上代码:
````

<div width = "800px" >

        <button style = "position: absolute;top: 15px;left: 15px;width: 75px;" onclick = "flyToCar()" > 飞到小车 </button>

        <button style = "position: absolute;top: 45px;left: 15px;width: 75px;"

               onclick = "flyToBack()" > 返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回 </button>

        <iframe id = "testMsg" style = "width: 600px;height: 400px;"

               src = ' ></iframe>

 

</div>

<script>

        function flyToCar () {

               var a = document .getElementById( "testMsg" );

               var msg = {

                       funcName : 'test'

               }

               a.contentWindow.postMessage(msg, "*" );

        }

 

        function flyToBack () {

               var a = document .getElementById( "testMsg" );

               var msg = {

                       funcName : 'test2' ,

                       param : "2"

               }

               a.contentWindow.postMessage(msg, "*" );

        }

</script>

` ```

这里面,我们要注意的是,我们要调用什么方法,就在 msg 中的方法名参数后面写上要被调用的方法,在 ThingJS 中我们接收的时候要注意这边写的是 funcName param ,那么我们在 ThingJS 中接收数据的时候也是要通过 XXX.funcName XXX.param 来接收,这个虽然是基础知识,但是也不要在这里出错哟 ~ ,话不多说,上 ThingJS 中的代码:

````

var app = new THING.App({

    url : '      // 场景地址

});

 

app.on( 'load' , function (ev) {

    var campus = ev.campus;

    // 开启系统层级

    app.level.change(campus);

});

 

app.on(THING.EventType.LevelChange, function (ev) {

    var obj = ev.object;

    var name = obj.name;

    var type = obj.type;

    var id = obj.id;

    var info = " 进入 " + type + " (" + name + ")" ;

    // 调用 用户主页面的 upDateInfo 方法

    callFuncInMain( 'upDataInfo' , { info, id });

})

 

function callFuncInMain (funcName, data) {

    var message = {

        'funcName' : funcName // 所要调用父页面里的函数名

        // 'param': data

    }

    // 向父窗体(用户主页面)发送消息

    // 第一个参数是具体的信息内容,

    // 第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送

    window .parent.postMessage(message, '*' );

}

 

function changeLevel (id) {

    var obj = app.query( '#' + id)[0];

    if (obj) {

        app.level.change(obj);

    }

}

// 监听用户页面传回的数据 并调用 ThingJS 页面方法

window .addEventListener( 'message' , function (e) {

    var data = e.data;

    var funcName = data.funcName;

    var param = data.param;

    // 调用 ThingJS 页面方法

    window [funcName](param);

});

 

function test () {

    var car = app.query( 'car01' )[0];

    app.camera.flyTo({

        object : car,

        xAngle : 0, // 绕物体自身X轴旋转角度

        yAngle: 0, // 绕物体自身Y轴旋转角度

        radiusFactor: 2, // 物体包围盒半径的倍数

        time: 2 * 1000,

        complete : function () {

            console .log( " 飞行结束" );

        }

    });

}

 

function test2 (obj) {

    app.camera.flyTo({

               position : [50.260000000000005,35.129000000000005,59.32699999999999],

               target : [8.0, -2.0, 4.0],

               time : obj*1000,

               complete : function () {

                       console .log( ' 飞行结束' )

               }

        });

}

````

大家有兴趣也可以自行尝试使用 Iframe 的方式将您自己的 ThingJS 项目嵌入到您自己的页面中去呢 ~

 ThingJS的3D项目控制不难,iframe框架更适合开发人员使用,修改代码也很简单!


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69980539/viewspace-2709859/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-29

  • 博文量
    60
  • 访问量
    28952