如何使用STLExporter将Three.js模型导出为.stl格式文件

1. 集成STLExporter工具 #

STLExporter是Three.js官方配套的STL导出工具，你可以按项目类型选择对应引入方式：

• 原生HTML/JS项目：将STLExporter的源码保存为本地的STLExporter.js文件，在HTML中先引入Three.js核心文件，再引入STLExporter.js，最后引入你自己的业务脚本即可。
• 模块化项目（Vue/React/Vite/Webpack等）：将STLExporter源码保存为可导出的模块文件，在需要使用的脚本中通过import { STLExporter } from './路径/STLExporter.js'引入即可。

2. 通用导出逻辑 #

不管是你从零搭建的原生Three.js模型，还是导入后修改过属性的GLB/GLTF模型，导出逻辑完全通用，按以下步骤操作即可：

实例化导出器 #

const stlExporter = new STLExporter();

配置导出参数 #

你可以按需选择导出二进制或ASCII格式的STL：

const exportConfig = {
  binary: true, // 二进制格式体积更小，兼容性更好，推荐开启
}

执行导出 #

直接把你要导出的对象传入parse方法即可，支持传入的对象类型包括：单个Mesh实例、Group组实例、整个Scene场景实例。

// 示例：导出整个场景
const exportResult = stlExporter.parse(scene, exportConfig);

// 示例：导出单个自定义Mesh
// const exportResult = stlExporter.parse(myCustomMesh, exportConfig);

// 示例：导出GLB导入后修改过的模型
// const exportResult = stlExporter.parse(gltf.scene, exportConfig);

触发本地下载 #

你需要一个简单的工具函数，把导出的内容转成文件供用户下载：

function saveSTLFile(data, fileName = 'exported_model.stl', isBinary = true) {
  const blob = isBinary 
    ? new Blob([data], { type: 'application/octet-stream' })
    : new Blob([data], { type: 'text/plain' });
  
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = fileName;
  downloadLink.click();
  URL.revokeObjectURL(downloadLink.href);
}

// 调用下载
saveSTLFile(exportResult, 'my_model.stl', exportConfig.binary);

3. 常见场景注意事项 #

• 导出GLB/GLTF修改后的模型时，如果你只需要导出其中某几个修改过的Mesh，可以遍历gltf.scene.children找到对应的Mesh实例，或者把需要导出的Mesh放到一个新的THREE.Group中，再把Group传入导出方法即可。
• STL格式本身不支持存储材质、颜色等属性，导出后只会保留模型的几何形状信息。
• 导出前确认你需要导出的模型visible属性为true，否则导出器会自动忽略该模型。
• 如果导出的模型出现坐标偏移，可以在导出前临时把模型的位置设为(0,0,0)，导出完成后再恢复原位置即可。

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