乐趣区

关于javascript:ThingJS教你创建一个逃不掉的多边形区域

jiezi

兴许命运就是一次关闭曲线的行走，无论怎么走都是一个多边形。ThingJS 教你创立一个逃不掉的多边形区域，js 语法实现超简略。

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

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();})

ThingJS 教你 3D 开发，做出甲方爸爸拍案叫绝的我的项目！

退出移动版