【ThingJS】类型转换以及注册

前言

目前国家提倡加快数字化发展，建设数字中国，并于今年2月份中共中央、国务院印发的《数字中国建设整体布局规划》中明确，数字中国建设按照“2522”的整体框架进行布局。其中提到“构建以数字孪生流域为核心的智慧水利体系”，可以说数字化发展是必须进行的，数字孪生是基于数字化的基础上，高纬度地监控和真实地还原实时场景，并提前预防各种可能发生的危险。以水利体系为例，通过数字孪生监控流域，可以观察地方乃至全国水域交汇情况，从而确定开闸放闸给下流带来地减少经济损失。

类型转换以及注册

在 ThingJS 低代码开发中，可以利用模型类型来定义不同模型的属性和行为，从而达到完成预想的效果。本文将会介绍如何使用自定义类在场景中创建模型。

加载场景

var app = new THING.App({url: 'https://www.thingjs.com/static/models/factory', background: '#000000',
});

url 场景地址
background 场景背景，null 即为透明背景

定义和注册自定义类

class Cabinet extends THING.Thing {constructor(app) {super(app);}openDoor() {this.playAnimation('_defaultAnim_');}
}
THING.factory.registerClass('Cabinet', Cabinet);

定义一个机柜类： Cabinet

在类中为机柜新增了一个开门的行为：openDoor()

将该自定义类与类型进行绑定：THING.factory.registerClass('Cabinet', Cabinet)

这里顺便提一下，通过ThingJS API内置的动画函数：playAnimation，可以调用模型的 _defaultAnim_动画，在后面的内容中，会详细说明如何使用动画以及模型如何创建动画。

创建模型

app.create({type: 'Cabinet',url: '/api/models/95A8D3F0552D496192031C4AAF9675A5/0/gltf/',position: [0, 0, 0],complete: function() {this.openDoor();console.log(this.animationNames)}
})

模型与自定义类通过 type 与 THING.factory.registerClass 第一个参数进行关联，并且自定义类调用成功，场景信息里面模型的名字不再是 Thing ，而是 Cabinet ，自定义类注册成功，可以使用其定义的行为 openDoor()，通过 animationNames 可以判断是否有该动画名称。

在这里插入图片描述

在上面的图中，其只有一个动画 _defaultAnim_ ，这是开门动画，上图为机柜开门的状态。

类型转换

app.query(/car/).forEach(item=>{THING.Utils.convertObjectClass(item, "Cabinet");
})

通过正则表达式查询模型 name 中包含 car 字符串的模型，并将其转换为 Cabinet 自定义类：THING.Utils.convertObjectClass(item, "Cabinet")

在这里插入图片描述

完整案例代码

// 加载场景代码 
var app = new THING.App({url: 'https://www.thingjs.com/static/models/factory',  // 场景地址background: '#000000',env: 'Seaside',complete: function() {// 正则查询 name 包含 car 字符串的模型app.query(/car/).forEach(item=>{// 转化类型THING.Utils.convertObjectClass(item, "Cabinet");})}
});/*** 自定义类：机柜*/
class Cabinet extends THING.Thing {constructor(app) {super(app);}/*** 行为：开门*/openDoor() {this.playAnimation('_defaultAnim_');}
}
// 注册自定义类
THING.factory.registerClass('Cabinet', Cabinet);// 创建模型
app.create({type: 'Cabinet',url: '/api/models/95A8D3F0552D496192031C4AAF9675A5/0/gltf/',position: [0, 0, 0],complete: function() {// 聚焦摄像头到物体上面app.camera.flyTo({time: 1000,target: this,})// 调用自定义类开门行为this.openDoor();}
})