ThreeJS教程：多边形轮廓Shape(圆弧)
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
多边形轮廓Shape(圆弧)
先掌握上节课关于Shape内容，再继续学习本节课关于Shape圆弧的介绍。
圆弧方法.arc()
圆弧方法.arc()使用方式和原来学习过的圆弧曲线ArcCurve整体相似，区别在于圆心定位方式有差异。
圆弧.arc()参数的圆心坐标是相对当前.currentPoint而言,而不是坐标原点。
下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。
// 下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。
const shape = new THREE.Shape();
shape.lineTo(100+50, 0); //.currentPoint变为(100+50,0)
// 圆弧.arc参数的圆心0,0坐标是相对当前.currentPoint而言，而不是坐标原点
shape.arc(-50,0,50,0,Math.PI/2); //.currentPoint变为圆弧线结束点坐标
console.log('currentPoint',shape.currentPoint);
// 绘制直线，直线起点：圆弧绘制结束的点 直线结束点：(0, 0)
shape.lineTo(0, 50);
另一种写法：直线和圆弧起点之间的缺口threejs内部会自动补上
// 下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。
const shape = new THREE.Shape();
shape.lineTo(100, 0); //.currentPoint变为(100,0)
// 圆弧.arc参数的圆心0,0坐标是相对当前.currentPoint而言，而不是坐标原点
shape.arc(0,0,50,0,Math.PI/2); //.currentPoint变为圆弧线结束点坐标
console.log('currentPoint',shape.currentPoint);
// 绘制直线，直线起点：圆弧绘制结束的点 直线结束点：(0, 0)
shape.lineTo(0, 50);
Shape作为几何体参数
Shape有直线之外的曲线，如果默认渲染不光滑，可以设置参数2提升
// shape:填充轮廓
const geometry = new THREE.ShapeGeometry(shape, 20);
const geometry = new THREE.ExtrudeGeometry(shape, {
depth:20,//拉伸长度
bevelEnabled:false,//禁止倒角
curveSegments:20,//shape曲线对应曲线细分数
});
绝对圆弧方法.absarc()
.absarc()圆心坐标不受到.currentPoint影响，以坐标原点作为参考，这一点和圆弧方法.arc()不同。
下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。
const shape = new THREE.Shape();
shape.lineTo(100, 0); //.currentPoint变为(100,0)
// absarc圆心坐标不受到.currentPoint影响，以坐标原点作为参考
shape.absarc(100,0,50,0,Math.PI/2); //.currentPoint变为圆弧线结束点坐标
console.log('currentPoint',shape.currentPoint);
shape.lineTo(0, 50);
另一种写法：直线和圆弧起点之间的缺口threejs内部会自动补上
const shape = new THREE.Shape();
shape.lineTo(100+50, 0); //.currentPoint变为(100+50,0)
// absarc圆心坐标不受到.currentPoint影响，以坐标原点作为参考
shape.absarc(100,0,50,0,Math.PI/2); //.currentPoint变为圆弧线结束点坐标
console.log('currentPoint',shape.currentPoint);
shape.lineTo(0, 50);