ThingJS 3D开发新体验,iframe元素提升网页加载性能

原创
08/06 20:11
阅读数 37

谷歌浏览器率先支持iframe元素,延迟加载有助于减少内存使用量、提升页面其它部分的加载速度并保存数据。ThingJS 3D开发有了新的体验。

在使用ThingJS制作物联网可视化项目时,需要使用ThingJS的CamBuilder园区搭建工具去搭建场景、使用ThingJS在线开发平台去开发场景、对接数据、发布项目,有的人是直接利用ThingJS去写所有的设置项,有的是在自己项目中通过链接直接跳转到ThingJS项目中去,更多的人则选择使用iframe的方式,直接将ThingJS嵌入到他们自己的项目中去。 file 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开发在谷歌浏览器上开发最流畅,不仅是iframe元素,还有161个官方示例等着你去探索。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部