如何使用Three.js在两个TubeBufferGeometry之间绘制平面？

你已经搞定了两个平行的闭合管状结构，要填充它们之间的区域其实挺简单——因为这两条曲线是共面（Z=0平面）的嵌套闭合曲线，我们可以利用Three.js的Shape和ShapeBufferGeometry直接生成这个填充面。

具体实现步骤： #

• 把两个CatmullRomCurve3曲线转换成2D路径（提取X、Y坐标就行，Z值都是0可以忽略）
• 创建一个外层Shape，将内层曲线作为**孔洞（holes）**添加进去
• 用这个带孔洞的Shape生成平面几何体，赋予黄色材质后加到场景里

修改后的完整代码示例： #

// 你的原始曲线和管状几何体代码
var closedSpline = new THREE.CatmullRomCurve3( [ 
    new THREE.Vector3( -60, -100, 0 ), 
    new THREE.Vector3( -60, 20, 0 ), 
    new THREE.Vector3( -60, 120, 0 ), 
    new THREE.Vector3( 60, 120, 0 ), 
    new THREE.Vector3( 60, -100, 0 )
] ); 
closedSpline.curveType = 'catmullrom'; 
closedSpline.closed = true; 

var closedSpline1 = new THREE.CatmullRomCurve3( [ 
    new THREE.Vector3(-50, -90, 0), 
    new THREE.Vector3(-50, 10, 0 ), 
    new THREE.Vector3(-50, 110, 0 ), 
    new THREE.Vector3(50, 110, 0 ), 
    new THREE.Vector3(50, -90, 0 ) 
] ); 
closedSpline1.curveType = 'catmullrom'; 
closedSpline1.closed = true; 

// 生成管状几何体（你的原始代码）
var tubeGeometry = new THREE.TubeBufferGeometry( closedSpline, 100, 1,5, true ); 
var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } ); 
var mesh = new THREE.Mesh( tubeGeometry, material ); 
scene.add( mesh ); 

var tubeGeometry1 = new THREE.TubeBufferGeometry( closedSpline1, 100, 1,5, true ); 
var material1 = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } ); 
var mesh1 = new THREE.Mesh( tubeGeometry1, material1 ); 
scene.add( mesh1 ); 

// 新增：生成两个曲线之间的黄色填充面
// 1. 将3D曲线转换为2D路径点（匹配Tube的分段数）
function curveToShapePoints(curve) {
    return curve.getPoints(100).map(point => new THREE.Vector2(point.x, point.y));
}

// 2. 创建外层Shape，并添加内层曲线作为孔洞
var outerShape = new THREE.Shape(curveToShapePoints(closedSpline));
outerShape.holes.push(new THREE.Path(curveToShapePoints(closedSpline1)));

// 3. 生成填充面几何体并添加到场景
var fillGeometry = new THREE.ShapeBufferGeometry(outerShape);
var fillMaterial = new THREE.MeshLambertMaterial({ 
    color: 0xffff00, 
    side: THREE.DoubleSide // 开启双面渲染，确保正反都能看到黄色
}); 
var fillMesh = new THREE.Mesh(fillGeometry, fillMaterial);
scene.add(fillMesh);

关键细节提醒： #

• curve.getPoints(100)：采样点数量和你创建Tube时的分段数保持一致，能让填充面的精度和管状结构匹配，避免出现错位
• 如果发现填充区域不对，大概率是内外曲线的缠绕顺序不一致（一个顺时针一个逆时针），可以反转内层路径的点顺序试试：curveToShapePoints(closedSpline1).reverse()

这样就能得到你想要的两个红色管状之间的黄色填充平面啦！

内容的提问来源于stack exchange，提问作者GAURANG KORANT