Learning event binding of 3D visualization from scratch

Let's understand the concept first ： event , It's an action performed by a user or browser . for example ：click、load And so on are the names of the events . Event handler , It's a function that responds to events . The name of the event handler is given by “on” At the beginning .

for example ： event click ---> Event handler onclick（ Event handlers are usually lowercase letters ）.

ThingJS There are many events built into the system , Than a click of a mouse 、 Keyboard entry 、 Hierarchy changes, etc . You can monitor these events , Carry out corresponding business logic processing in the event callback .

Global binding events and local binding events

Operation and digital twin visualization scene changes , Will trigger corresponding events . You can monitor these events , Then do the corresponding processing in the callback method , adopt on() Method binding event .

1、 Global binding ： adopt app.on() The binding event , You can add conditions in the global environment to specify which objects to bind the event to , The conditional rule is the same as query Conditions of use .

//  The binding event 
app.on("click", function(ev) {
 console.log("you click!");
});

matters needing attention ：

After global binding , Newly created eligible objects can also take effect .

2、 Local binding ： For a digital twin visualization object , perhaps query Query results of （Selector）, adopt on Interface binding events , It's called local binding . Bind to global , Conditions can be added to the event , Indicates that this event binding is for all digital twin visualization objects in the collection .

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

Practical application , Create a mouse click event in the digital twin visualization scene , Print picked up objects id; Double click event , Create a ball in place ; And add mouse over events to all building objects .

The complete code is as follows ：

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});
 
//  Mouse click event , Print picked up objects id（ single click   double-click   All triggered   Double click will trigger twice  Click ）
app.on('click', function(ev) {
 if (ev.picked) {
        console.log('Click : ' + ev.object.id);
 }
});
 
//  Mouse click event , Print picked up objects id
app.on(THING.EventType.SingleClick, function(ev) {
 if (ev.picked) {
        console.log('SingleClick : ' + ev.object.id);
 }
});
 
//  Double click event , Create a ball in place 
app.on('dblclick', function(ev) {
    console.log('dblClick');
 // e.button 0  Left key  2 Right click 
 if (!ev.picked || ev.button != 0) { return; }
 
    app.create({
        type: 'Sphere',
        radius: 0.5,
        position: ev.pickedPosition
 });
});
 
//  To all building objects , Add mouse over events 
app.on('mouseenter', '.Building', function (ev) {
    ev.object.style.outlineColor = '#0000FF';
});
app.on('mouseleave', '.Building', function (ev) {
    ev.object.style.outlineColor = null;
});

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

Digital twin Visualization ：https://www.thingjs.com/