3D Configuration Visualization Solution

The application of HTML5 WebGL in three-dimensional has been well developed, making it easy to configure in three-dimensional (industrial control) as well!The three-dimensional configuration software improves the management efficiency of industrial control, and greatly improves the resource management and risk control of industrial control.

Traditional three-dimensional configurations are generally local applications, and this case uses a three-dimensional configuration based on browser B/S architecture.

This case simulates a simple industrial control scenario for an oil field, and the model generally includes Oil well, separator, heating furnace, natural gas, external pump. It also includes pipeline flow and flow direction.The whole process of oil extraction, processing and output is described.

Make a model

The first step is to model. The design group uses 3D modeling tools 3d max or c4d to model the oil field equipment.After modeling, export files in obj or gltf formats, which are the best file formats supported by our three-dimensional rendering engine.

All the modeled model files will eventually be placed in the back-end model library, which is managed in the catalog as shown in the following figure:

Models to be made include oil wells, separators, heating furnaces, natural gas, and external pumps, as shown in the following figure.

Load Model

Loading a model uses the engine model's load function to load the model, as in the obj model, as shown in the following code:

new mono.OBJMTLLoader().load( 'youjing.obj', 'youjing.mtl', '',  (node)=> {
    node.type = 'obj';

If you load an oil well model, because loading the model is an asynchronous process, there will be a callback function. After loading, in the callback function, add the three-dimensional object generated by the model file to the scene container box, and then the scene will display our three-dimensional object, as shown in the following figure:

3D Scene Build

By creating a Network3D object, you can create a three-dimensional scene object, as shown in the following code:

const box = new mono.DataBox();
    const network = new TopoNetwork(box, null, 'monoCanvas');
    network.mode = 'editor';
    window.network = network; // todo
    this.network = network;
    network.setRenderSelectFunction(() => false);
    make.Default.path = './static/myModellib/';

    network.setClearColor(0, 0, 0);

    const directionalLight = new mono.DirectionalLight(0x333333, 0.3);
    directionalLight.setDirection(new mono.Vec3(0, 1, 1));
    let pointLight = new mono.PointLight(0xeae5e1, 0.3);
    pointLight.setPosition(2000, 2000, 2000);
    pointLight = new mono.PointLight(0xeae5e1, 0.4);
    pointLight.setPosition(-2000, 2000, 2000);
    pointLight = new mono.PointLight(0xeae5e1, 0.3);
    pointLight.setPosition(2000, 2000, -2000);
    pointLight = new mono.PointLight(0xeae5e1, 0.4);
    pointLight.setPosition(-2000, 2000, -2000);
    box.add(new mono.AmbientLight(0x888888));


Drag model to generate scene

From the model list, drag the model onto a three-dimensional scene object to create the model object, as shown in the following figure:

On the model button, you need to listen for drag or dragstart events, which are encapsulated in a separate class, Dragger.js, that specifically handles dragstart events:

 addDragger(parent, subClass, option) {
    parent.addEventListener('dragstart', (e) => {
      let target = null;
      //  Get all the bubbling elements
      const path = eventPath(e);
      for (let i = 0; i < path.length; i += 1) {
        if (path[i].classList && path[i].classList.contains(subClass)) {
          target = path[i];

Create Pipeline

In a three-dimensional scene, you can create a three-dimensional pipe directly by dotting, as shown in the following code:

 let path = new mono.Path(pipePoints);
    path = mono.PathNode.prototype.adjustPath(path, 2, 2);
    const node = new mono.PathNode(path, 10, 3, 20);
      'm.type': 'phong',
      'm.side': 'both',
      'm.normalType': mono.NormalTypeSmooth,
      'm.color': '#E35944',
      'm.ambient': '#E35944',

The pipePoints are the three-dimensional vertices recorded by the dots.

Pipeline animation

Pipeline animation is a dynamic flow effect created by the offset property of the pipeline map as shown in the following code:

 node.animate = new mono.Animate({
      from: pipeDirection === 'forward' ? 0 : 1,
      to: pipeDirection === 'forward' ? 1 : 0,
      dur: 1000,
      reverse: false,
      repeat: Number.POSITIVE_INFINITY,
      onUpdate(value) {
        node.setStyle('m.texture.offset', new mono.Vec2(value, 0));

The end result is as follows:

Overall effect

Through R&D editing, the final display effect is roughly as follows:

More effects are not highlighted in this article. Interested in obtaining demo, please email: terry.tan@servasoft.com

Welcome to the public number "Uncle ITman Biao".Biao Shu, with more than 10 years of development experience, is currently the system architect, technical director, technical trainer, and professional planner of the company.In-depth research in computer graphics, WebGL, front-end visualization.I have a strong interest in training and training programmers'thinking ability and programmer career planning.

Tags: Front-end network html5

Posted on Thu, 13 Feb 2020 20:14:51 -0800 by stride-r