随着企业对物联网可视化愈发重视，做3D可视化大屏解决方案的公司也越来越多。而我们可以给到大家的有两种方案，一种全权委托，包括出方案实地考察安装部署，技术指导等等可能还有更多服务，而今天小编要讲的是另一种，物联网可视化pass平台。什么是pass平台，简单说，技术人员自己在thingjs平台上开发，通过拖拽，简单写代码，不要怀疑，前端工程师完全可以做到的事情，前提你要掌握js，熟悉webgl，就能做出可视化DEMO,对接业务数据使其应用起来！
场景搭建
ThingJS平台为用户提供了以下两种方式搭建场景：
通过CamBuilder客户端搭建3D场景
通过CityBuilder城市地图搭建3D场景
CamBuilder
通过客户端下载需要以下几个步骤：
通过ThingJS官网下载3D园区搭建工具，在出现的下载详情面板中点击下载按钮
下载后可登陆账号，点击工具下的「用户手册」可查看使用教程
将场景导出上传或同步至ThingJS平台
选择园区资源下的场景进行开发
后续操作详见 在线开发 - 菜单导航 - 资源管理 - 园区
CityBuilder
在“地图”资源面板中点击“新建地图”
在出现的弹出面版中输入地图名称，点击“下一步”
选择“一键城市”和“上传数据”中的任一选项。若选择“上传数据”，地图面板将同时新增一个地图资源；若选择“一键城市”，需选择“城市范围”和“模板”并点击“下一步”，待数据下载完成之后，点击“进入编辑”，地图面板将新增一个地图资源
选择地图资源下的地图进行开发
后续操作详见 在线开发 - 菜单导航 - 资源管理 - 地图
引用跨域页面js
/**
* 说明：iframe引用跨域的页面 使用 H5的postMessage方法 进行 函数传参相互调用
* 操作：
* 3D场景中单击物体 将物体name传给页面
* 页面中单击按钮 进入相应物体的层级，进入层级后 右键返回上一级
* 教程：ThingJS教程——>界面——>iframe引用页面
* 难度：★★★★☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'// 场景地址
});
app.on('load', function(ev) {
app.level.change(ev.campus);
})
// 界面组件
var panel = new THING.widget.Panel();
// 创建数据对象
var dataObj = {
iframe: 'https://3dmmd.cn/test/page01/index.html'
};
var iframe = panel.addIframe(dataObj, 'iframe').caption('iframe');
iframe.setHeight('100px');
var iframeDom = iframe.domElement.getElementsByTagName('iframe')[0];
// 设置iframe滚动条
// iframeDom.scrolling = "auto";
app.on(THING.EventType.SingleClick, function (ev) {
if (ev.picked && ev.object) {
var obj = ev.object;
var name = obj.name;
var message = {
'funcName': 'changeText', // 所要调用iframe页面里的函数名
'param': {
'name': name
}
}
// 向引用的iframe页面发送数据
// 第一个参数是数据内容，
// 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
iframeDom.contentWindow.postMessage(message, '*');
}
})
function changeLevel(value) {
var obj = app.query(value)[0];
if (obj) {
app.level.change(obj);
}
}
// 接收iframe页面传送的数据
window.addEventListener('message', function (e) {
var data = e.data;
var funcName = data.funcName;
var param = data.param;
window[funcName](param.name);
})
