Official case (15): 3D development constructor parameter measurement polygon area ThingJS

#Front end# #CAD# #IoT Visual Development#

1. Constructor for measurement
2. Mixed drawing of line and surface
3. Add HTML elements

Introduction: How to measure area in a 3D scene? The ThingJS platform implements multi-point measurement development, supports drawing the area of ​​a polygon at any point of the mouse, and uses the built-in angle measurement function to calculate the total length and footprint of the drawing, and it is better to understand the 3D scene.

Demo link:http://www.thingjs.com/guide/?m=sample

Constructor for measurement

The object of area measurement is a polygonal feature with geographic location (coordinates). Similar to the development method of line segment measurement, an object type constructor needs to be created, and attribute fields can be added to store information.
The ThingJS platform creates Constructor () The constructor assigns initial values ​​to the properties of the object. The construction parameter option can be arbitrarily extended in JS to achieve dynamic binding.

Mixed drawing of line and surface

In the image, four points can form an irregular quadrilateral or rectangle. The ThingJS example uses the principle of points and surfaces to create parameter groups through nodes and line segments, unify all coordinate points after the mouse click, and generate irregular measurements area. Then modify the style parameters (such as color, transparency) of the polygonal area to improve the visibility of the measured area.

 /**
     * 生成测量面
     * @param {Array} coordinates - 所有鼠标点击后的坐标点集合
     */
    createPolygon(coordinates) {
        var _this = this;
        if (_this.regionPolygon) {
            _this.regionPolygon.destroy();
            _this.polygonCard.remove();
            _this.opts.app.query('dashLine' + _this.opts.modelNum).destroy();
        }
        let coordinatesSort = [...coordinates];
        coordinatesSort.sort(function (a, b) {
            return a[1] - b[1];
        });
        let points01 = JSON.parse(JSON.stringify(coordinates));
        points01.forEach((v, k) => {
            v[1] = coordinatesSort[0][1];
        })
        let id = _this.opts.modelNum > 10 ? _this.opts.modelNum : '0' + _this.opts.modelNum;
        _this.regionPolygon = app.create({
            type: 'Shape',
            id: 'Area' + id,
            points: points01,  // 传入世界坐标系下点坐标
            height: 0.1,
            style: {
                color: '#F99D0B',  // 区域颜色
                opacity: 0.8  // 不透明度 (默认是 0.5 半透明)
            },
        })

The registration event of measurement is mainly based on mouse operation. Click the left button to add a node, right click or double-click to end the drawing, the mouse moves continuously to draw the measurement line segment, and click to delete the node. The overall code is consistent with the development logic of the measurement line segment.

Add HTML elements

The 2D panel on the screen is generally used to dynamically display the measurement details. It is an HTML table. The tbody tag is added to store the current measurement information to form an HTML table that combines the 3D scene with data analysis.
3D scene development is not advanced, as long as it combines ThingJS 's Internet of Things interface capabilities, and even uses HTML/CSS and other web development elements, 3D visualization development can be completed quickly.

/**
     * 为测量面板增加tbody标签存储当前测量信息
     */
    createPanel() {
        if ($('.empty')) {
            $('.empty').remove();
        }
        let tbody = `<tbody id="tb-polygon` + this.opts.modelNum + `" class="tj-group"></tbody>`
        $('.tj-table').prepend(tbody);
        this.table = $('#tb-polygon' + this.opts.modelNum);
    }

end

CAD measuring area requires a lot of button operations, which is a tool software. ThingJS is not for measuring itself, but for making it easier to measure area online and realize rapid analysis and decision-making. Therefore, it is more of a transformation of management methods and applied to digital twin technology solutions. .

About ThingJS

The ThingJS platform provides 3D visualization components of the Internet of Things, making 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. Scene building-3D script development-data docking-project deployment one-stop service to make development more efficient, and become a digital twin technology innovator with 200,000 developers !