如何基于ThreeJS读取STL格式模型的三角形及顶点数据

STL模型通过ThreeJS官方STLLoader加载完成后，所有几何数据会被解析为BufferGeometry实例，直接从几何体属性中即可提取顶点、三角面数据，无需二次解析原始STL文件。

前置准备 #

• 引入ThreeJS核心库与官方扩展STLLoader，该加载器同时兼容ASCII格式、二进制格式STL文件，无需额外编写解析逻辑。

完整实现代码 #

1. 加载STL模型 #

import * as THREE from 'three';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

const loader = new STLLoader();
loader.load(
  'your-model-path.stl', // 替换为实际STL文件路径
  (geometry) => {
    // 加载完成后直接返回解析好的BufferGeometry，封装为Mesh实例
    const stlMesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial());
    // 调用提取方法获取数据
    const stlData = extractStlGeometryData(stlMesh);
    console.log('STL模型数据:', stlData);
  },
  (xhr) => {
    // 可选：加载进度回调
    console.log(`加载进度: ${Math.round(xhr.loaded / xhr.total * 100)}%`);
  },
  (err) => {
    console.error('STL加载失败:', err);
  }
);

2. 核心数据提取方法 #

/**
 * 提取STL Mesh的顶点与三角面数据
 * @param {THREE.Mesh} mesh STL模型对应的Mesh实例
 * @returns 顶点、三角面、面法线数据
 */
function extractStlGeometryData(mesh) {
  const geo = mesh.geometry;
  // 提取顶点数据
  const positionAttr = geo.getAttribute('position');
  const vertices = [];
  // position为Float32BufferAttribute，每3个连续值对应1个顶点的x/y/z坐标
  for (let i = 0; i < positionAttr.count; i++) {
    vertices.push({
      x: positionAttr.getX(i),
      y: positionAttr.getY(i),
      z: positionAttr.getZ(i)
    });
  }

  // 提取三角面数据
  const triangles = [];
  const indexAttr = geo.getIndex();
  if (indexAttr) {
    // 索引几何体：每3个索引值为一组，对应单个三角面的3个顶点序号
    for (let i = 0; i < indexAttr.count; i += 3) {
      const i1 = indexAttr.getX(i);
      const i2 = indexAttr.getX(i + 1);
      const i3 = indexAttr.getX(i + 2);
      triangles.push([vertices[i1], vertices[i2], vertices[i3]]);
    }
  } else {
    // 非索引几何体：顶点按顺序每3个为一组，直接组成三角面
    for (let i = 0; i < positionAttr.count; i += 3) {
      triangles.push([vertices[i], vertices[i + 1], vertices[i + 2]]);
    }
  }

  // 可选：提取STL自带的面法线数据
  const faceNormals = [];
  const normalAttr = geo.getAttribute('normal');
  if (normalAttr) {
    // STL法线按面存储，非索引几何体每3个顶点共享同一条面法线
    for (let i = 0; i < normalAttr.count; i += 3) {
      faceNormals.push({
        x: normalAttr.getX(i),
        y: normalAttr.getY(i),
        z: normalAttr.getZ(i)
      });
    }
  }

  return {
    vertices,
    triangles,
    faceNormals,
    totalVertices: vertices.length,
    totalTriangles: triangles.length
  };
}

注意事项 #

• STL原生格式不存储顶点索引、UV、材质分组信息，默认加载得到的是非索引几何体，此时三角面数量 = 顶点数量 / 3；如果需要消除重复顶点减少数据量，可以在加载后调用BufferGeometryUtils.mergeVertices(geometry)做顶点合并，合并后会生成索引，上述提取逻辑可自动兼容。
• 二进制STL文件头自带三角面总数字段，和提取结果中的totalTriangles数值一致，可用于校验数据完整性。
• 上述方法提取的是几何体本地坐标，如果模型做过平移、旋转、缩放变换，需要世界坐标系下的顶点数据时，要先将每个顶点坐标乘以mesh.matrixWorld做空间变换，不能直接使用几何体原始坐标。

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