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