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