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

32次阅读

共计 1416 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0