请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 596|回复: 0

[分享] 从零起头进修3D可视化之事务的常用方式

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-7-1 14:28:34 | 显示全部楼层 |阅读模式
1、 绑定事务并增加条件

2、 同一个事务注册多个回调

3、 tag 标签

4、 设备事务优先级

5、 注册单次事务

事务不会自己履行,需要触发(即事务被触发以后才可履行)。审阅任何JavaScript代码的焦点,你会发现正是事务是把一切工具融合在一路。下面我进修了一些在数字孪生可视化场景中事务的常用方式。

从零起头进修3D可视化之事务的常用方式



1、 绑定事务并增加条件
事务增加了条件,只要在合适该条件的数字孪生可视化物体上 click 才会触发,不管是已经存在的 Thing 工具,还是前面新建立的 Thing 工具城市生效。

  1. app.on("click", ".Thing", function(ev) {
  2. console.log("you click " + ev.object.id);
  3. });
  4. obj.on("click", ".Marker", function(ev) {
  5. console.log(ev.object.name);
  6. });
复制代码


上面的例子,当这个数字孪生可视化物体子孙里有 Marker 物体,当它被点击就会触发。同全局绑定 Marker 物体,绑定后 obj 的子孙里新建立的 Marker 也响应这个事务。

2、 同一个事务注册多个回调
试想一下,倘使有一个模块在数字孪生可视化物体 click 时,改变物体色彩,别的一个模块需要在物体 click 时,放大物体。两个模块又是分歧人写的,那该若何注册事务呢?

  1. // 事务1:
  2. obj.on("click", function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. });
  5. // 事务2:
  6. obj.on("click", function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. });
  9. // 卸载 obj 全数的 click 事务
  10. obj.off("click");
复制代码


这两个事务,城市在 obj 被点击后触发。但利用 off() 卸载事务时,两个事务城市同时被卸载。是以我更保举利用[tag]的方式。

3、 tag 标签
假如取消大概停息事务,都要晓得原回调函数,在大部分时辰会比力麻烦,可以给数字孪生可视化场景中每个事务打上 tag,在删除大概停息时,可用 tag 间接指定你要操纵的回调。

  1. //模块1中:
  2. obj.on("click",function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. },"模块1");

  5. //模块2中:
  6. obj.on("click",function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. },"模块2");
  9. //取消"模块1"的事务回调,不影响“模块2”的回调
  10. obj.off("click",null ,"模块1");
复制代码


4、 设备事务优先级
两个都是 click 事务,假如希望保证模块 2 的事务先于模块 1 触发,则需要增加一个参数 priority,一般事务默许的优先级是 50,设备的越大,越优先触发。

  1. //模块1:
  2. obj.on("click",function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. },"模块1");

  5. //模块2:
  6. obj.on("click",function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. },"模块2",51);
复制代码


5、 注册单次事务
在数字孪生可视化场景中假如需要一个事务只履行一次,就需要卸载掉,你可以利用 one 这个接口取代 on,参数和 on 是一样的。

供给 priority 的才能:

  1. // 下例中是给每个楼层的注册了一次 EnterLevel 事务,即 每个楼层第一次进入时 城市响应
  2. app.one(THING.EventType.EnterLevel, '.Floor', function (ev) {
  3. console.log(ev.object.id);
  4. })

  5. // 假如只给某个楼层注册 以下
  6. var floor = app.query('.Floor')[0];
  7. floor.one(THING.EventType.EnterLevel, function (ev) {
  8. console.log(ev.object.id);
  9. })
复制代码


—————————————————

数字孪生可视化:https://www.thingjs.com/


回复

使用道具 举报

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

本版积分规则