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

[分享] 从零起头进修3D可视化之事务绑定

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-6-28 14:44:04 | 显示全部楼层 |阅读模式
先了解一下概念:事务,就是用户大概是阅读器履行的某种行动。例如:click、load等都是事务的名字。事务处置法式,就是响应事务的函数。事务处置法式的名字是以“on”开首的。
例如:事务 click ---> 事务处置法式 onclick(事务处置法式一般都是小写字母)。
ThingJS 系统内置了很多事务,比点击鼠标、键盘输入、层级变化等。可以监听这些事务,在事务回调中停止响应的营业逻辑处置。
全局绑定事务和部分绑定事务
操纵以及数字孪生可视化场景的变化,城市触发响应的事务。可以监听这些事务,然后在回调方式中做响应的处置,经过 on() 方式绑定事务。
1、全局绑定:经过 app.on() 绑定事务,可在全局下增加条件指定针对哪些物体绑定该事务,条件法则同于 query 利用的条件。
  1. // 绑定事务
  2. app.on("click", function(ev) {
  3. console.log("you click!");
  4. });
复制代码


留意事项:
在全局绑定后,新建立的合适条件物体也可以生效。
2、部分绑定:针对一个数字孪生可视化工具,大概 query 的查询成果(Selector),经过 on 接口绑定事务,叫部分绑定。同全局绑定,事务中可以加条件,暗示这个事务绑定是针对调集合的所稀有字孪生可视化物体的。
  1. obj.on("click", function(ev) {
  2. console.log(ev.object.name);
  3. });
复制代码


现实利用一下,在数字孪生可视化场景中建立鼠标单击事务,打印拾取到的物体id;鼠标双击事务,原地建立个球;并给一切修建工具增加鼠标滑过事务。
从零起头进修3D可视化之事务绑定
完整代码以下:
  1. var app = new THING.App({
  2.     url: 'https://www.thingjs.com/static/models/storehouse'
  3. });

  4. // 鼠标点击事务,打印拾取到的物体id(单击 双击 均触发 双击时会触发两次 Click )
  5. app.on('click', function(ev) {
  6. if (ev.picked) {
  7.         console.log('Click : ' + ev.object.id);
  8. }
  9. });

  10. // 鼠标单击事务,打印拾取到的物体id
  11. app.on(THING.EventType.SingleClick, function(ev) {
  12. if (ev.picked) {
  13.         console.log('SingleClick : ' + ev.object.id);
  14. }
  15. });

  16. // 鼠标双击事务,原地建立个球
  17. app.on('dblclick', function(ev) {
  18.     console.log('dblClick');
  19. // e.button 0 为左键 2为右键
  20. if (!ev.picked || ev.button != 0) { return; }

  21.     app.create({
  22.         type: 'Sphere',
  23.         radius: 0.5,
  24.         position: ev.pickedPosition
  25. });
  26. });

  27. // 给一切修建工具,增加鼠标滑过事务
  28. app.on('mouseenter', '.Building', function (ev) {
  29.     ev.object.style.outlineColor = '#0000FF';
  30. });
  31. app.on('mouseleave', '.Building', function (ev) {
  32.     ev.object.style.outlineColor = null;
  33. });
复制代码


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

回复

使用道具 举报

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

本版积分规则