201|0

37

帖子

0

TA的资源

一粒金砂(中级)

楼主
 

从零开始学习3D可视化之事件绑定 [复制链接]

邀请:@justd0   参与回复

先理解一下概念:事件,就是用户或者是浏览器执行的某种动作。例如: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);
  • });

实际应用一下,在数字孪生可视化场景中创建鼠标单击事件,打印拾取到的物体id;鼠标双击事件,原地创建个球;并给所有建筑对象添加鼠标滑过事件。

完整代码如下:

  • var app = new THING.App({
  • url: 'https://www.thingjs.com/static/models/storehouse'
  • });
  • // 鼠标点击事件,打印拾取到的物体id(单击 双击 均触发 双击时会触发两次 Click )
  • app.on('click', function(ev) {
  • if (ev.picked) {
  • console.log('Click : ' + ev.object.id);
  • }
  • });
  • // 鼠标单击事件,打印拾取到的物体id
  • app.on(THING.EventType.SingleClick, function(ev) {
  • if (ev.picked) {
  • console.log('SingleClick : ' + ev.object.id);
  • }
  • });
  • // 鼠标双击事件,原地创建个球
  • app.on('dblclick', function(ev) {
  • console.log('dblClick');
  • // e.button 0 为左键 2为右键
  • if (!ev.picked || ev.button != 0) { return; }
  • app.create({
  • type: 'Sphere',
  • radius: 0.5,
  • position: ev.pickedPosition
  • });
  • });
  • // 给所有建筑对象,添加鼠标滑过事件
  • app.on('mouseenter', '.Building', function (ev) {
  • ev.object.style.outlineColor = '#0000FF';
  • });
  • app.on('mouseleave', '.Building', function (ev) {
  • ev.object.style.outlineColor = null;
  • });

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

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

此帖出自信息发布论坛
点赞 关注
 
 

回复
举报
您需要登录后才可以回帖 登录 | 注册

随便看看
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
关闭
站长推荐上一条 1/10 下一条
艾睿电子& Silicon Labs 有奖直播 | 全新蓝牙信道探测:从技术创新到实际应用
直播时间:3月12日(周三)上午10:00
直播奖励:多功能榨汁机、蓝牙音箱、手机支架

查看 »

 
EEWorld订阅号

 
EEWorld服务号

 
汽车开发圈

About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

站点相关: 国产芯 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

北京市海淀区中关村大街18号B座15层1530室 电话:(010)82350740 邮编:100190

电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2025 EEWORLD.com.cn, Inc. All rights reserved
快速回复 返回顶部 返回列表