如何使用React/JavaScript获取STL文件的相对尺寸？

当然可以实现，你只需要提取STL文件中所有顶点的三维坐标，计算出模型的包围盒（最小/最大坐标值），就能得到相对的宽、高、深尺寸。下面提供两种可行方案：

方案一：使用Three.js的STLLoader（推荐） #

Three.js自带成熟的STL解析工具，在React项目中可以直接集成，步骤如下：

1. 安装依赖

npm install three

2. 在React组件中实现解析逻辑

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

function STLDimensionsViewer() {
  const [dimensions, setDimensions] = useState(null);

  const loadSTL = async (file) => {
    const loader = new STLLoader();
    const buffer = await file.arrayBuffer();
    const geometry = loader.parse(buffer);
    
    // 计算包围盒
    geometry.computeBoundingBox();
    const box = geometry.boundingBox;
    
    // 计算各轴尺寸（相对值）
    const width = box.max.x - box.min.x;
    const height = box.max.z - box.min.z; // 可根据模型朝向调整轴对应关系
    const depth = box.max.y - box.min.y;
    
    setDimensions({ width, height, depth });
  };

  return (
    <div>
      <input 
        type="file" 
        accept=".stl" 
        onChange={(e) => e.target.files[0] && loadSTL(e.target.files[0])} 
      />
      {dimensions && (
        <div>
          <p>宽度: {dimensions.width.toFixed(2)}</p>
          <p>高度: {dimensions.height.toFixed(2)}</p>
          <p>深度: {dimensions.depth.toFixed(2)}</p>
        </div>
      )}
    </div>
  );
}

export default STLDimensionsViewer;

方案二：手动解析STL文件（无需第三方库） #

如果不想依赖Three.js，也可以手动解析STL的ASCII或二进制格式：

解析ASCII格式STL #

ASCII格式的STL会包含大量vertex x y z行，我们可以提取这些坐标：

async function getASCIIDimensions(file) {
  const text = await file.text();
  const vertexRegex = /vertex\s+([-+]?\d*\.?\d+)\s+([-+]?\d*\.?\d+)\s+([-+]?\d*\.?\d+)/g;
  
  let minX = Infinity, maxX = -Infinity;
  let minY = Infinity, maxY = -Infinity;
  let minZ = Infinity, maxZ = -Infinity;
  
  let match;
  while ((match = vertexRegex.exec(text)) !== null) {
    const x = parseFloat(match[1]);
    const y = parseFloat(match[2]);
    const z = parseFloat(match[3]);
    
    minX = Math.min(minX, x);
    maxX = Math.max(maxX, x);
    minY = Math.min(minY, y);
    maxY = Math.max(maxY, y);
    minZ = Math.min(minZ, z);
    maxZ = Math.max(maxZ, z);
  }
  
  return {
    width: maxX - minX,
    height: maxZ - minZ,
    depth: maxY - minY
  };
}

解析二进制格式STL #

二进制STL有固定结构：80字节头 + 4字节面片数 + 每个面片50字节（12个浮点数+2字节属性）：

async function getBinaryDimensions(file) {
  const buffer = await file.arrayBuffer();
  const view = new DataView(buffer);
  
  // 跳过80字节头和4字节面片数
  let offset = 84;
  const faceCount = view.getUint32(80, true);
  
  let minX = Infinity, maxX = -Infinity;
  let minY = Infinity, maxY = -Infinity;
  let minZ = Infinity, maxZ = -Infinity;
  
  for (let i = 0; i < faceCount; i++) {
    // 跳过法向量的3个浮点数（96位）
    offset += 12;
    // 读取3个顶点的坐标
    for (let j = 0; j < 3; j++) {
      const x = view.getFloat32(offset, true);
      const y = view.getFloat32(offset + 4, true);
      const z = view.getFloat32(offset + 8, true);
      
      minX = Math.min(minX, x);
      maxX = Math.max(maxX, x);
      minY = Math.min(minY, y);
      maxY = Math.max(maxY, y);
      minZ = Math.min(minZ, z);
      maxZ = Math.max(maxZ, z);
      
      offset += 12;
    }
    // 跳过2字节属性
    offset += 2;
  }
  
  return {
    width: maxX - minX,
    height: maxZ - minZ,
    depth: maxY - minY
  };
}

关键说明 #

• STL本身无单位，计算出的尺寸是基于模型顶点坐标的相对值，和建模时的单位比例一致
• 轴的对应关系（比如哪个轴对应高度）可以根据你的模型朝向自行调整
• 大文件建议用二进制解析，效率更高

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