如何在Three JS中计算3D模型面之间的交线？

需求描述 #

假设有两个重叠的3D对象（例如立方体与圆柱体），需要获取它们面之间相交区域的交线集合，最终实现隐藏原3D对象后仅显示这些交线的效果：

• 初始状态：立方体与圆柱体重叠的3D场景
• 交线预览：原对象可见，同时高亮显示交线
• 最终效果：隐藏原对象，仅保留交线展示
• 视角示例：从不同角度观察交线的形态

实现方案 #

Three.js本身没有内置的交线提取工具，但可以通过几何布尔运算（CSG）结合线提取逻辑实现该功能，以下是具体方案：

1. 依赖工具库 #

推荐使用成熟的CSG库来简化相交计算：

• three-csg-ts：维护活跃的TypeScript版本CSG库，适配新版Three.js，支持几何体的交集、并集、差集运算，可提取交线数据。
• ThreeBSP：经典的CSG库，部分旧版本可能需要适配新版Three.js，适合快速验证需求。

2. 具体实现步骤（以three-csg-ts为例） #

步骤1：安装并引入库

npm install three-csg-ts

import { CSG } from 'three-csg-ts';

步骤2：创建目标几何体与网格

// 创建立方体和圆柱体
const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshStandardMaterial({ color: 0xffffff });
const boxMesh = new THREE.Mesh(boxGeo, boxMat);

const cylinderGeo = new THREE.CylinderGeometry(1, 1, 3, 32);
const cylinderMat = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);
cylinderMesh.position.x = 1; // 让两个几何体重叠

步骤3：计算交集并提取交线

// 将网格转为CSG对象
const boxCSG = CSG.fromMesh(boxMesh);
const cylinderCSG = CSG.fromMesh(cylinderMesh);

// 计算两个几何体的交集
const intersectionCSG = boxCSG.intersect(cylinderCSG);

// 从CSG对象中提取交线的顶点数据
const edges = [];
// 遍历CSG的多边形，提取每条边的顶点
intersectionCSG.polygons.forEach(poly => {
  for (let i = 0; i < poly.vertices.length; i++) {
    const v1 = poly.vertices[i].pos;
    const v2 = poly.vertices[(i + 1) % poly.vertices.length].pos;
    edges.push(new THREE.Vector3(v1.x, v1.y, v1.z));
    edges.push(new THREE.Vector3(v2.x, v2.y, v2.z));
  }
});

步骤4：创建交线并隐藏原对象

// 创建交线的几何体与材质
const lineGeo = new THREE.BufferGeometry().setFromPoints(edges);
const lineMat = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 });
const intersectionLines = new THREE.LineSegments(lineGeo, lineMat);

// 添加交线到场景，隐藏原网格
scene.add(intersectionLines);
boxMesh.visible = false;
cylinderMesh.visible = false;

3. 注意事项 #

• 确保目标几何体是闭合且无拓扑错误的（比如没有缺失面、重叠顶点），否则布尔运算可能返回异常结果。
• 对于高复杂度几何体，建议先简化顶点数量，避免计算性能瓶颈。
• 如果需要实时更新交线（比如拖动对象改变重叠状态），需要在每一帧重新执行CSG计算和交线提取，注意优化计算逻辑减少性能消耗。

内容的提问来源于stack exchange，提问作者Jesse Pangburn