自有项目想添加三维场景怎么处理最简单？

有时候为了提升项目的逼格，我们会给项目增加一些没有太大用处但是看起来就很高大上的一些东西，最常见的其实就是前端样式，你说样式作用大不大？告诉你，没有一个好的样式，再牛的项目也无法得到大众的买单，这个正常程序员都知道使用一些前端框架、引用前端样式等。在这里就给大家分享一个让自己项目看起来更加“高大上”的方法！
我们可以在项目中添加一个可以操作的三维可视化场景比如能够进出楼层或者实现小车沿着轨迹运动之类的，大家感觉这个制作起来很难么？不！在ThingJS在线开发平台直接保存官方示例，然后分享链接就可以IFrame的方式直接嵌入到我们自己的项目中去了，这里为大家分享的是另一种方法，在我们的项目中，获取要调用的方法名传递到三维项目中去，去调用相应方法！
首先我们得有一个前端页面用于使用Iframe标签去引用：
代码如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>ThingJS的 Iframe演示</title></head><body><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>
</body></html>

上述这个是一个简单的页面，其中iframe的src是我们在ThingJS物联网可视化开发平台上保存的一个官方示例，选择分享的，由于本人是ThingJSVIP，所以可以分享永久的链接，大家也可以直接打开这个链接，双击建筑进入建筑内部，双击物体是查看该物体，其他功能还没有写进去，这里就简单写了控制摄像机飞行的功能，大概花了我足足三分钟才写好ThingJS物联网可视化在线开发平台的代码吧，其中还包括登录该网站所花费的时间，那么在ThingJS中，要怎么写代码呢？

点击加号即可开始写我们的脚本了，写法就是js的es5语法，es6的话ThingJS还不是特别支持，简单的倒是可以使用，所以建议搭建还是乖乖使用es5吧。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 页面方法windowfuncName;
});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是如何让程序员更高效的开发物联网可视化项目
物联网可视化项目怎么制作的?除了需要建模还需要什么?一般来说物联网可视化项目中都包含哪些东西?物联网可视化项目的制作周期大概是多久?一个用来初期投标的物联网可视化方案怎么制作才算是简单?就目前而言,可 ...
制作物联网可视化项目的工具-ThingJS
随着科技的发展,网络逐步的成为了如今时代的主流,手机app.电脑客户端,这些都给我们的生活带来了极大的便捷,随之而来的,则是大量的数据产生,由此大数据方面如火山爆发式的崛起,风头一时无二,在进入4G时 ...
前端基础第二天项目大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
基于webgl、封装threejs的3d物联网可视化开发平台
webgl可视化平台,封装threejs进行快速数据对接,使用Echarts图表结合webgl可视化平台进行数据对接,3D物联网开发选哪个?前端人员能不能跑来搞3D可视化开发?用什么可以简单快速建模? ...
html天气插件iframe,分享常用7款天气预报代码iframe嵌入网页方式
如果在网站上加入天气预报功能,你找不到更好的天气预报代码,可以看下本站和大家分享的7款天气预报代码iframe嵌入网页方式. 天气预报代码1 src='http://appnews.qq.com/cg ...
【PBL项目实战】户外智慧农场项目实战系列——1.阿里云物联网平台的开通与云端可视化应用的新建
岭师人工智能素养教育共同体PBL项目教程系列之1:户外智慧农场项目实战系列原文链接 https://mp.weixin.qq.com/s/avKWJHNvnPeFsdEXUBByjw 本系列以户外 ...
如何利用ThingJS开发物联网可视化小Demo？
如何利用ThingJS平台制作一个3D可视化应用并且发布出去?怎么去制作一个简单的可视化入门项目?如何判断自己能不能进军3D可视化行业?多说不练假把式,今天我们就来学习ThingJS平台中的官方示例, ...
130个物联网示范项目上榜！工信部权威发布
近日,工信部公布了2019-2020年度物联网关键技术与平台创新类.集成创新与融合应用类示范项目名单. 工信部要求各地工业和信息化主管部门及项目推荐单位结合"新型基础设施"建设规划 ...
【PBL项目实战】户外智慧农场项目实战系列之4——Mind+Mixly双平台ESP32数据上云及云端可视化实时展示
[PBL项目实战]户外智慧农场项目实战系列之4--Mind+Mixly双平台ESP32数据上云及云端可视化实时展示原文链接 https://mp.weixin.qq.com/s/r_NeJdPoi ...
【PBL项目实战】户外智慧农场项目实战系列——7.Mind+Mixly双平台工业级多合一空气质量传感器数据上云及云端可视化展示
[PBL项目实战]户外智慧农场项目实战系列--7.Mind+Mixly双平台工业级多合一空气质量传感器数据上云及云端可视化展示原文链接 https://mp.weixin.qq.com/s/ZEU ...

自有项目Iframe嵌入ThingJS物联网可视化项目代码解析

自有项目想添加三维场景怎么处理最简单？

自有项目Iframe嵌入ThingJS物联网可视化项目代码解析相关推荐

最新文章

热门文章