分享
查看: 2691|回复: 0

[分享] 使用ThingJS引用campusbuilder搭建的三维园区场景

[复制链接]

使用ThingJS引用campusbuilder搭建的三维园区场景

发表于 2020-7-15 10:29:46 来自 分享 阅读模式 倒序浏览
zzv_icon2691 zzr_icon0 查看全部

ThingJS作为一个物联网可视化平台,能让我们去低门槛、低成本、高效率开发物联网可视化项目,作为一个平台而言,ThingJS不仅提供了许多的官方示例以供用户查看使用,还有专门的官方交流群回答用户在使用ThingJS中的一些问题,现在,我们就可以通过ThingJS在线开发平台,去制作我们的第一个物联网可视化项目了。

ThingJS项目初制作

在ThingJS中,最重要的就是我们的APP对象了,有关ThingJS中的App对象介绍吗,大家可以在https://www.thingjs.com/guide/cn/tutorial_Introduce/App.html ThingJS文档中心去深入了解,以下是一个最简单的“HelloWorld”:

  1. /**
  2. * 说明:创建App,url为场景地址(可选)
  3. */
  4. var app = new THING.App({
  5. url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
  6. });
复制代码

其中ulr是我们通过campusbuilder创建的园区场景,园区的获取只需要我们在制作完成后点击立即同步,即可同步到我们的园区列表中:

使用ThingJS引用campusbuilder搭建的三维园区场景使用ThingJS引用campusbuilder搭建的三维园区场景

双击场景则会出现类似“HelloWorld”的代码,但是url则是对应园区的url,我们在ThingJS中创建的“HelloWorld”脚本只有基础的查看功能,跟我们在CampusBuilder模模搭中的预览是不一致,在模模搭客户端中,我们可以聚焦物体、进出层级,但是到了ThingJS在线开发中,这些都需要我们添加代码去实现,不过进出层级所需要添加的代码非常的简单!以下就是关于进出层级、聚焦物体的代码:

  1. /**
  2. * 说明:创建App,url为场景地址(可选)
  3. */
  4. var app = new THING.App({
  5. url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
  6. });
  7. app.on('load', function (ev) {
  8. // 场景加载完成后 进入园区层级
  9. app.level.change(ev.campus);
  10. });
复制代码


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t