本文详解如何通过 cdn 在纯 html 环境中正确使用 three.js 的 `stlloader` 加载 `.stl` 文件，重点解决 es6 模块导入错误、路径配置失效及常见白屏问题。
在 Three.js 生态中，STLLoader 并非独立发布的 npm 包（如 stl-loader），而是作为官方 three 仓库的 内置扩展模块（ESM） 存在于 examples/jsm/loaders/STLLoader.js 路径下。你当前代码中尝试从 https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/loaders/STLLoader.min.js 导入，但该路径实际并不存在（STLLoader.min.js 是旧版 UMD 构建产物，不支持 import { STLLoader } from ‘…’ 语法），导致报错：
Uncaught SyntaxError: The requested module 'stl-loader' does not provide an export named 'STLLoader'✅ 正确做法是：统一使用官方 three 的 ESM 示例模块 CDN 地址，并通过 importmap 映射 three/addons/ 到对应路径，再按标准方式导入。
以下是可直接运行的完整示例（已验证兼容 Three.js v0.154+）：
Three.js STL Loader 示例 ? 关键要点说明：
- ✅ 路径必须精确：STLLoader 的 ESM 版本路径为 ‘three/addons/loaders/STLLoader.js’（注意 .js 后缀不可省略），而非 STLLoader.min.js 或任意第三方包。
- ✅ 依赖光照：STL 文件无材质信息，必须添加 AmbientLight + DirectionalLight 等光源，否则模型将全黑或不可见。
- ✅ 几何体居中与缩放：.stl 坐标常偏移且单位不一，建议用 Box3.setFromObject() 自动计算中心与尺寸后校正位置和缩放。
- ⚠️ CORS 注意事项：本地直接双击打开 html 会因文件协议（file://）触发跨域限制；请使用本地服务器（如 vs code Live Server 插件、npx serve）或托管至支持 CORS 的 URL（如 gitHub Raw 链接）。
- ? CDN 版本一致性：确保 three 主库与 addons 路径版本号严格一致（如 @0.154.0），避免 API 不兼容。
? 总结：放弃所有非官方 stl-loader 第三方 CDN，坚持使用 unpkg.com/three@X.X.X/examples/jsm/… 这一权威路径，配合标准 ESM 导入与基础渲染配置，即可稳定加载 STL 模型。这是目前最轻量、零构建、开箱即用的方案。