ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形

关注

原创最新推荐文章于 2025-08-13 15:45:18 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

ThingJS开发使用感受出于为了实现有关厂区的数字孪生项目，断断续续使用ThingJS平台开发一年左右，做一个使用感受的总结。在编码方面，笔者的编码方式和博客中的描述基本一致：“由于平台提供的代码编码端体验不佳，我们不得不先在本地进行开发，再将相关代码复制到在线平台，而调试修改代码也是如此繁琐”。个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目，类似于大屏展示，这种纯数据展示；如果要实现一个较为庞大复杂的业务场景时，就不太方便，开发难度也会随之增加。阅读详情

只有封闭曲线才有"内部"与"外部"之别.例如,椭圆是封闭曲线,故有椭圆的内部与椭圆的外部的概念。ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形。

矩形区域和圆形区域都很好画，大部分建模工具可直接拖拽生成，但多边形区域则需要确定多边形要经过的点，得出多边形的最终形状。

ThingJS绘制多边形区域，以矩形和圆形为例，效果展示如下图。

ThingJS在线平台通过获取多个点坐标来确定多边形的形状，例如矩形获取4个世界坐标系下的坐标组合，构成多边形或矩形的点。

 var points = [[0, 0, 0], [5, 0, 0], [5, 0, 5], [0, 0, 5]];

如果是圆半径，获取圆半径和圆心世界坐标后，需要根据圆形和半径计算坐标点。

var radius = 3;// 圆半径
    var center = [10, 0, 0]; // 圆心世界坐标
    // 根据圆形和半径计算坐标点
    var points = [];
    for (var degree = 0, y = 0; degree <= 360; degree += 10) {
        var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
        var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
        var pos = THING.Math.addVector([x, y, z], center);
        points.push(pos);
    }

创建区域需要定义一个type属性PolygonRegion，传入点坐标并按照自己喜欢的样式，设置区域颜色、边框颜色或不透明度等。

完整官方示例供参考。

/**
 * 说明：创建多边形区域
 */
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址
});

new THING.widget.Button('创建区域', function () {
    // 构成多边形的点（取世界坐标系下的坐标）
    var points = [[0, 0, 0], [5, 0, 0], [5, 0, 5], [0, 0, 5]];

    // 创建区域
    var region = app.create({
        type: 'PolygonRegion',
        points: points, // 传入世界坐标系下点坐标
        style: {
            regionColor: '#ff0000', // 区域颜色
            lineColor: '#00ff00', // 边框颜色
            regionOpacity: 1 // 不透明度 (默认是 0.5 半透明)
        }
    })
})

new THING.widget.Button('创建圆形区域', function () {
    var radius = 3;// 圆半径
    var center = [10, 0, 0]; // 圆心世界坐标
    // 根据圆形和半径计算坐标点
    var points = [];
    for (var degree = 0, y = 0; degree <= 360; degree += 10) {
        var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
        var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
        var pos = THING.Math.addVector([x, y, z], center);
        points.push(pos);
    }

    // 创建区域
    var region = app.create({
        type: 'PolygonRegion',
        points: points, // 点坐标
        style: {
            regionColor: 'rgb(0,0,255)', // 区域颜色
        }
    })
})

new THING.widget.Button('删除', function () {
    var regions = app.query('.PolygonRegion');
    regions.destroy();
})