ThingJS official demo: 3D visualization of underground pipelines to improve urban emergency response capacity

For cities, underground pipelines and their ancillary facilities are important infrastructure and lifeline to ensure the operation of cities. Now, in order to improve the construction and management level of underground pipelines, the demand for 3D visualization came into being.

How to use thingjs to quickly generate pipeline visualization demo, let me answer for you.

In the Internet of things, it is always difficult to detect pipelines. How to solve this pipeline supervision problem in a visual way? It is difficult to detect the status of pipelines in real time, whether in urban pipelines or communities, shopping malls and buildings. How can we realize the visual management of pipeline through today's technology?

The smart power visualization system is built to visualize all links of power generation, transmission, transformation, distribution, power consumption, dispatching and communication information level by level. It has the standard functions of power station environment visualization, power equipment visualization and power security visualization, and displays the location distribution of transmission network, substation and its internal equipment.

ThingJS - 3D visualization development platform for Internet of things

Pipeline js

 
/**
* Description: pipeline application
*/
var app = new THING.App({});

// Random pipeline connection point
function randomPoints() {
    var points = [[0, 0, 0]];
    var oldType = 2;
    for (var i = 0; i < 50; i++) {
        var old = points[points.length - 1];
        var type = Math.floor(Math.random() * 100) % 3;
        while (oldType == type) {
            type = Math.floor(Math.random() * 100) % 3;
        }
        oldType = type;
        var offset = (Math.random() * 2 + 1) * (Math.random() > 0.5 ? 1 : -1);
        points.push([
            type === 0 ? (old[0] + offset) : old[0],
            type === 1 ? (old[1] + offset) : old[1],
            type === 2 ? (old[2] + offset) : old[2],
        ]);
    }
    return points;
}

// Lay pipeline
var line = null;
var lineIdx = 1;
function build() {
    // Delete original pipeline
    if (line) { line.destroy(); }

    // Create route
    line = app.create({
        type: 'PolygonLine',
        points: randomPoints(),
        width: 0.2,
        style: {
            image: 'https://thingjs.com/static/images/poly_line_0' + lineIdx + '.png ', / / texture resources in pipeline
        }
    });

    // Toggle line mapping
    if (lineIdx < 4) { lineIdx++; }
    else { lineIdx = 1; }

    // Turn on UV animation
    line.scrollUV = true;

    // Set the most suitable camera observation position
    app.camera.fit();
}
build();
new THING.widget.Button('Rearrange', build);
 

Put this script into thingjs online development platform and click Run to form the pipeline case as shown in the figure.

The urban underground pipeline system is constantly improving. Thingjs 3D visualization of pipelines can greatly improve the urban emergency and disaster relief capacity.

Tags: Javascript

Posted by jstgermain on Wed, 25 May 2022 21:12:15 +0300