请选择 进入手机版 | 继续访问电脑版
分享
查看: 1429|回复: 0

[分享] 从零开始学习3D可视化之事件绑定

[复制链接]

从零开始学习3D可视化之事件绑定

发表于 2021-6-28 14:44:04 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon1429 zzr_icon0 查看全部
先理解一下概念:事件,就是用户或者是浏览器执行的某种动作。例如: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/

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

本版积分规则

130700ppkpl8x3t7tt1b1t