HTML5无法直接加载CAD文件，需将CAD模型经STEP/IGES导出、网格处理、Blender转glTF/GLB后，用Three.js加载并按0.001缩放（mm→m）及坐标系对齐。
HTML5 本身不支持直接导入 CAD 文件
浏览器原生不识别 .dwg、.dxf、.stp、.iges 这类 CAD 格式。所谓“CAD 转 HTML5”，本质是把 CAD 模型转成 WebGL 可渲染的中间格式（如 .glb、.gltf），再用 Three.js、Babylon.js 等库在 HTML 页面中加载显示。
主流可行路径：CAD → STEP/IGES → Mesh → glTF/GLB
直接从原始 CAD 软件导出为 glTF 几乎不可行，需借助中转环节。关键在于几何简化与拓扑修复——CAD 模型常含大量参数化曲面、微小边、重叠面，WebGL 渲染器无法处理。
- 用 SolidWorks / Fusion 360 / FreeCAD 导出为
.step或.stl（注意：STL 是三角面片，精度损失大；STEP 保留 B-Rep，后续转换质量更高） - 用 pythonOCC 或 MeshLab 做网格简化、孔洞填充、法线统一
- 用 Blender + glTF 插件 导入并导出为
.glb（推荐：启用Draco compression减小体积） - 若模型含装配结构或层级关系，优先选
.gltf（文本可读）而非.glb（二进制），方便调试节点名和材质引用
Three.js 加载 glTF 的最小可用代码
别信“一键在线转换网站”，多数会删材质、崩缩放、丢单位。自己控制流程才能保精度。
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
loader.load(
'model.glb',
(gltf) => {
const model = gltf.scene;
// CAD 单位通常是 mm，Three.js 默认米制 → 缩放 0.001
model.scale.set(0.001, 0.001, 0.001);
scene.add(model);
},
undefined,
(error) => console.error('加载失败:', error)
);
常见报错：THREE.GLTFLoader: Couldn't load the image texture.jpg —— glTF 引用的外部纹理路径没随模型一起部署；Cannot read property 'children' of undefined —— 模型根节点为空，需检查 Blender 导出时是否勾选 Include > Selected Objects。
立即学习“前端免费学习笔记（深入）”；
真正卡住的地方不是格式转换，而是单位、比例和坐标系
CAD 软件默认 Z 向上（SolidWorks）、Y 向上（Fusion 360），而 Three.js 是 Y 向上、Z 向屏幕内。STEP 导出时不指定坐标系，Blender 里可能自动翻转 Z 轴，导致模型倒置；毫米单位不缩放，模型会小到看不见。这些细节不会报错，但模型就是“不出现”或“飞走”。
