ThreeJS教程:曲线路径管道TubeGeometry

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

曲线路径管道TubeGeometry

管道TubeGeometry

管道TubeGeometry几何体的功能就是基于一个3D曲线路径,生成一个管道几何体。

构造函数格式:TubeGeometry(path, tubularSegments, radius, radiusSegments, closed)
参数
path扫描路径,路径要用三维曲线
tubularSegments路径方向细分数,默认64
radius管道半径,默认1
radiusSegments管道圆弧细分数,默认8
closedBoolean值,管道是否闭合

样条曲线生成圆管案例

// 三维样条曲线
const path = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-50, 20, 90),
    new THREE.Vector3(-10, 40, 40),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(60, -60, 0),
    new THREE.Vector3(70, 0, 80)
]);

// path:路径   40:沿着轨迹细分数  2:管道半径   25:管道截面圆细分数
const geometry = new THREE.TubeGeometry(path, 40, 2, 25);

观察管道内壁

threejs默认只渲染mesh三角形的正面,如果想看到管道内壁,可以设置双面渲染THREE.DoubleSide

const material = new THREE.MeshLambertMaterial({
    side:THREE.DoubleSide,//双面显示看到管道内壁
});

测试其他曲线

你也可以使用下面直线替换上面的样条曲线查看圆管生成效果。

// LineCurve3创建直线段路径
const path = new THREE.LineCurve3(new THREE.Vector3(0, 100, 0), new THREE.Vector3(0, 0, 0));

三维二次贝塞尔曲线生成管道几何体

// p1、p2、p3表示三个点坐标
const p1 = new THREE.Vector3(-80, 0, 0);
const p2 = new THREE.Vector3(20, 100, 0);
const p3 = new THREE.Vector3(80, 0, 100);
// 三维二次贝赛尔曲线
const path = new THREE.QuadraticBezierCurve3(p1, p2, p3);

CurvePath多段路径生成管道案例

CurvePath组合曲线,也可以作为TubeGeometry的参数1,用于生成管道几何体。

下面组合曲线CurvePath是由一段三维贝塞尔曲线QuadraticBezierCurve3加上两段3D直线LineCurve3拼接组成。

// 创建多段线条的顶点数据
const p1 = new THREE.Vector3(0, 0,100)
const p2 = new THREE.Vector3(0, 0,30);
const p3 = new THREE.Vector3(0, 0,0);
const p4 = new THREE.Vector3(30, 0, 0);
const p5 = new THREE.Vector3(100, 0, 0);
// 1. 3D直线线段
const line1 = new THREE.LineCurve3(p1, p2);
// 2. 三维二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(p2, p3, p4);
// 3. 3D直线线段
const line2 = new THREE.LineCurve3(p4, p5);

const CurvePath = new THREE.CurvePath(); 
// 三条线拼接为一条曲线
CurvePath.curves.push(line1, curve, line2); 

// CurvePath:路径   40:沿着轨迹细分数  2:管道半径   25:管道截面圆细分数
const geometry = new THREE.TubeGeometry(CurvePath, 50, 2, 25);

上一篇:ThreeJS教程:组合曲线CurvePath拼接曲线 (mvrlink.com)

下一篇:ThreeJS教程:旋转成型LatheGeometry (mvrlink.com)

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