乐趣区

关于javascript:如何用iframe元素来控制你的3D项目

jiezi

IFRAME 是 HTML 标签，作用是文档中的文档，或者浮动的框架(FRAME)。ThingJS 3D 我的项目开发是在浏览器上实现的，如何用 iframe 来管制你的我的项目呢？

在应用 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='https://www.thingjs.com/s/aa25e09eae2f73e6ce080d73?params=105b0f77fd24654d4eebc434e9'></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: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址});

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 开发 PAAS 平台，能够本人写脚本进行我的项目管制，入门很简略！

退出移动版