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

最新推荐文章于 2024-08-23 10:47:48 发布

ThingJS_小锘

最新推荐文章于 2024-08-23 10:47:48 发布

阅读量976

点赞数

分类专栏： ThingJS 3D可视化物联网文章标签： javascript

本文链接：https://blog.csdn.net/ThingJS/article/details/108647620

版权

这篇博客介绍了如何使用ThingJS进行3D建模，包括矩形、多边形和圆形的创建。通过获取坐标点，可以定义多边形的形状，如矩形的四个顶点或圆形的半径和圆心。ThingJS提供PolygonRegion属性用于定义区域，并允许自定义区域的颜色、边框和不透明度，适合前端工程师使用。

摘要由CSDN通过智能技术生成

只有封闭曲线才有"内部"与"外部"之别.例如,椭圆是封闭曲线,故有椭圆的内部与椭圆的外部的概念。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，传入点坐标并按照自己喜欢的样式，设置区域颜色、边框颜色或不透明度等。

完整官方示例供参考。