如何过滤实体网格内部节点并绘制模型表面？（基于Three.js）

作为经常折腾计算几何和Three.js可视化的开发者，我来给你拆解这个问题——分两部分讲，先搞定内部节点的过滤逻辑，再聊Three.js里的落地方法。

一、过滤内部节点的稳定算法 #

你需要先明确：哪些点是“内部节点”？通常是指那些不需要参与表面面生成的点（比如在实体网格内部，不会被渲染到的点）。这里有几个稳定的判断方法，覆盖不同场景：

1. 凸包检测法（适合凸形网格） #

如果你的网格是凸形状的，内部点一定不在点集的凸包上。用凸包算法（比如Andrew单调链算法、Graham扫描法）计算所有点的凸包，凸包上的点就是边界点，剩下的就是可以过滤的内部点。

• 优点：实现简单，计算速度快，稳定性高；
• 缺点：只适用于凸形网格，非凸场景不适用。

2. 射线法（Ray Casting Algorithm）（适合任意多边形/网格边界） #

如果你的网格有明确的闭合边界多边形（不管凸还是凹，甚至带洞），用射线法判断点是否在边界内部：

• 逻辑：从测试点向任意方向（比如x轴正方向）发射一条射线，统计射线与边界多边形的交点数量；
• 规则：交点数为奇数 → 点在内部；偶数 → 点在外部；边界上的点需要单独判断（比如检查点是否落在多边形的某条边上）。
• 优点：支持复杂边界，稳定性极强，几乎没有误判；
• 缺点：需要提前明确边界多边形的顶点顺序（必须是闭合的、有序的）。

3. Delaunay剖分后过滤内部面（保留内部点但只渲染表面） #

如果不想提前过滤点，也可以先对所有点做Delaunay剖分，再判断每个三角面是否是边界面：

• 边界面的特征：它的某一条边只属于一个三角面（内部边会被两个相邻三角面共享）；
• 操作：统计每条边的出现次数，只保留包含“仅出现一次的边”的三角面；
• 优点：不需要提前区分边界/内部点，适合需要保留内部点数据但只渲染表面的场景；
• 缺点：如果内部点极多，剖分计算量会稍大。

二、Three.js相关解决方案 #

Three.js本身没有内置的Delaunay剖分工具，但有几个成熟的落地路径：

1. 结合第三方Delaunay库（推荐） #

用d3-delaunay（这个库计算快、稳定性高）完成剖分，再结合Three.js生成几何体。举个2D投影网格的示例：

// 1. 准备数据：假设你有一组3D顶点，先投影到XY平面
const allPoints = [/* 你的Three.js Vector3数组 */];
const points2D = allPoints.map(p => [p.x, p.y]);

// 2. 生成Delaunay剖分
const delaunay = d3.Delaunay.from(points2D);
const triangles = delaunay.triangles;

// 3. 过滤内部面：统计每条边的出现次数
const edgeCount = new Map();
for (let i = 0; i < triangles.length; i += 3) {
  const [a, b, c] = [triangles[i], triangles[i+1], triangles[i+2]];
  // 边按从小到大排序，避免重复统计（a-b和b-a算同一条边）
  const edges = [
    [Math.min(a,b), Math.max(a,b)],
    [Math.min(b,c), Math.max(b,c)],
    [Math.min(c,a), Math.max(c,a)]
  ];
  edges.forEach(edge => {
    const key = edge.join(',');
    edgeCount.set(key, (edgeCount.get(key) || 0) + 1);
  });
}

// 4. 筛选出边界面的索引
const filteredIndices = [];
for (let i = 0; i < triangles.length; i += 3) {
  const [a, b, c] = [triangles[i], triangles[i+1], triangles[i+2]];
  const edges = [
    [Math.min(a,b), Math.max(a,b)],
    [Math.min(b,c), Math.max(b,c)],
    [Math.min(c,a), Math.max(c,a)]
  ];
  // 只要有一条边是边界边（仅出现一次），就保留这个三角面
  const isBoundaryFace = edges.some(edge => edgeCount.get(edge.join(',')) === 1);
  if (isBoundaryFace) {
    filteredIndices.push(a, b, c);
  }
}

// 5. 生成Three.js几何体并渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(allPoints);
geometry.setIndex(filteredIndices);
geometry.computeVertexNormals(); // 计算法线让光照更自然

const material = new THREE.MeshStandardMaterial({ color: 0x44aa88, wireframe: false });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

2. 用ConvexGeometry快速生成凸面网格 #

如果你的网格是凸形的，直接用Three.js内置的ConvexGeometry——它会自动计算点集的凸包，生成表面网格，相当于自动过滤了内部点：

import { ConvexGeometry } from 'three/addons/geometries/ConvexGeometry.js';

// 直接传入所有点，生成凸包几何体
const convexGeometry = new ConvexGeometry(allPoints);
const mesh = new THREE.Mesh(convexGeometry, new THREE.MeshBasicMaterial({ wireframe: true }));
scene.add(mesh);

• 优点：零额外代码，开箱即用；
• 缺点：仅适用于凸形网格。

3. 自定义射线法过滤内部点 #

如果你的网格有明确的边界多边形，可以在Three.js里实现射线法过滤内部点：

// 假设boundaryPoints是你的边界多边形顶点数组（闭合、有序）
function isPointInside(point, boundaryPoints) {
  let inside = false;
  const x = point.x, y = point.y;
  for (let i = 0, j = boundaryPoints.length - 1; i < boundaryPoints.length; j = i++) {
    const xi = boundaryPoints[i].x, yi = boundaryPoints[i].y;
    const xj = boundaryPoints[j].x, yj = boundaryPoints[j].y;
    const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

// 过滤内部点
const boundaryOnlyPoints = allPoints.filter(p => !isPointInside(p, boundaryPoints));

// 之后可以用这些边界点做Delaunay剖分或者直接生成ShapeGeometry

给新手的小建议 #

1. 先从2D场景入手测试算法，确认逻辑正确后再扩展到3D；
2. 如果是3D非凸实体网格，建议先提取表面边界，再用射线法过滤内部点；
3. 处理3D复杂网格时，可以考虑用四面体剖分库（比如tetra.js），但复杂度会高一些，先从简单场景练手。

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