兴许命运就是一次关闭曲线的行走,无论怎么走都是一个多边形。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开发,做出甲方爸爸拍案叫绝的我的项目!