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

先理解一下概念：事件，就是用户或者是浏览器执行的某种动作。例如：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；鼠标双击事件，原地创建个球；并给所有建筑对象添加鼠标滑过事件。

完整代码如下：

1. var app = new THING.App({
   
2.     url: 'https://www.thingjs.com/static/models/storehouse'
   
3. });
   
4. 
   
5. // 鼠标点击事件，打印拾取到的物体id（单击 双击 均触发 双击时会触发两次 Click ）
   
6. app.on('click', function(ev) {
   
7. if (ev.picked) {
   
8.         console.log('Click : ' + ev.object.id);
   
9. }
   
10. });
    
11. 
    
12. // 鼠标单击事件，打印拾取到的物体id
    
13. app.on(THING.EventType.SingleClick, function(ev) {
    
14. if (ev.picked) {
    
15.         console.log('SingleClick : ' + ev.object.id);
    
16. }
    
17. });
    
18. 
    
19. // 鼠标双击事件，原地创建个球
    
20. app.on('dblclick', function(ev) {
    
21.     console.log('dblClick');
    
22. // e.button 0 为左键 2为右键
    
23. if (!ev.picked || ev.button != 0) { return; }
    
24. 
    
25.     app.create({
    
26.         type: 'Sphere',
    
27.         radius: 0.5,
    
28.         position: ev.pickedPosition
    
29. });
    
30. });
    
31. 
    
32. // 给所有建筑对象，添加鼠标滑过事件
    
33. app.on('mouseenter', '.Building', function (ev) {
    
34.     ev.object.style.outlineColor = '#0000FF';
    
35. });
    
36. app.on('mouseleave', '.Building', function (ev) {
    
37.     ev.object.style.outlineColor = null;
    
38. });

复制代码

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

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