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

这篇博客介绍了3D可视化的事件绑定概念,包括全局和局部绑定。事件是用户或浏览器的动作,如click和load,而事件处理程序是响应事件的函数。ThingJS系统支持多种事件监听,允许在全局或局部进行事件绑定。通过app.on()进行全局绑定,新创建的物体也可生效,而局部绑定针对特定对象或查询结果。示例展示了如何创建鼠标单击、双击和滑过事件,以实现不同的交互功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先理解一下概念:事件,就是用户或者是浏览器执行的某种动作。例如:click、load等都是事件的名字。事件处理程序,就是响应事件的函数。事件处理程序的名字是以“on”开头的。

例如:事件 click ---> 事件处理程序 onclick(事件处理程序一般都是小写字母)。

ThingJS 系统内置了很多事件,比点击鼠标、键盘输入、层级变化等。可以监听这些事件,在事件回调中进行相应的业务逻辑处理。

全局绑定事件和局部绑定事件

操作以及数字孪生可视化场景的变化,都会触发相应的事件。可以监听这些事件,然后在回调方法中做相应的处理,通过 on() 方法绑定事件。

1、全局绑定:通过 app.on() 绑定事件,可在全局下添加条件指定针对哪些物体绑定该事件,条件规则同于 query 使用的条件。

// 绑定事件 app.on("click", function(ev) { console.log("you click!"); });

注意事项:

在全局绑定后,新创建的符合条件物体也可以生效。

2、局部绑定:针对一个数字孪生可视化对象,或者 query 的查询结果(Selector),通过 on 接口绑定事件,叫局部绑定。同全局绑定,事件中可以加条件,表示这个事件绑定是针对集合中的所有数字孪生可视化物体的。

obj.on("click", function(ev) { console.log(ev.object.name); });

实际应用一下,在数字孪生可视化场景中创建鼠标

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值