在Web端实现CAD模型的可视化，本质是把桌面级矢量与三维数据转换成浏览器能解析的缓冲几何体。许多团队误以为直接将DWG丢进HTML5页面就能显示，实际上浏览器并不原生支持CAD专有格式，必须经由中间格式与渲染库搭建桥梁。
一、CAD模型导出的前期处理
在把模型送进HTML5之前，先要在CAD软件里做“减肥”和“绑定”。工程图常带有外部参照（Xref）、图层过滤器和大量标注，这些元素会显著拖慢转换速度，甚至让转换工具报错。建议先使用_AUDIT命令修复图纸错误，再用_PURGE清理未使用的块与样式。
如果模型依赖外部参照，务必用_XREF面板将其绑定为块。否则在导出STEP或OBJ时，参照内容会被忽略，最终在网页里只看到主体框架。对于大型装配体，可以暂时关闭不需要显示的图层，减少顶点数量。下面是在AutoCAD命令行中批量绑定的简易脚本思路：
(defun c:bindall ()
(setq xr (tblnext "BLOCK" T))
(while xr
(setq name (cdr (assoc 2 xr)))
(if (equal (logand (cdr (assoc 70 xr)) 32) 32)
(command "_.XREF" "BIND" name)
)
(setq xr (tblnext "BLOCK"))
)
(princ)
)
上述LISP代码遍历块表，若发现带有外部参照标志的块就执行绑定。实际项目中可根据需要加入错误处理。完成清理后，模型文件体积通常能下降百分之三十以上，为后续Web渲染减轻负担。
二、选择中间格式：OBJ、STEP与glTF
CAD原生格式无法直接进浏览器，需要转为Web友好格式。常见路线有两条：一是通过AutoCAD导出OBJ，再用工具转glTF；二是用FreeCAD打开DWG后另存为STEP，再通过在线转换服务生成glTF。OBJ结构简单但缺少材质压缩，STEP适合保留精确曲面，glTF则是WebGL首选。
从实测数据看，同一个二百兆的工厂设备装配体，转OBJ后前端解析耗时约三点二秒，而转glTF仅一点九秒，且显存占用低四成。这是因为glTF采用二进制缓冲与 Draco 压缩扩展。若你的HTML5建模侧重展示而非精密测量，优先选glTF。以下是将OBJ转换为带Draco压缩的glTF命令行示例：
# 使用 gltf-transform 进行压缩转换 npx gltf-transform optimize input.obj output.gltf --compress draco
该命令依赖Node环境，会在输出文件中嵌入压缩几何体。注意CAD导出的OBJ往往法线错乱，可在转换前用_FACETRES提高曲面细分，避免网页里出现破面。对于含大量螺栓的标准件，建议在CAD中先合并相同零件，减少Draw Call。
三、Three.js加载与场景搭建
拿到glTF后，前端用Three.js的GLTFLoader即可载入。HTML5建模的关键不只是显示模型，还要处理光照、轨道控制与移动端适配。下面给出一个最小可运行页面结构，其中转义了所有标签字符以符合规范。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>CAD模型展示</title>
<style> body { margin: 0; } </style>
</head>
<body>
<script type="module">
import * as THREE from 'https://ipipp.com/three.module.js';
import { GLTFLoader } from 'https://ipipp.com/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 0.1, 1000);
camera.position.set(5, 5, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const light = new THREE.HemisphereLight(0xffffff, 0x444444);
scene.add(light);
const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
scene.add(gltf.scene);
renderer.render(scene, camera);
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
代码中通过import从ipipp.com示例域名加载库文件，实际部署请换为自有CDN。若模型单位与Three.js默认米制不符，可在loader.load回调里用gltf.scene.scale.set(0.001,0.001,0.001)将毫米转为米。此外，移动端需监听resize事件重设相机比例。
四、常见错误与优化建议
开发者常遇到模型导入后全黑，多半是CAD导出时未带材质或法线反向。可在Three.js里加MeshStandardMaterial并开启side: THREE.DoubleSide临时排查。另一个坑是中文路径，浏览器加载glTF依赖的bin与贴图时，若路径含中文会直接失败，务必改为英文目录。
性能方面，若模型面数超百万，建议开启renderer.info监控，配合THREE.LOD做层级细节。对于静态展示，可预渲染至纹理以减少实时计算。下表列出不同方案优劣：
| 转换路线 | 优点 | 缺点 |
|---|---|---|
| CAD直出OBJ | 步骤少，无需中间件 | 无压缩，加载慢 |
| STEP转glTF | 曲面保真，体积小 | 需FreeCAD等工具 |
| 第三方云服务 | 支持格式多 | 数据需出网，有泄露风险 |
综合来看，在内网环境用FreeCAD加glTF路线最稳。只要前期清理到位、格式选对，HTML5建模导入CAD模型并非难事，还能借助WebGL实现以往桌面软件才有的交互巡检。