物联网可视化园区搭建步骤图示

ThingJS 场景中可以加载园区,加载后系统自动创建了园区、建筑、楼层、房间等物体对象,这些对象也自然把场景分成了不同的层级。

通过 CamBuilder 可搭建并输出一个园区,该园区可在 ThingJS 场景中加载。

点击添加图片描述(最多60个字)

物联网可视化园区搭建步骤图示_第1张图片

完成场景搭建后,即可导出ThingJS场景包(.tjs),上传至 ThingJS 开发平台中https://www.thingjs.com/使用。在ThingJS中,所有的长度、距离度量单位都是米,因此在进行场景搭建时,请按照实际尺寸搭建园区、建筑、楼层、房间。摆放的物体如果是用户自行建模导入的,也请按照实际尺寸建模。

当我们使用 App 启动了 ThingJS,ThingJS 就会创建一个三维空间,整个三维空间我们称之为“场景”(scene),在场景内我们可以创建对象,比如园区,建筑,车辆,传感器等等。

通过 CamBuilder 可编辑并输出一个园区,该园区可在 ThingJS 场景中加载。创建 App 时,我们传入的 url,就是被创建园区的地址。

CamBuilder 与 ThingJS 联系

在 CamBuilder 中创建的物体,只有在编辑了 UserID、Name 或者 自定义属性 后,导入到 ThingJS 中才能成为独立的管理对象,被程序读取或修改。并且 CamBuilder 中 UserID 和 Name 与 ThingJS 中的对象有对应关系。

在场景里,是可以添加多个独立园区的,每一个园区是一个 THING.Campus 类的对象,我们通过“app.create”接口来实现。

var app = new THING.App();

var campus1 = app.create({

type: "Campus",

url: "models/storehouse",

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

});

var campus2 = app.create({

type: "Campus",

url: "models/chinesehouse",

position: [50, 0, 0],

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

});

通过 CamBuilder 可编辑并输出一个园区,该园区可在 ThingJS 场景中加载。创建 App 时,我们传入的 url,就是被创建园区的地址。

通过 CamBuilder 搭建一个园区后,我们可以用插件设置场景在地图上面的位置。

在地图中选择需要摆放的位置后保存,CamBuilder中的场景就会自动同步到ThingJS平台同一账号下。

场景同步过去之后,我们可以通过代码获取场景在地图中摆放的经纬度数据。

var app = new THING.App();

var campus1 = app.create({

type: "Campus",

url: "models/storehouse",

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

});

var campus2 = app.create({

type: "Campus",

url: "models/chinesehouse",

position: [50, 0, 0],

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

});

在ThingJS中,可以把园区摆放在地球对应位置上,上文提到的获取到的经纬度数据使用示例如下:

var app = new THING.App();

var campus1 = app.create({

type: "Campus",

url: "models/storehouse",

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

});

var campus2 = app.create({

type: "Campus",

url: "models/chinesehouse",

position: [50, 0, 0],

complete: function (ev) {

console.log("Campus created: " + ev.object.id);

}

}); 当然这里的经纬度数据也可以直接用在CityBuilder中,我们在使用CityBuilder的时候,会将场景放在地球上的某个位置,这个时候就可以根据我们获取到的经纬度进行场景摆放了。

当场景的开发交互功能完成后,在场景预览时通过选择地图背景,就可以看到场景摆放在对应位置上。

ThingJS 场景中加载了园区后,场景中自动创建了 campus,building,floor,room 和一些在 CamBuilder 中添加的物体对象。这些对象不是独立散落在场景中的,他们会相互关联,形成一棵树的结构,从而构建了场景的层级。

在 ThingJS 场景中,每个对象,都可以通过 children 访问到下层子对象物体,通过 parent 访问到对应的父物体。

你可能感兴趣的:(物联网可视化园区搭建步骤图示)