preface

Under the background of the current big data era, the demand for data visualization is becoming more and more huge. In the background of data visualization, the industrial Internet combined with software and big data analysis will become easier and easier to achieve through the link between intelligent machines and the ultimate human-machine link.

Countries are keenly aware of the characteristics of era and timely grasp the opportunity, foster new economic growth point, promote the “made in China” to upgrade, realize the industrial powers to industrial power quality, and many in the industry also is trying to accomplish on their own “upgrade” and “transform”, data visualization and data combined with the industry to implement the visualization of industrial control, Greatly improve the efficiency of industrial control management, risk control ability, effective supervision of industrial processes and so on.

Nowadays, thanks to the emergence of HTML5 WebGL, it is easy to realize the digital management mode of industrial control from the technical point of view. The core improves the visualization and management efficiency of industrial control equipment information, and it can master the status of each parameter of the equipment in real time, manage the resources in real time, and have a very high controllability of the risk of the overall operation stability.

As shown below, it is a fan project in the industrial Internet application of 3D fan Web configuration based on HTML5 WebGL:

The link of the project: based on HTML 5 WebGL fan Web 3 d configuration of industrial Internet application (http://www.hightopo.com/demo/FanDevice/)

It can be seen from the above design diagram that the page layout is mainly composed of four parts: table, dial, Echarts chart and 3D fan model.

In this page very specific and comprehensive display of fan equipment related equipment information, such as fan equipment name, fan parameters, power generation data, engine room temperature and power wind speed broken line chart and so on, which is a kind of enjoyment for the administrator!

In the 3D fan model, the fan can be pulled close and pulled far to achieve the transparent, hidden and display effect of the fan shell, as shown in the figure:

When pulling the fan close to hide the fan shell and display the internal components, you can click the component to obtain the details of the click component:

The technical core and difficulty of the whole fan project above is the realization of the interactive operation of the 3D fan model. Here, I take the 3D fan model separately for explanation. The complete fan interaction effect is shown in the following GIF:

The fan model used in the above project was modeled using MAYA and MODO, which export obJ and MTL files.

Confirm the requirements before operation. From the analysis of the above renderings, it can be seen that there are three main functional requirements:

1. When the roller rolls, the fan shell becomes transparent, hidden, and then displayed;

2. When clicking the internal parts of the fan, the corresponding popup window will appear and click the popup window to hide;

3, fan blade rotation effect;

After identifying the required interactive functionality requirements, we can implement it step by step.

Realize the function

1. When the roller rolls, the fan shell becomes transparent and hides

Since the fan scene is formed by assembling multiple sub-models, there is an asynchronous problem of sub-model loading when loading the scene. The existing asynchronous problem will lead to an error when obtaining the sub-model and binding events to it, such as prompting the sub-model to be undefined. Therefore, this problem should be solved first.

ht.Default.handleModelLoaded = function(data) {// Callback when model load is complete}Copy the code

Once the model-loading asynchrony problem is solved with handleModelLoaded, you can perform event-binding operations on the model within the function.

We first declare an array, which is the tag names of the three models. We get the three models through the for loop:

Var fanArr = [var fanArr = ['Fan _ blade'.'Fan _ Case 2'.'Fan _ Hub Housing'];Copy the code

Then operate on the fan housing model within the function of the handleModelLoaded method:

for(var i = 0; i < fanArr.length; I++) {// the fan parts become transparent when the roller control is pulled far and closeif (data == 'Models/Mechanical equipment/Wind turbine /' + fanArr[i] + '.json') {
        var model = ht.Default.getShape3dModel('Models/Mechanical equipment/Wind turbine /' + fanArr[i] + '.json'); Var tags = g3d.dm().getDatabyTag (fanArr[I]); // Bind the wheel event g3d.getView().adDeventListener ('mousewheel'.functionVar distance = ht.default.getDistance (g3d.geteye (), [0, 9500, 0]);ifDistance < 2700 && distance > 2100'shape3d.transparent'.true);
                tags.setStyle('shape3d.opacity', 0.5);
                tags.setStyle('shape3d.visible'.true); // Pull away to hide the display boxfor (var j2 = 0; j2 < eightArr.length; j2++) {
                    var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');
                    textViews.setStyle('3d.visible'.false); }}else if(distance > 2700) {// Distance back to original find.setstyle (distance > 2700)'shape3d.transparent'.false);
                tags.setStyle('shape3d.opacity', 1);
            }
            else if(Distance < 2100) {// Close close to hidden chassis find.setstyle (distance < 2100) {// Close to hidden chassis find.setstyle ('shape3d.visible'.false); }}}})Copy the code

This achieves the first goal, successfully achieving the fan housing transparency to hidden effect when the roller rolls.

Then move on to the second goal.

2. The corresponding popup window appears when you click the internal parts of the fan

To achieve this effect, you simply take the part model and bind it to a click event (click to show popovers, click to hide popovers).

First declare an array of parts:

Var parts = ['Fan _ control cabinet'.'fan _ generator'.'Fan _ Air cooling unit'.'Blower _ brake coupling'.'Fan _ oil cooling unit'.'Fan _ Gear box'.'Fan _ Spindle'.'Fan _ Rotor Gear'.'Fan - Rotor system'];Copy the code

This code is then implemented, also in a function of the handleModelLoaded method:

// Bind 9 widgets to popover click event g3d.mi(function(e) {// Interactive event listener // bind click eventsif (e.kind === 'clickData') {
        for (var j = 0; j < parts.length; j++) {
            if (e.data.getTag() === parts[j]) {
                for(var j2 = 0; j2 < parts.length; J2 ++) {var textViews = g3d.dm().getDatabyTag (eightArr[j2] +) {var textViews = g3d.dm()'show');
                    textViews.setStyle('3d.visible'.false); Var textView = g3d.dm().getDatabyTag (eightArr[j] +'show');
                textView.setStyle('3d.visible'.true); } // Popover click eventsif (e.data.getTag() === parts[j] + 'show') {
                var textView2 = g3d.dm().getDataByTag(parts[j] + 'show');
                textView2.setStyle('3d.visible'.false); }}}})Copy the code

In the realization of parts click display popup and click popup to hide the effect, the last step is to complete the fan blade rotation effect.

3, fan blade rotation effect

The principle of fan blade rotation is very simple. In essence, it is to control the parameters of rotation and realize the dynamic effect of blade rotation by increasing the parameter value through startAnim method.

Get the fan blade model, then modify and assign the rotation parameters. The code implementation is also in the handleModelLoaded method function.

// Fan blades rotateif (data == 'Models/Mechanical equipment/wind turbine/fan/hub housing.json') {
    var rotation = ' ';
    var deg = Math.PI / 180;
    var speed = 2;
    function animationVar modelWheel = g3d.dm().getDatabyTag ()'Fan _ Hub Housing'); Ht.default. startAnim({duration: 5500, // Animation cycle milliseconds, Default action:function (v, t) {
                rotation = [0, 0, deg * (speed--)];
                modelWheel.setRotation3d(rotation);
            },
            finishFunc: function() {// Call animation() after the animation ends; } }) } animation(); }Copy the code

4. Complete code

After completing the three functional requirements, the complete core code is shown as follows:

Var fanArr = [var fanArr = ['Fan _ blade'.'Fan _ Case 2'.'Fan _ Hub Housing']; Var parts = ['Fan _ control cabinet'.'fan _ generator'.'Fan _ Air cooling unit'.'Blower _ brake coupling'.'Fan _ oil cooling unit'.'Fan _ Gear box'.'Fan _ Spindle'.'Fan _ Rotor Gear'.'Fan - Rotor system'];
ht.Default.handleModelLoaded = function(data) {// Callback to model loading completionfor(var i = 0; i < fanArr.length; I++) {// the fan parts become transparent when the roller control is pulled far and closeif (data == 'Models/Mechanical equipment/Wind turbine /' + fanArr[i] + '.json') {
            var model = ht.Default.getShape3dModel('Models/Mechanical equipment/Wind turbine /' + fanArr[i] + '.json');
            // console.log(model);
            var tags = g3d.dm().getDataByTag(fanArr[i]);
            g3d.getView().addEventListener('mousewheel'.functionVar distance = ht.default.getDistance (g3d.geteye (), [0, 9500, 0]);ifDistance < 2700 && distance > 2100'shape3d.transparent'.true);
                    tags.setStyle('shape3d.opacity', 0.5);
                    tags.setStyle('shape3d.visible'.true); // Pull away to hide the display boxfor (var j2 = 0; j2 < eightArr.length; j2++) {
                        var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');
                        textViews.setStyle('3d.visible'.false); }}else if(distance > 2700) {// Distance back to original find.setstyle (distance > 2700)'shape3d.transparent'.false);
                    tags.setStyle('shape3d.opacity', 1);
                }
                else if(Distance < 2100) {// Close close to hidden chassis find.setstyle (distance < 2100) {// Close to hidden chassis find.setstyle ('shape3d.visible'.false); }} // 9 widgets with popover binding click event g3d.mi(function(e) {// Interactive event listenerif (e.kind === 'clickData') {
            for (var j = 0; j < parts.length; j++) {
                if (e.data.getTag() === parts[j]) {
                    for (var j2 = 0; j2 < parts.length; j2++) {
                        var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');
                        textViews.setStyle('3d.visible'.false);
                    }
                    var textView = g3d.dm().getDataByTag(eightArr[j] + 'show');
                    textView.setStyle('3d.visible'.true); } // Popover click eventsif (e.data.getTag() === eightArr[j] + 'show') {
                    var textView2 = g3d.dm().getDataByTag(eightArr[j] + 'show');
                    textView2.setStyle('3d.visible'.false); }}}}) // Fan blade rotationif (data == 'Models/Mechanical equipment/wind turbine/fan/hub housing.json') {
        var rotation = ' ';
        var deg = Math.PI / 180;
        var speed = 2;
        function animationVar modelWheel = g3d.dm().getDatabyTag ()'Fan _ Hub Housing'); Ht.default. startAnim({duration: 5500, // Animation cycle milliseconds, Default action:function (v, t) {
                    rotation = [0, 0, deg * (speed--)];
                    modelWheel.setRotation3d(rotation);
                },
                finishFunc: function() {// Call animation() after the animation ends; } }) } animation(); }}Copy the code

conclusion

The fan demo function of the implementation of the overall principle is very simple, all changes do not leave its case, the final is to obtain the object and then binding events to achieve the effect. No matter how complex a function is, it is found after analysis that it is only a combination of simple and small functions to achieve a big function.

Therefore, the foundation is the most important in the learning process, no matter how big the project is resolved to the smallest, it is still achieved step by step through the basic code.