ThreeJS教程:多边形轮廓Shape(圆弧)

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

上一篇:ThreeJS教程:多边形轮廓Shape简介 (mvrlink.com)

下一篇:ThreeJS教程:多边形Shape(内孔.holes) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号